WordPress Navigation Block 教學:建立主選單、子選單與手機導覽

WordPress Navigation Block 主選單、子選單與手機導覽示意圖

Navigation block 讓使用區塊主題或支援模板編輯的網站直接在 Site Editor 管理選單結構、樣式及手機顯示。它不只是把連結排成一列,而是承擔網站資訊架構、鍵盤操作和重要轉換路徑。修改前應先理解選單與 Navigation block 的關係,避免誤刪共用選單或建立重複版本。

確認主題支援方式

區塊主題通常可到 Appearance > Editor 編輯 Header template part 內的 Navigation block。經典主題可能仍使用 Appearance > Menus,或只在支援 template editing 時提供區塊導航。不要在錯誤介面建立第二套選單。

先規劃資訊架構

列出訪客最常完成的任務,例如了解服務、查看價格、閱讀教學、登入或聯絡。主選單只保留高優先項目,長尾內容由分類頁、頁尾或站內搜尋承接,避免把網站地圖全部塞進 Header。

找到正在使用的選單

選取 Navigation block,打開右側 Settings 和 List View,查看選單名稱及項目。網站可能有 Header、Footer、會員和語言選單;先確認目前 template part 使用哪一個,才開始修改。

建立新選單

在 Navigation block 的 Menu options 選擇 Create a new menu,再逐一加入 Page Link、Custom Link 或其他支援區塊。使用能描述位置和用途的名稱,例如「Header 主選單」,避免留下多個無法辨認的 Navigation。

從 Page List 轉為可編輯選單

首次加入 Navigation block 時可能顯示 Page List。選取它並按 Edit,可把頁面清單轉成可個別管理的 Page Link。轉換後新增頁面不一定自動加入,團隊要建立更新選單的流程。

加入頁面與自訂連結

使用 block inserter 搜尋已公開頁面,或加入 Custom Link 並輸入網址和標籤。建立新頁面的快捷功能可能立即公開空白頁,使用前要確認內容是否已準備好,避免訪客看到未完成頁面。

建立清晰的子選單

選取父項目並加入 Submenu,或在 List View 把項目拖入父層。保持最多兩至三層,父標籤要能概括子項目。若父項目本身亦需開啟頁面,測試滑鼠、觸控和鍵盤行為是否一致。

用 List View 調整順序

複雜導覽在畫布拖動容易放錯層級,List View 通常更清楚。逐項移動後核對縮排及父子關係,再儲存。大量改動前可複製 Header template part 或建立 staging 版本。

編輯連結設定

選取 Navigation Link 可修改標籤、URL、description、title 和 rel。內部連結通常不需要新分頁;外部工具是否另開視窗要保持一致,並避免只靠新視窗解決導覽問題。

設定手機顯示

Navigation block 的 Display 可控制小螢幕是否使用 menu icon,通常選 Mobile。開啟後會顯示 overlay;測試開啟、關閉、背景捲動、焦點移動和返回鍵,不能只縮窄桌面瀏覽器看外觀。

決定子選單開啟方式

子選單可設定 hover 或 click。Hover 對觸控和鍵盤不一定友善,重要網站可優先測試 click 行為。無論選哪一種,都要有可見焦點、展開狀態和足夠點擊範圍。

設計顏色與排版

在 Color、Typography、Dimensions 和 Layout 調整文字、背景、間距及對齊。保持正常、hover、focus 和開啟狀態有足夠對比;手機 overlay 與子選單背景亦需分別核對。

鎖定重要導覽

Block lock 的 Restrict editing 可減少作者誤改選單項目,但不代替使用者角色和工作流程。只讓指定管理員編輯全站 Header,其他人可提出變更而不直接修改共用導覽。

謹慎刪除選單

Advanced 中的 Delete menu 會刪除所選選單,Navigation block 可能變成 placeholder,但不會刪除被連結的頁面。刪除前記錄使用位置、匯出或截圖,並準備選擇替代選單。

完成跨裝置驗收

測試桌面、平板和手機的所有主項、子項、外部連結、登入狀態與目前頁面提示。再以鍵盤 Tab、Enter、Escape 操作,檢查螢幕閱讀器標籤及焦點順序,最後清理快取並核對公開前台。

參考資料

WordPress 官方 Navigation block 文件:https://wordpress.org/documentation/article/navigation-block/

WordPress 官方 Submenu block 文件:https://wordpress.org/documentation/article/submenu-block/

WordPress 官方 Site Editor 文件:https://wordpress.org/documentation/article/site-editor/

«
  • WordPress Navigation Block 主選單、子選單與手機導覽示意圖
    July 27, 2026
  • WordPress 留言審核、垃圾訊息封鎖與通知設定示意圖
    July 27, 2026
  • WooCommerce 訂單狀態由待付款到已完成的工作流程示意圖
    July 27, 2026
  • Cloudflare Rate Limiting 保護 WordPress 登入與 API 請求示意圖
    July 27, 2026
  • WooCommerce 付款閘道選擇、測試模式與正式收款示意圖
    July 27, 2026
  • WordPress Redis 與 Memcached 持久物件快取設定及清理示意圖
    July 27, 2026
  • WooCommerce 全額與部分退款、庫存回補及付款核對示意圖
    July 27, 2026
  • WordPress Site Health 網站健康檢查與問題排查示意圖
    July 27, 2026
  • WordPress Navigation Block 主選單、子選單與手機導覽示意圖
    July 27, 2026
  • WordPress 留言審核、垃圾訊息封鎖與通知設定示意圖
    July 27, 2026
  • WooCommerce 訂單狀態由待付款到已完成的工作流程示意圖
    July 27, 2026
  • Cloudflare Rate Limiting 保護 WordPress 登入與 API 請求示意圖
    July 27, 2026
  • WooCommerce 付款閘道選擇、測試模式與正式收款示意圖
    July 27, 2026
  • WordPress Redis 與 Memcached 持久物件快取設定及清理示意圖
    July 27, 2026
  • WooCommerce 全額與部分退款、庫存回補及付款核對示意圖
    July 27, 2026
  • WordPress Site Health 網站健康檢查與問題排查示意圖
    July 27, 2026