WordPress 選單設定教學：從零打造清晰的網站導覽

說不定你也曾點開一個網站，盯著最上方的選單找了三分鐘，還是搞不清楚「關於我們」「服務項目」「最新消息」到底哪一個才放了你想要的資訊？這種經驗每個人都遇過。把場景反過來，當訪客走進你自己的網站，他們腦袋裡也是同樣的問號。選單，就是回答這些問號的第一線，也是 WordPress 架站全攻略 在導覽設計上的核心。

選單不是把頁面排一排放上去就了事。它同時要服務兩個對象：真人訪客，以及 Google 的爬蟲程式。清楚的導覽能幫助訪客找到重要頁面，也讓搜尋引擎發現連結並理解內容關係。這篇教學會從資訊架構的思考出發，帶你用 WordPress 內建的選單系統，從零打造一份對人友善、對 SEO 也友善的網站導覽。

快速總覽：重點摘述選單設定的核心觀念

• 傳統主題使用選單項目、選單集合與顯示位置；區塊主題則在 Navigation 區塊管理導覽。
• 動手前先決定資訊架構，再進後台拉順序，順序顛倒會一直回頭改。
• 頂層項目與下拉層級依訪客任務精簡，再以實際操作檢查是否容易找到內容。
• 手機版一定要實測，因為 Google 已經全面採用行動優先索引。
• 大型傳統選單若儲存不完整，應檢查 PHP 輸入欄位上限及伺服器紀錄。

WordPress 的導覽方式會隨佈景主題類型而改變。傳統主題通常使用選單位置，區塊主題使用 Navigation 區塊；先辨認目前的主題，再選對設定入口，能減少找不到選項的困擾。

選單是網站的導覽骨架，不是裝飾品

很多新手把選單當成「把所有頁面塞進去」的清單，但選單其實是整個網站的導覽骨架。它決定訪客第一眼看到什麼、決定點哪一個按鈕，也決定 Google 爬蟲從首頁出發後，怎麼用最短路徑走完你的網站。

站內選單連結能幫助搜尋引擎發現頁面並理解網站架構。主選單適合放讀者常用或重要的入口；不必用固定項目數推算「權重稀釋」。進一步的配置方法可參考內部連結與網站架構指南。

清楚的選單能幫訪客找到下一個目的地。要判斷是否有效，可以測試服務頁是否容易找到、下拉選單是否能操作，以及手機版是否遮住內容；不能單憑跳出率或停留時間推定排名一定改變。

動手前先決定資訊架構：分類邏輯比按鈕樣式重要

很多網站一進後台就直接拉選單，拉完才發現「那這個頁面到底要放哪裡？」，結果選單越拉越亂。正確順序是反過來的：先在紙上或任何你順手的筆記軟體把資訊架構畫出來，再進 WordPress 依樣畫葫蘆。先想清楚要分幾區、每區放什麼，後台操作只是執行而已。

規劃資訊架構時，有幾個原則屢試不爽：

• 用使用者任務分類，不要用公司部門分類。訪客不在乎你內部怎麼分部，他們在乎的是能不能兩秒內找到要的服務。「行銷部」「技術部」這種分法對外完全沒意義。
• 頂層項目依主要任務精簡。不要把記憶容量的說法當成導覽項目上限；應測試讀者能否辨識分組與找到目標。
• 下拉層級以容易操作為準。可先從較淺的結構開始；內容較多時，搭配分類總覽頁，再測試桌機與手機的展開、返回路徑。
• 依使用情境排列重要入口。繁體中文橫排導覽可先把常用入口放在容易掃讀的位置；聯絡、服務與品牌資訊的次序，仍應依訪客任務測試。

架構畫完，後續的 WordPress 操作就不會迷失。如果你還在思考網站整體結構要怎麼安排，建議把網站架構圖規劃全攻略：SEO 友善的網頁結構設計心法與實例解析先讀一遍，選單其實就是網站架構的「使用者可見版」，兩者一起規劃最省事。

我用一個具體例子示範怎麼想。假設你做的是一個室內設計公司的官網，常見的錯誤是把選單分成「設計部」「工程部」「行政部」，這對訪客毫無意義。換成使用者任務的角度，主選單應該長這樣：作品案例、服務項目、設計流程、關於我們、聯絡我們。看作品是訪客的第一個念頭，所以放最左邊；聯絡與關於放最右邊。服務項目底下可以再做一層下拉，分成「住宅設計」「商業空間」「舊屋翻新」這種依需求分類的子項，千萬別依你內部哪個設計師負責什麼來分。這個原則套到任何產業都成立：永遠從「訪客想做什麼」出發，不要從「我們公司怎麼分工」出發。

不同類型網站的選單內容該怎麼放

不同類型的網站，選單該出現的項目差很多。憑感覺亂放很容易遺漏重要項目，建議先參考底下這份對照表，把常見的項目就定位，再依自己的業務微調。我把三種最常見的站型整理出來：

這份表是起點，不是死規定。重點是掌握一個原則：主選單放「訪客最想找、也最能代表你業務」的東西，頁尾放「政策性、輔助性、法律必要」的東西。電商站分類多時，可以比較 mega menu、分類總覽頁與分層導覽；選擇取決於內容組織與操作測試，不是分類多就一定要用大型選單。如果你正要架電商站，WordPress 購物網站架設全教學：從零打造你的電商平台，購物車設定一次學會把從選主題到設購物車的流程都走過一遍，選單規劃可以搭著一起做。

認識 WordPress 選單系統的三層結構

要正確使用 WordPress 選單，得先搞懂三層結構，很多新手混淆就是卡在這裡。三個相近的名詞綁著三個不同的東西，分不清楚就會一直在錯的地方找設定。

關鍵在於：選單位置是佈景主題決定的，不是你決定的。主題在原始碼裡用 register_nav_menus() 這個函式宣告「我有頁首和頁尾兩個位置可以放選單」，你在後台才能把做好的選單掛上去。換句話說，換了主題，能用的位置就會跟著變。這是 WordPress 官方 Theme Handbook 明確記載的機制。

在傳統主題中，做好的選單仍須指派到主題提供的位置。可到「外觀 → 選單 → 管理位置」查看；區塊主題則應檢查範本中的 Navigation 區塊。若不熟後台入口，可以先看WordPress 後台操作指南。

從零建立第一個導覽選單：完整操作流程

先確認佈景主題類型：以下「外觀 → 選單」與管理位置流程適用於傳統主題。區塊主題通常改從「外觀 → 編輯器」管理導覽，並在 Navigation 區塊中新增連結、調整子選單與手機顯示；找不到傳統選單入口，不代表權限或網站壞了。

觀念講完，來動手。第一次建立選單，照接下來這個順序最不會出錯。

1. 進入後台，點左側「外觀 → 選單」（英文介面是 Appearance → Menus）。
2. 在最上方的「選單名稱」輸入一個你認得的名字，例如「主選單」，按「建立選單」。
3. 畫面左邊會出現幾個區塊：頁面、文章、自訂連結、分類。勾選要加入的項目，按「加入至選單」。
4. 右邊的選單結構區，用滑鼠拖曳就能調整順序。往右拖一格，就變成上一層的子選單。
5. 全部排好後，畫面最下方的「選單設定」，勾選要顯示這個選單的位置（例如 Primary menu），按「儲存選單」。

有兩個小細節新手常錯過。第一，左邊那幾個區塊預設只顯示「最近」的項目，點最右上角的「顯示選項」標籤，可以展開更多篩選條件，把所有頁面、所有分類都列出來。第二，如果左邊找不到「分類」這個區塊，一樣去「顯示選項」裡把它勾起來就會出現。這個「顯示選項」是 WordPress 後台一個低調但好用的開關，很多找不到的設定都藏在裡面。

子選單（下拉選單）是靠拖曳縮排做出來的。把項目往右下方拖，它就會變成上一層的子項。能顯示幾層及如何展開，還要看主題的前台實作。層級增加後應測試鍵盤、觸控與返回操作，必要時改用分類總覽頁。

主選單可以連向文章、頁面或分類彙整。常用服務與分類適合作為入口；具有長期導覽價值的核心文章也可以直接加入，重點是訪客能否理解它的用途。內容類型的差異可參考WordPress 文章與頁面比較。

選單項目的命名：每個字都要做事

選單項目叫什麼名字，比你想的更影響點擊率。一個常見的錯誤是用「產品」「服務」這種太寬泛的字，訪客點進去才發現裡面什麼都有、等於什麼都沒說。另一個極端是用公司內部才懂的代號或縮寫，外部訪客看了滿頭問號。好的命名原則是：具體、動作導向、能讓人一秒判斷點下去會看到什麼。

從 SEO 的角度看，選單文字會變成內部連結的錨點文字。錨點文字是 Google 判斷目標頁面主題的重要線索，你寫「舊屋翻新」，目標頁面就有機會在「舊屋翻新」這組關鍵字上獲得加分的相關性訊號。反過來說，你寫「點我」，等於把這條強力內部連結的錨點文字浪費掉。所以選單命名不只關乎美感，也關乎排名。

多層級下拉選單的設計眉角

兩層下拉是基本款。但內容一多，例如電商網站有十幾個產品分類、每個分類底下又有子分類，普通下拉選單就會變成一長條往下拉到底，難用到不行。這時候有兩個方向可以選。

內容層級較多時，可以評估 mega menu（大型選單），用寬版面板呈現多個子分類、圖片或促銷資訊；也可以把次要分類移到側邊欄或分類頁的次選單。Astra Pro 的 Nav Menu 模組支援 Mega Menu，設定方式可參考Astra Pro 選單與頁首教學；側邊欄可看WordPress 區塊小工具與側邊欄設定，分類前後次序則可參考分類排序教學。選擇哪一種導覽方式，仍要用桌機與手機的實際操作測試。

不管選哪一個方向，都要守住一條底線：手機版不適合複雜的多層選單。桌機的 hover（滑鼠移過就展開）互動到手機上完全失效，多層結構在手機上要靠展開收合一層層點開，點到第三層訪客早就放棄了。所以多層選單設計完，一定要縮視窗到行動裝置寬度親自點一遍，這步驟省不得。

選單位置（Menu Location）：把選單掛到對的位置

一個網站通常不只有一組選單。最常見的組合是：頁首主選單、頁尾選單、手機選單。這三組往往是不同的內容。頁首放核心導覽，頁尾放「隱私權政策」「服務條款」這類次要連結，手機版則可能精簡成更少的項目。把所有連結塞進同一組、再用同一個位置顯示，是新手最常犯的混亂來源。

在「外觀 → 選單 → 管理位置」這個標籤頁，你可以為每一個主題預留的位置指定一組選單。一組選單可以同時掛到多個位置（例如頁首和頁尾都用同一組），但我不建議這樣做，因為這兩個位置的資訊層級本來就不一樣。頁首是門面，頁尾是補充，硬要用同一份內容只會讓頁尾變得又臭又長。

如果你的主題是用 Elementor 或 Divi 這類頁面編輯器打造頁首頁尾，選單位置的管理方式會不太一樣。Elementor 的 Theme Builder 讓你直接在視覺化介面裡拖拉選單區塊，彈性比傳統主題位置大很多，能放圖示、放按鈕、放 CTA。Elementor Pro 頁首頁尾設計：打造高質感網站導航的完整教學和Divi 頁首套版與 Theme Builder 匯入教學有完整的視覺化頁首設計流程，想把選單做得更有質感的人一定要看。

手機版選單：漢堡選單與觸控體驗

手機導覽值得獨立檢查。Google 的行動優先索引主要使用行動版內容來檢索與建立索引；手機版的重要內容與連結若缺漏，不能期待桌機版的配置自動補足。可參考Google 行動優先索引建議。

先檢查連結是否使用帶有有效 href 的 a 元素。JavaScript 產生的連結也可能被 Google 檢索，但不應要求點擊或捲動後才載入重要連結；可以用網址審查查看轉譯後的 HTML。觸控方面，WCAG 2.2 的目標尺寸最低準則為 24×24 CSS pixels，另有間距等例外；實務上可做得更大，再用手機測試誤觸與展開操作。

漢堡選單（☰）是最常見的手機版樣式，點開後從側邊或上方滑出。它省空間，但代價是：選單內容預設隱藏，訪客必須主動點開才看得到。所以最關鍵的幾個連結（例如「立即購買」「聯絡我們」），建議在手機版單獨用一條固定的通知列或按鈕顯示，不要藏在漢堡裡。WordPress 網站通知列教學：製作置頂推播橫幅，有效提升 CTA 點擊率講的就是這種置頂 CTA 橫幅的做法。更廣泛的響應式觀念，可以搭配響應式網頁設計 RWD：手機版網站不漏接任何一位客戶一起看，會把整個行動版的全局拼起來。

手機選單常見的問題包括：層級太深，使用者反覆展開仍找不到目標；關閉按鈕不明顯，無法回到內容；項目太擠，容易誤觸。檢查時應實際完成「展開、選取、關閉或返回」的流程，也要試鍵盤操作，不能只看桌面預覽判斷。

進階技巧一：自訂連結、錨點、外部連結

選單不只能放內部頁面。WordPress 的「自訂連結（Custom Links）」區塊讓你放任何網址，這在幾個情境特別好用：

• 頁內錨點：把連結設成 https://你的網址/關於我們/#團隊介紹，點下去直接跳到那一頁的某個段落。長頁面很實用。
• 外部服務：把「線上預約」「會員登入」連到外部系統，例如表單工具、第三方會員平台。
• 社群連結：粉絲專頁、Instagram 等外部連結，放頁尾選單很常見。

外部連結不必一律加上 rel="nofollow"。付費或贊助連結應標示 sponsored，使用者提供的連結可用 ugc；nofollow 適合不願背書且其他值不適用的連結，不應只為保留權重而套在官方社群連結。WordPress 後台的做法是點開畫面最右上角的「顯示選項」，勾起「進階選單屬性」裡的「連結目標」「標題屬性」「連結關係（XFN）」，每個選單項目就會多出對應欄位，在「連結關係（rel）」欄位輸入 nofollow 即可。這個欄位預設是關起來的，所以很多人根本不知道它能設。

另一個常用屬性是「在新分頁開啟」，勾起來連結就會帶 target="_blank"。外部連結我習慣都開新分頁，避免訪客一點就整個被帶離你的網站。內部連結則維持原分頁，讓他們留在站內順著流程走完。這個原則很簡單，但很多人沒意識到它對停留時間的影響。

進階技巧二：條件式選單與多語系

預設的選單對所有訪客都一樣。但有些情境你會希望選單根據條件動態變化，這時原生功能就不夠用，得搭配外掛或主題設定。

第一種情境是登入狀態。會員網站很常見的設計：未登入時選單顯示「登入」「註冊」，登入後變成「會員專區」「登出」。實際做法取決於使用的選單區塊與版本；需要複雜的角色條件時，可另用外掛或程式碼處理。背後的核心機制是「使用者角色權限」，讓選單項目依訪客是不是會員、屬於哪一種角色，來決定要不要出現。想把這套機制摸熟，WordPress 使用者權限完全指南：用 User Role Editor 精準管控每個角色的後台存取範圍是必讀的地基，搞懂角色分級，條件式選單才有支撐。

第二種情境是多語系。多語系網站的選單不能只做一組，每個語言要對應各自的頁面與翻譯。用 Polylang 這類多語系外掛時，每個語系會維護自己的選單，切換語言時連選單也跟著換，訪客看到的永遠是當前語言版本的導覽。Polylang 完整教學：從安裝到上架，零基礎也能搞定 WordPress 多語系網站從安裝到上架講得很清楚，選單設定是其中一段，做多語站之前務必先讀。

第三種情境是根據頁面顯示不同選單。例如產品頁只顯示產品相關選單，部落格只顯示文章分類。這要靠 Conditional Menu 類型的外掛，或在主題層級用程式判斷當前頁面再決定顯示哪組選單。概念跟前兩種類似，差別在觸發條件從「人」變成「頁面」。

選單的 SEO 與技術優化清單

把選單功能用熟之後，這裡有幾個我做選單時一定檢查的技術與 SEO 項目。這些是「會做選單」和「把選單做到對 SEO 真正有幫助」之間的差距，很多人停在前面那一步就收工了。

大型傳統選單儲存不完整時，可檢查 PHP 的 max_input_vars。PHP 預設為 1000，但實際主機設定可能不同；它限制的是輸入變數數量，不是 100 個選單項目的固定上限。先查看請求、錯誤紀錄及主機設定，確認原因後再依需要調整，並重測儲存結果；外掛衝突、請求大小或逾時也可能造成類似症狀。

另一個常被看漏的是效能。選單本身很輕，但裝了動態選單外掛、mega menu 外掛後，前端會多載入 CSS 和 JavaScript，拖慢首頁載入速度。載入速度是 Google 公開的排名因素之一，挑選單外掛時要注意它有沒有產出多餘的程式碼、能不能只在前端需要的頁面載入。整站的快取與效能優化，可以參考WordPress 快取外掛推薦：7 款最佳網站加速外掛完整實測比較，檢查快取與資源載入；快取不會自動消除所有多餘的前端程式。

選單與無障礙：別讓螢幕閱讀器讀不懂你的導覽

導覽需要讓使用螢幕閱讀器、鍵盤或觸控的訪客都能操作。語意標記、可辨識名稱與焦點管理各有用途，不能把搜尋引擎當成螢幕閱讀器，也不應把加入 ARIA 屬性當成排名加分保證。

• 用語意標籤包裹選單。好的主題會用 <nav> 標籤包導覽列，並加上 aria-label="主要導覽"，讓機器知道這一區是選單。nav 能標示導覽區域；即使沒有 nav，帶有效 href 的連結仍可能被搜尋引擎解析。
• 鍵盤要能操作。用 Tab 鍵應該能逐一走過每個選單項目，Enter 能觸發連結。下拉子選單也要能用鍵盤展開。純靠滑鼠 hover 才能展開的選單，對鍵盤使用者完全不可用。
• 對比度要夠。選單文字和背景的顏色對比，建議達到 4.5:1 以上。深藍底配深灰字這種搭配，在桌機上勉強能看，到手機陽光下就糊成一片。
• 當前所在頁面要標示。WordPress 原生會給當前頁面對應的選單項目一個 current-menu-item 的 class，主題應該用它做出視覺差異，讓訪客知道「我現在在哪一頁」。這對導覽體驗的幫助比想像中大。

這幾點大多數主流主題都會處理，但免費或來路不明的主題常常缺東缺西。換主題、或挑選單外掛時，把無障礙列進檢查清單，長期會少掉很多麻煩。想把主題這層的選擇做對，15 大 WordPress 佈景主題推薦：免費＋付費完整比較，附中文安裝教學把市面上主流主題的特性都比過一遍，包含它們對選單與無障礙的支援程度。

常見錯誤與排查：選單為什麼怪怪的？

實務上，選單出問題大多是幾個固定原因。我把最常被問的狀況整理成接下來這張表，遇到時照著排查就好，不用從頭猜。

換主題是最容易出事的時刻。因為選單位置是主題綁定的，主題一換，原本掛好的選單會「找不到家」。這不是資料不見，只是位置對不上，重新指派就回來了。但保險起見，養成一個習慣：做大改動前先備份。WordPress 備份與還原完全指南：4 種方法確保你的網站永不消失介紹了四種備份方法，選一個最順手的定期跑，選單改壞了也能一鍵還原。

選單不是設好就好：定期檢視的時機

很多站長把選單設好就再也不動它，這其實是個隱藏問題。網站會長大，頁面會新增，舊服務會下架，選單如果跟不上，就會慢慢變成跟現況脫節的化石。我自己的習慣是每季花十分鐘重新檢視一次選單，檢查幾件事：有沒有連到已刪除頁面的死連結、有沒有該上架的新服務還沒放進去、頂層項目是否出現重複或難以辨識的分組、手機版是不是還能順暢操作。

重要頁面表現不佳時，可一起檢查內容是否符合需求、是否被索引，以及網站內是否有清楚入口。增加導覽連結有助於發現內容，但不能保證比修改內容更快帶來流量；調整後仍須觀察查詢與索引資料。資料判讀可參考Google Search Console 設定與追蹤。

六步行動方案：今天就重建你的導覽選單

觀念、操作、進階、排查都講完了。這裡給你一個可以馬上動手的六步行動方案。不用一次做完，每天撥半小時走一步，一週內你的網站導覽就會脫胎換骨。

1. 盤點現有選單。把你目前主選單的每一個項目抄下來，數一數頂層有幾個、最深幾層。標記重複、難辨識與操作路徑過深的項目，先測試問題再決定如何調整。
2. 畫出新的資訊架構。在紙上重新分組，用使用者任務而非公司部門來想。把次要連結移到頁尾候選區，把核心服務推到左側。
3. 清掉舊選單。在後台把過時、重複、點進去是 404 的項目全部刪掉。一個乾淨的起點比什麼都重要，不要在舊的爛攤子上硬改。
4. 重建主選單。傳統主題從「外觀 → 選單」調整；區塊主題則編輯 Navigation 區塊。邊拉順序邊對照你畫的架構圖，憑腦袋裡的記憶拉順序很容易出錯，務必對著紙上那張圖做。
5. 設定頁尾與手機選單。頁尾放次要連結與政策頁，手機版確認漢堡選單能展開、觸控範圍夠大、關鍵 CTA 沒被藏在裡面。
6. 手機實測。拿起自己的手機開網站，用訪客的心情從首頁走一次，看能不能在三秒內找到核心服務。做不到，就回頭調。

導覽優化的成效可以從具體任務檢查：訪客是否找得到服務、是否知道目前位置、是否能用手機或鍵盤完成操作。搜尋表現則另以索引與查詢資料觀察，不能只憑停留時間推定排名會提高。

如果你才剛開始架站，選單只是整個 WordPress 學習地圖裡的一塊拼圖。從主機、主題到外掛，WordPress 架站完整攻略：新手零基礎也能自己架設專業網站把新手零基礎的路徑都串起來了，搭配這篇選單教學一起看，會更有全局觀，知道自己每一步在整張地圖的哪裡。

現在就打開你的網站，用一個第一次來的訪客的眼睛，重新看一遍最上方那排選單。你會發現，要改的地方比你想像中多。那就對了，這正是開始優化的起點。