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/









