如何在 WordPress 導覽列內加入可跳到特定頁面段落的連結?

  • 發布日期2023.03.21
  • 文章分類網站知識

集盒設計收到來自客戶提問:如何在 WordPress 導覽列新增下拉式選單?而且選單內的連結點擊後想要跳轉至各段落,譬如說:

  • 點擊隱適美矯正案例,跳到隱適美矯正案例段落
  • 點擊牙科知識分享,跳到牙科知識分享段落
  • 點擊新聞媒體報導,跳到新聞媒體報導段落

問題拆解

這個問題可以分為兩個部分

  1. 如何在導覽列新增下拉選單
  2. 如何製作錨點連結,該連結點擊後可以跳到某頁面的某個區塊

問題 1:如何在導覽列新增下拉選單

前往「選單」可以編輯導覽列,透過前後拖曳將項目變為子項目,在前台會自然成為下拉式選單

WordPress選單內推為子項目

問題 2:如何製作錨點連結,該連結點擊後可以跳到某頁面的某個區塊

如何果想要製作錨點連結,該連結點擊後可以跳到某頁面的某個區塊,會需要先在目標頁面中的區塊加入錨點

如此一來使用連結 https://example.com/#invisalign 便能夠直接跳到該錨點

錨點連結的格式為一般的網址中帶有 # 後方為錨點名稱,只要該頁面有對應元素 id 為該錨點名稱,便會直接跳到該頁面區塊。

結合前兩者將連結加入 WP 選單

結合問題 1 與 問題 2,我們可以在選單中使用「自訂連結」將該連結加入到導覽列中