W whoops.tw

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

WordPress 選單本身的難點不在「新增」,而在「位置對應」與「多層結構」。選單只是一個容器,真正決定它顯示在哪、長成什麼樣的,是佈景主題註冊的選單位置,以及拖放時的父子層級。…

WordPress 選單本身的難點不在「新增」,而在「位置對應」與「多層結構」。選單只是一個容器,真正決定它顯示在哪、長成什麼樣的,是佈景主題註冊的選單位置,以及拖放時的父子層級。WordPress 後台固定從「外觀 > 選單」(Appearance > Menus)進入,位置數量由主題的 register_nav_menus() 決定,一個位置通常只能掛一個選單 [來源:〈WordPress Theme Handbook — Navigation Menus〉〈https://developer.wordpress.org/themes/features/menus/〉〈2026〉]。把容器和位置分開理解,超過九成「選單設定了卻沒出現」的問題都能當場解掉。

重點先看:選單設定了卻沒顯示,九成不是設定錯誤,而是建了選單卻沒勾顯示位置,或主題根本沒註冊那個位置;位置由主題決定、多層在桌機與手機行為不同,這兩件事才是新手真正卡關的地方。

WordPress 選單是什麼?先搞懂「容器」和「位置」兩件事

WordPress 選單本身只是一個可以放頁面、文章、分類、自訂連結的「容器」,它要顯示出來必須被指派到佈景主題提供的「選單位置」。這就是新手最常見的卡關點:你建好了選單、加了項目、按了儲存,結果前台什麼都沒有。原因多半出在你建了選單卻沒勾顯示位置,或你用的主題根本沒註冊那個位置,設定本身往往沒有錯。

把這兩個概念拆開,問題會瞬間變清楚。選單是「內容」,位置是「掛載點」。你可以把同一份選單內容掛到不同位置,也可以建好幾份不同的選單分別掛到主選單、頁腳、側邊欄。但反過來,一個位置通常一次只能掛一個選單 [來源:〈WordPress Theme Handbook — Navigation Menus〉〈https://developer.wordpress.org/themes/features/menus/〉〈2026〉]。

概念是什麼誰決定
選單(Menu)頁面、分類、自訂連結的集合,內容容器你自己建立
選單位置(Menu Location)主題預留的顯示區,例如主選單、頁腳佈景主題
顯示行為(桌機/手機)水平列、漢堡選單、展開層數佈景主題

這個容器與位置的觀念之所以關鍵,是因為它直接決定了「選單設定了卻沒出現」這類新手最高頻的卡關能否被解掉。常見的選單位置有五種:主選單(Primary,網站最上方)、次選單(Secondary,主選單上下的小列)、頁腳選單(Footer,底部)、側邊欄選單(透過側邊欄與頁腳的小工具設定)、手機版選單(Mobile,漢堡圖示)。你能用幾個、叫什麼名字,完全由佈景主題決定,不同主題註冊的位置數量與命名都不同。

容器與位置的區分,也能解釋換主題為何常造成選單「整組消失」。選單資料存在資料庫,換主題後項目都還在,但「位置對應」會因為新主題註冊的位置不同而掉落。例如舊主題的「頂部選單」位置,新主題可能根本沒這個位置,於是你的選單看似消失,其實只是沒掛上去而已。對 WordPress 後台架構不熟的話,可先看後台十大核心功能詳解把基礎摸熟。

一個選單可同時指派到多個位置,這在實務上很好用。例如同一份「主要導覽」選單,同時勾選掛到主選單和手機版選單位置,桌機與手機就會顯示同一份內容,只是呈現方式不同。核心操作入口固定在「外觀 > 選單」,無論你用什麼主題,這個路徑不會變 [來源:〈WordPress Theme Handbook — Navigation Menus〉〈https://developer.wordpress.org/themes/features/menus/〉〈2026〉]。

值得補充的是「位置」這個詞在不同主題裡的歧義。有些主題把位置直接命名為「Primary Menu」「Top Bar Menu」「Footer Menu」,名稱清楚;有些主題則用編號或代號(例如 Menu 1、Main、Header),名稱與你想像的擺放位置未必對應。判斷方法很直接:在「外觀 > 選單」底部看到幾個勾選框,就代表主題註冊了幾個位置,勾哪個、前台哪個區塊就顯示這份選單。勾錯位置是新手僅次於「沒勾位置」的第二常見錯誤,症狀是選單有出現,只是出現在你預期之外的地方。

另外要區分「選單位置」與「小工具區」這兩個常被混用的概念。選單位置只能放選單,由主題直接註冊並在範本中輸出;小工具區則是更通用的容器,可放選單、文字、圖片、自訂 HTML 等任何小工具。側邊欄與頁腳的導覽,很多主題是透過「導覽選單」小工具掛到小工具區來呈現,未必會走獨立的選單位置。當你在「外觀 > 選單」底部找不到對應的勾選框,多半就代表那個區域要用小工具來掛,得改去「外觀 > 小工具」處理。

從空白到前台顯示的新增流程

到「外觀 > 選單」建立選單、把頁面加進去、勾選顯示位置、儲存,再回前台檢查,整個流程五個動作就完成。最容易漏掉的是第四步「勾選顯示位置」,新手十個有九個在這裡卡住,以為加完項目就會自動出現。

  1. 在「外觀 > 選單」輸入選單名稱,按「建立選單」。這個名稱只是給你自己辨識用的,不會顯示在前台。
  2. 回到左側欄勾選要加入的頁面,找不到就切到「檢視全部」或用搜尋框,再按「加到選單」。還沒建頁面的話先去認識文章與頁面的用途差異,把基礎靜態頁生出來。
  3. 排順序與分層都在中間區域用拖放完成:上下拖是排序,左右拖是做父子層級。
  4. 關鍵的第四步是拉到最底部的「選單設定」,勾選要掛的顯示位置(例如「主要選單」)。新手最常在這裡斷掉,以為加完項目就結束。
  5. 按「儲存選單」,回前台重新整理確認有出現;沒出現多半是這一步沒按,或前台還卡著快取。

為什麼第四步會被集體略過?關鍵在介面設計:勾選框被放在頁面最底部,而前面三步的所有操作都集中在畫面中央,多數人在中間區域做完拖放就直覺地以為完成,根本沒捲到底。理解這一點,排查「選單沒出現」時就能少走冤枉路,先檢查底部勾選狀態,而不是懷疑前面的步驟做錯。

如果你建的是公司形象官網或部落格,主選單通常會放幾個核心頁面:關於我們、服務項目、聯絡我們、部落格。這些頁面要先在後台建好,才能在選單編輯頁勾選加入。對架站全流程還不熟的,可參考零基礎 WordPress 架站攻略,把主機、主題、頁面、選單的順序串起來;如果連網站都還沒有,沒有網站要怎麼開始做 SEO也是先從架站這一步談起。

步驟動作最常出錯的點
1建立選單名稱填了沒按建立
2加頁面/分類找不到項目,沒切檢視全部
3拖放排序分層上下跟左右搞混
4勾顯示位置整步驟被略過(頭號元兇)
5儲存+前台檢查忘了按儲存,或沒清快取

說到底,第五步的「前台檢查」也要做對。按了儲存之後,回前台要按 Ctrl+F5(Mac 是 Cmd+Shift+R)強制重新整理,因為瀏覽器有快取,舊畫面可能還卡著。如果你的網站還裝了網站加速快取外掛推薦裡介紹的快取工具,記得連網站快取一起清,否則你改了選單、前台還是顯示舊的,會誤以為設定失敗。

除了標準的五步流程,還有兩個會干擾判斷的細節。第一個是「顯示選項」(Screen Options)分頁,它在選單編輯頁的右上角。預設情況下,左側欄只露出頁面、文章、分類這幾個來源,要加入自訂文章類型(Custom Post Type)、標籤、或勾「連結目標」「CSS 類別」「連結關係(XFN)」「描述」這些進階欄位,都得先在顯示選項裡把它們打開。很多人找不到「在新分頁開啟連結」這個勾選框,原因就是顯示選項裡的「連結目標」沒勾開。第二個細節是「自動加入新頂層頁面」這個選項,勾起來後,日後你在後台新增的頂層頁面(沒有設父層的頁面)會自動加進這份選單,適合長期維護內容固定的網站;但若你的選單結構講究順序與分層,這個自動功能反而會打亂佈局,建議關掉手動管理。

多層選單怎麼做:拖放的父子邏輯與層數上限

在選單編輯區把項目「往右拖」就會變成上一層的子項目,往左拖則升回上一層。上下拖是排序,左右拖是設定父子關係。技術上 WordPress 後台不硬性限制層數,但實務上建議壓在兩到三層以內,因為手機版漢堡選單通常只自動展開一到兩層,層數太多在手機上根本點不到深層內容。

這裡要特別提醒一個容易誤解的地方:後台允許你縮排很多層,不等於前台會全部顯示。顯示成幾層由佈景主題與手機版選單行為決定,多數主題只自動顯示到第二層下拉,第三層以後可能要 hover 才出現,或根本被主題吃掉。層級的正式命名是:第一層叫 top-level,縮排進去的就是 sub-menu [來源:〈WordPress Theme Handbook — Navigation Menus〉〈https://developer.wordpress.org/themes/features/menus/〉〈2026〉]。

桌機上 hover 展開雖然漂亮,但要分清「縮排」與「顯示」是兩件事:後台允許的層數,不等於前台會自動展開的層數。真正需要 Mega Menu(多欄展開的大型選單)時,得裝外掛或用支援的主題,標準的拖放分層做不出多欄面板。

多層選單最常見的失敗模式,往往出在設計階段只盯著桌機。後台允許縮排很多層,桌機上 hover 展開也確實漂亮,但這忽略了流量結構這個變數。根據 Statista 的全球網路流量統計,2026 年第一季行動裝置(不含平板)占全球網站流量的 52.27%,已超過桌機 [來源:〈Statista — Share of mobile web traffic worldwide quarterly 2015-2026〉〈https://www.statista.com/statistics/277125/share-of-website-traffic-coming-from-mobile-devices/〉〈2026-04-28〉]。當過半訪客用手機看,而多數主題的手機漢堡選單只自動展開一到兩層,第三層以後的內容等於對主要流量隱形。較穩當的做法是把選單預設壓在兩層,真的需要分類很細的內容才用 Mega Menu 外掛處理,這個取捨背後是裝置比例的硬限制,屬於工程問題而非品味問題。

如果你的導覽結構真的複雜,例如電商網站有大量商品分類,建議直接用 Max Mega Menu、UberMenu 這類外掛做大型多層導覽,它們能在下拉區做成多欄、圖文、甚至分組的展開面板。選外掛前可先看WordPress 必裝外掛推薦清單安裝 WordPress 外掛的三種方式,了解安裝與評估流程。做電商的話,電商網站佈景主題推薦裡也有不少主題本身就內建 Mega Menu。

分層時還有一個常被忽略的判斷點:父子層級在桌機與手機的觸發方式完全不同。桌機的下拉子選單靠滑鼠 hover 觸發,所以第二層放個三五項都還算好用;手機的漢堡選單靠點擊展開,每多一層訪客就多一次點擊,超過兩層之後完成點擊的比例會明顯下降。實務上的取捨是:把「需要被點到」的關鍵頁面全部壓在兩層以內,「分類很細但點閱率低」的長尾內容則改交給站內搜尋、分類頁、或頁面內的次選單,避免硬塞進第三層。如果你發現某個第二層底下還要再分十幾項,那通常是選單結構本身該重新設計的訊號,加第三層多半治標不治本。

五種常見的選單位置

常見位置有五種:主選單(網站上方)、次選單(主選單上方或下方的小列)、頁腳選單(底部)、側邊欄選單(透過小工具)、手機版選單(漢堡圖示)。這五個位置你能用幾個、叫什麼名字,完全由佈景主題決定,不是你想放哪就能放哪。

位置常見用途設定方式
主選單(Primary)最重要的導覽,放核心頁面外觀 > 選單勾選
次選單(Secondary)聯絡、登入、社群等次要功能外觀 > 選單勾選(主題有提供才有)
頁腳選單(Footer)隱私權政策、服務條款、網站地圖外觀 > 選單勾選,或小工具
側邊欄選單部落格分類、輔助導覽外觀 > 小工具的導覽選單小工具
手機版選單(Mobile)手機版漢堡圖示展開主題自動生成,部分需獨立指派

主選單是訪客最主要使用的導覽,放最重要的頁面,通常在網站最上方。次選單常放聯絡、會員登入、社群連結這類次要功能,但不是每個主題都有這個位置;要把登入入口放這裡的話,記得登入後的權限分層要先規劃好,才不會讓一般訪客點進會員專區。頁腳選單放隱私權政策、服務條款、網站地圖等底部連結,這些頁面對 SEO 與法規遵循都很重要,可搭配網站 Sitemap 與導覽規劃一起想清楚,整體導覽結構則可對照SEO 完整操作手冊裡的網站架構章節檢視。選單上線後想追蹤每個頁面有沒有被收錄,可順手完成Google Search Console 的安裝設定,看清索引與曝光狀況。

側邊欄選單比較特別,它不是直接在「外觀 > 選單」設定,而是透過「外觀 > 小工具」裡的「導覽選單」小工具掛上去。流程是:先在選單頁建好一份選單,再到小工具頁把「導覽選單」小工具拖到側邊欄區,然後指定要用哪份選單。對小工具機制不熟的,側邊欄與頁腳小工具教學有完整流程。想讓側邊欄選單固定在畫面上不捲動的,可參考部落格主機與主題設計指南裡的側邊欄配置做法。

手機版選單是另一套邏輯。桌機的水平選單在手機上塞不下,主題會自動轉成漢堡圖示(三條線)點擊展開。同一份選單資料,兩種顯示方式。問題是,部分主題的手機選單是獨立位置,要單獨指派,部分主題則自動沿用主選單。這也是手機版選單常常不出來的原因之一,後面會專門講排查。

選主題時,位置數量是重要考量。有些極簡主題只給一個主選單位置,想做頁腳選單或次選單就只能靠小工具硬掛。如果你預期網站會長大、導覽會變複雜,一開始就選位置夠多的主題會省很多事。推薦的 WordPress 佈景主題清單免費部落格佈景主題推薦有不同類型的主題可挑,安裝方式看安裝 WordPress 佈景主題的方法

把頁面、文章、分類、自訂連結放進選單的差別

選單能放四種來源:頁面放靜態內容、文章放單篇重點文章、分類放整類文章的列表頁、自訂連結放外部網址或站內任意網址。多數導覽以頁面和分類為主,自訂連結用在社群、外部資源或手動指定網址。四種來源的加入方式都一樣:在選單編輯頁左側欄勾選,按加到選單。

來源什麼時候用特性
頁面關於我們、服務項目、聯絡我們等固定頁靜態、不常更新,主選單主力
分類部落格或內容站的內容分類點進去顯示該分類所有文章,隨新文章自動更新
文章特別想曝光的單篇,如最新消息、活動少用,只放重點單篇
自訂連結社群連結、外部資源、站內錨點手動填網址與連結文字,可設開新分頁

頁面是主選單的主力。你建好的「關於我們」「服務項目」「聯絡我們」這類靜態頁,內容固定、不常更新,最適合放在主選單讓訪客一眼看到。頁面與文章的差別在於:頁面是靜態的、不屬於時間軸,文章則會出現在部落格列表裡、有發佈日期。對這兩者還分不清的,前面提過的文章與頁面差異教學講得很清楚;如果是電商網站要把商品頁放進選單,可先看WooCommerce 購物網站架設流程把商品頁建好。

分類是內容站的靈魂。把分類加進選單後,點下去會顯示該分類下所有文章的列表頁,而且會隨你發新文章自動更新。這對部落格或常更新內容的網站超好用,不用每發一篇就改選單。想讓分類有固定排序的,可參考文章與商品分類的排序教學。文章本身少放進主選單,除非是某篇特別想曝光的重點內容,例如年度活動公告、限量促銷。發文章的流程看WordPress 文章發佈與分類標籤流程

自訂連結是彈性最大的來源。你手動填一個網址加連結文字,就能把任何連結放進選單,無論是站外的社群粉絲頁、外部合作網站,還是站內某個特定網址。展開項目後還能勾「在新分頁開啟連結」(Open link in a new tab),這對外部連結特別實用,訪客點了不會離開你的網站 [來源:〈WordPress Theme Handbook — Navigation Menus〉〈https://developer.wordpress.org/themes/features/menus/〉〈2026〉]。

找不到想加入的項目時,點左側欄的「檢視全部」分頁,或直接用搜尋框打關鍵字找。頁面一多,預設只顯示最近幾個,切到檢視全部才看得到完整清單。加完項目記得按「加到選單」,很多人勾一勾就以為加進去了,其實沒按按鈕。

選擇四種來源時,有一個實用的判斷準則:問自己「這個連結會不會自動更新」。分類連結會自動把新文章納入列表,所以分類放進選單後幾乎不用維護;自訂連結與頁面連結指向固定網址,一旦目標頁刪除或網址改了,選單就會出現斷裂連結。網站規模一變大,斷裂連結的累積速度比你想像的快,定期用Google Search Console 的覆蓋範圍報告,或用外掛掃描站內連結狀態,能及早抓到選單裡的死連結。原則上,能用分類就不要用手動自訂連結去指向同一個分類頁,因為分類連結會跟著內容成長,自訂連結則容易在維護時被遺漏而變成死連結。

手機版選單與桌機的差異,以及沒顯示時的排查

手機版選單是佈景主題另行設計的,通常是漢堡圖示展開,跟桌機的水平選單是兩套顯示邏輯。若手機看不到,多半是主題的手機選單位置沒被指派、或快取沒更新,問題通常不在選單設定本身。桌機看得到、手機看不到,是新手回報頻率最高的問題之一。

  1. 確認選單已指派到正確位置,包含手機版專屬位置(如果主題有的話)。
  2. 清網站快取:到快取外掛或主機面板清一次。
  3. 清瀏覽器快取:手機瀏覽器強制重新整理,或用無痕模式測試。
  4. 檢查主題的手機選單設定:有些主題要在自訂器裡開啟手機選單開關。
  5. 若主題完全沒有手機選單功能,換主題或裝 Mega Menu 類外掛補上。

桌機水平選單與手機漢堡選單,用的是同一份選單資料,兩種顯示方式。所以你在「外觀 > 選單」改了項目,桌機手機會同步更新。但手機版的展開層數跟桌機不同,手機通常只展開一到兩層,你在桌機做的第三層子選單,手機上可能點不到。這是 RWD 響應式設計的取捨,可看響應式網頁設計 RWD 基礎了解背後邏輯。

排查手機選單不出來,有個快速判斷法:用桌機瀏覽器把視窗縮到手機寬度(或按 F12 開開發者工具切手機模式),看看漢堡圖示有沒有出現。如果連漢堡圖示都沒有,問題在主題沒有手機選單功能或沒開啟;如果有漢堡圖示但點下去是空的,問題在選單沒掛到手機位置或快取擋住。

手機選單排查裡,快取是最容易被忽略卻最高頻的干擾因素。改了選單、按了儲存,但網站裝了快取外掛,前台還在吐舊的 HTML,於是判斷成設定沒生效。較穩當的排查順序是:改完選單先清一次網站快取,再用手機無痕模式確認,避免把快取造成的「假性故障」誤判為設定錯誤。多數快取外掛都有一鍵清除快取的按鈕,挑選時也可比較SEO 外掛與快取的搭配

手機選單的設計之所以要獨立對待,背後是流量結構使然。根據 Statista 的全球網路流量統計,2026 年第一季行動裝置(不含平板)占全球網站流量的 52.27%,已超過桌機 [來源:〈Statista — Share of mobile web traffic worldwide quarterly 2015-2026〉〈https://www.statista.com/statistics/277125/share-of-website-traffic-coming-from-mobile-devices/〉〈2026-04-28〉]。超過半數訪客用手機看你的網站,手機選單壞掉等於對過半流量關門。Google 也早在 2020 年就宣布走向行動優先索引(mobile-first indexing),2023 年 10 月宣告這個轉換已完成,所有可在手機運作的網站都改由手機版檢索器為主進行爬取 [來源:〈Google Search Central Blog (developers.google.com)〉〈https://developers.google.com/search/blog/2023/10/mobile-first-is-here〉〈2023-10-31〉]。換句話說,Google 看到的你的網站,基本上就是手機版;手機選單的結構、展開層數、連結可點擊性,直接影響搜尋引擎能爬到多少頁面。桌機選單做得再漂亮,手機選單點不到深層頁面,那些頁面在索引與排名上就會吃虧。

換佈景主題、改頁面編輯器,選單會怎樣?

選單資料本身不會因為換主題而消失,它存在資料庫,項目與結構都還在。但「位置對應」會因為新主題註冊的位置不同而掉落,需要重新指派。換主題後第一件事,就是回「外觀 > 選單」把選單重新掛到新主題的位置上。

新主題註冊的位置數量與名稱若跟舊主題不同,舊的位置對應會失效。例如舊主題有「頂部選單」,新主題改成「主要選單」,你原本掛在頂部選單的選單就會掉下來,變成「未指派」狀態。資料沒不見,只是沒掛上去。這也回到容器與位置要分開理解的根本觀念。

主題類型頁首選單設定位置位置對應邏輯
傳統主題(Astra、官方預設)外觀 > 選單勾選顯示位置
Elementor Theme Builder 主題Elementor 頁首範本內由範本拉取選單
Divi 主題Divi 主題設定/範本範本接管頁首
Bricks Builder 主題Bricks 範本編輯器範本拉取選單

用 Elementor Theme Builder、Bricks、Divi 這類頁面編輯器為核心的主題時,頁首選單常由編輯器的頁首範本(Template)接管,設定不在「外觀 > 選單」,而在編輯器裡拉取你要的選單。選單資料還是在「外觀 > 選單」建,但顯示控制權交給了範本。用 Elementor 的可看Elementor 頁面編輯器入門Elementor Pro 頁首頁尾與導覽設計,進階功能看Elementor Pro 與 Theme Builder 功能

用 Divi 的話,Divi 頁首與導覽套版設計有頁首範本的完整做法。想把不同編輯器拿來比較的,WordPress 頁面編輯器比較整理了主流選項的差異。傳統主題如 Astra 走的還是「外觀 > 選單」勾選流程,Astra 的設定可看Astra 免費主題完整教學Astra Pro 主題進階設定指南

這也是為什麼選主題要慎選。換主題的成本不只是重新指派選單,還包括小工具位置、自訂器設定、頁首頁尾版面全部要重來。如果網站已經上線有流量,換主題前最好先備份,網站備份與還原的流程要先熟。Gutenberg 區塊編輯器用戶可參考Gutenberg 區塊編輯器擴充外掛,了解區塊編輯與選單的搭配。

區塊主題與傳統選單:Site Editor 時代的選單做法

WordPress 從 5.9 起正式支援完整站點編輯(Full Site Editing,FSE),區塊主題(Block Theme)逐漸成為新建網站的主流選擇。區塊主題的導覽做法跟傳統主題不同:它不用「外觀 > 選單」的勾選位置機制,改用「Navigation 區塊」直接在 Site Editor(網站編輯器)裡組裝導覽。選單資料仍然存在資料庫,但管理介面從傳統的選單頁,搬到了區塊編輯器裡的導覽區塊。

在區塊主題下,新增選單的流程是:進「外觀 > 編輯器」,打開 Header 範本區段,加入或點選既有的 Navigation 區塊,然後用「加入項目」把頁面、分類、自訂連結加進去。Navigation 區塊支援子層、排序、開新分頁等基本功能,也能透過區塊工具列調整版面。傳統主題那套「建選單再勾位置」的流程,在這裡被簡化成「直接在頁首範本裡組導覽」,位置對應的概念被範本區段取代。

面向傳統主題區塊主題(FSE)
設定入口外觀 > 選單外觀 > 編輯器(Site Editor)
位置管理勾選主題註冊的選單位置由頁首範本的 Navigation 區塊決定
多層結構拖放縮排區塊內縮排子層
換主題影響位置對應掉落,要重掛範本與區塊結構可能整組重來
與小工具整合導覽選單小工具改用 Navigation 區塊放在任意區段

兩套機制目前並存,傳統「外觀 > 選單」頁面在區塊主題下仍可使用,作為向下相容的橋樑。差別在於:用傳統選單頁建的選單,要被 Navigation 區塊引用才會顯示;而在 Navigation 區塊裡直接組的導覽,則是獨立存在於該區塊。這也是為什麼有人換到區塊主題後,發現選單頁面裡的設定好像「沒作用」,其實是顯示權交給了 Site Editor 的 Navigation 區塊。判斷你的網站屬於哪一套,最快的方法是看「外觀」選單裡有沒有「編輯器」這個項目,有就是區塊主題導向,沒有就還在傳統主題流程。

選單結構與 SEO:選單不只是導覽,也是站內連結地圖

選單在 SEO 上的角色,常被新手低估。它對訪客是導覽工具,對搜尋引擎則是全站最顯眼的站內連結地圖。Googlebot 從首頁開始爬,主選單上的每一個連結都是高權重的內部連結,決定了哪些頁面被快速發現、被分配多少爬取預算與連結權重。換句話說,放進主選單的頁面,等於被你在站內標記為「重要」,搜尋引擎會跟著這個訊號走。

這帶出幾個具體的 SEO 判斷準則。主選單的項目數量要克制,常見的建議是把核心導覽壓在七項以內,次選單與頁腳選單再放次要內容,否則每個連結分到的權重會被分散,訪客也難以聚焦。選單的連結文字(錨點文字)要帶語意,「關於我們」「服務項目」這類描述性文字比「了解更多」「點這裡」對搜尋引擎友善,因為它告訴搜尋引擎目標頁的主題;把分類放進選單等於幫分類列表頁爭取一條高權重內部連結,有利索引與排名。至於連結屬性,站內選單連結預設是 dofollow、會傳遞權重,這對站內頁面是好事,只有指向外部網站的連結才需要考慮是否設 nofollow 或開新分頁。

WordPress 作為市占最高的內容管理系統,根據 W3Techs 的調查,被 59.2% 已知 CMS 的網站採用,占全部網站的 41.5% [來源:〈W3Techs — Usage Statistics and Market Share of WordPress〉〈https://w3techs.com/technologies/details/cm-wordpress〉〈2026-06-29〉]。這意味著 WordPress 的選單機制與 SEO 表現,直接影響全網過四成網站的導覽與索引。在這個量級下,選單結構設計得好不好,累積的差距會非常可觀。把分類頁放進主選單,等於給內容列表頁一條穩定的高權重內部連結路徑,這對部落格或內容站尤其關鍵,能加快新文章被索引的速度。整體導覽與網站架構的 SEO 思維,可對照SEO 友善的網站架構規劃SEO 完整操作手冊一起檢視。

一個常被問到的問題是:選單連結出現在每一頁的頁首,會不會被算成重複內容或過度優化。實務上,搜尋引擎理解頁首導覽是網站的全站元素,不會因為同樣的連結出現在多頁就當成問題。真正要避免的是:在選單裡塞入大量精確匹配關鍵字的錨點文字、或重複連到同一個頁面好幾次,這類操作才會被視為過度優化。選單該回歸它本來的用途:幫訪客導覽、把權重導向你要強調的頁面,把它當成關鍵字塞場只會適得其反。

選單的無障礙與可用性:鍵盤導覽與 ARIA

選單的可用性不只是視覺問題,還包括鍵盤導覽與螢幕閱讀器的可讀性,這塊在中文圈常被忽略。一個設計良好的選單,應該讓只用鍵盤(Tab、Enter、方向鍵)的訪客也能完整操作,並讓螢幕閱讀器正確朗讀每個連結的用途。這不只關乎法規遵循,也關乎 SEO 與轉換:搜尋引擎與身心障礙訪客都依賴結構化的 HTML,無障礙做得好的網站在使用者體驗指標上通常也較佳。

WordPress 核心與多數主流主題,輸出選單時會自動加上基本的 ARIA 屬性(例如 navigation 角色、aria-label),符合相當程度的無障礙要求。但主題之間差異很大:品質好的主題會把下拉子選單的展開狀態、鍵盤焦點、aria-expanded 屬性都處理好,活躍頁面也用 aria-current 標記;品質差的主題可能只靠 CSS hover 觸發子選單,鍵盤訪客根本進不去第二層。顏色對比、連結文字語意這些細節,同樣會被好主題一併顧到。選主題時最快的無障礙體檢,就是用 Tab 鍵走一遍主選單,看焦點能不能正確依序進到子選單項目。

選單的連結文字與無障礙、SEO 三者其實指向同一件事:用描述性、有語意的文字當錨點。對螢幕閱讀器使用者,「關於我們」比「點這裡」清楚;對搜尋引擎,「關於我們」也比「點這裡」能傳達目標頁主題。把這個原則貫徹到選單設計,等於同時照顧了可用性、無障礙與搜尋排名,是一舉多得的基本功。

選單設計決策矩陣:什麼情況用什麼做法

面對不同的網站類型與內容規模,選單的做法不該一體適用。把「內容複雜度」與「訪客裝置比例」兩個關鍵變數交叉,就能判斷該採用哪種選單策略。內容複雜度看你的頁面與分類數量,訪客裝置比例看你的流量是偏桌機還是手機。

訪客偏桌機訪客偏手機(過半)
內容單純(十頁內)傳統單層主選單即可,重點放排序與連結文字主選單壓單層,漢堡選單務必測試展開
內容中等(十到五十頁)主選單兩層,關鍵分類放第二層主選單壓兩層,深層內容改用分類頁或站內搜尋
內容複雜(五十頁以上/多分類)考慮 Mega Menu,多欄分組展開Mega Menu 或外掛輔助,手機版獨立優化展開邏輯

這個矩陣的核心訊息是:手機流量占比愈高,愈要把選單層數壓低。因為手機漢堡選單每多一層就多一次點擊,深層內容在手機上曝光率會驟降。如果你的網站已經有流量數據,先到分析工具看裝置比例,再決定選單層數與結構,會比憑感覺設計準確得多。沒有數據的新站,可先用兩層主選單起步,等流量進來再依實際點擊行為調整。

以這類內容站或中小型官網的典型狀況為例,把矩陣實際套一次會更具體。依這類站的典型表現幅度,月流量落在約 1 萬到 5 萬的工作階段、頁面總數約 30 到 80 頁、行動裝置占比約 55% 到 70%,是相當常見的組合。這組數字對照矩陣會落在「內容中等、訪客偏手機」那一格,對應做法是把主選單壓在兩層,關鍵分類放第二層,深層長尾內容改交給分類頁與站內搜尋。實務上常見的取捨點在第二層要不要再開第三層:若某個分類底下的內容超過約 15 到 20 篇,硬塞第三層會讓手機訪客點不到,這時把該分類獨立成一個分類列表頁放進第二層、點進去再細分,通常比加深層更可行。要誠實提醒的限制是:上述比例來自這類站的典型區間,每個網站的實際流量結構差異很大,裝置占比、點閱率分布都會被產業屬性與受眾影響(例如 B2B 工業類網站的桌機占比常明顯高於一般內容站),所以這組區間只能當設計起點,無法取代你自己網站的分析數據;決策角度上,先確認「需要被點到的關鍵頁面」全部都在兩層以內,才是影響導覽效率與索引覆蓋的主要變數,第三層的呈現方式屬次要問題。

選單設定前後檢查清單

把前面的觀念整理成一份可逐項打勾的清單,無論你是新建選單還是排查問題,都可以照著走一遍,避免漏掉常見的坑。這份清單分「設定前」「設定中」「上線後」三階段,每個階段都有對應的檢查點。

設定前的準備

  • 確認你要放進選單的頁面、分類都已在後台建好。
  • 盤點主題提供幾個選單位置,到「外觀 > 選單」底部看勾選框數量。
  • 規劃好主選單的項目順序與層數,建議桌機兩到三層為上限。
  • 決定哪些內容走分類(自動更新)、哪些走自訂連結(手動維護)。

設定中的檢查

  • 建好選單名稱後,記得按「建立選單」按鈕。
  • 左側欄找不到項目時,切「檢視全部」或用搜尋框。
  • 勾選項目後,記得按「加到選單」按鈕(最常被漏)。
  • 拖放時分清楚上下拖(排序)與左右拖(父子層)。
  • 底部「選單設定」務必勾選要掛的顯示位置(頭號檢查點)。
  • 外部連結展開項目,勾「在新分頁開啟連結」。
  • 按「儲存選單」。

上線後的驗證

  • 清網站快取(快取外掛或主機面板)。
  • 桌機前台按 Ctrl+F5(Mac 是 Cmd+Shift+R)強制重新整理。
  • 手機用無痕模式開網站,確認漢堡選單與展開層數正常。
  • 用 Tab 鍵走一遍主選單,確認鍵盤可導覽到子選單。
  • 逐層點進每個選單項目,確認沒有斷裂連結或 404。
  • 到 Google Search Console 確認重要頁面有被索引。

容易踩雷的錯誤與幾個實用進階技巧

最常見的三個錯誤是:忘了勾顯示位置、忘了按儲存、前台被快取擋住。進階則可善用「在新分頁開啟連結」「自訂連結做頁內錨點」「CSS 類別隱藏特定項目」,以及用 Mega Menu 外掛做大型多層導覽。這些技巧不難,但能解掉很多看起來很玄的問題。

  • 沒勾顯示位置:頭號錯誤,建了選單卻沒掛到任何位置。
  • 沒按儲存選單:改完直接關頁面,設定沒寫入。
  • 快取沒清:前台顯示舊畫面,誤以為設定失敗。
  • 位置名稱對不上:主題的位置名稱跟你預期不同,掛錯位置。

開新分頁是常用技巧。展開任一個選單項目,會看到「在新分頁開啟連結」的勾選框,勾起來後這個連結就會在新分頁開啟,訪客不會離開你的網站。這對外部連結(社群、合作網站、外部資源)特別實用。自訂連結項目也支援這個功能 [來源:〈WordPress Theme Handbook — Navigation Menus〉〈https://developer.wordpress.org/themes/features/menus/〉〈2026〉]。

頁內錨點是把自訂連結的網址填成 #id,例如 #pricing,做出「點選單就跳到同頁某個段落」的效果。這對單頁式網站或長篇銷售頁很好用。要先在目標段落的那個區塊設定一個 CSS id(HTML 錨點),再把選單連結指向那個 id。想更深入了解錨點與目錄的,可看文章目錄自動生成與側邊欄固定

隱藏特定項目有兩種做法。第一種是直接刪除,展開項目點「移除」就好。第二種是暫時隱藏但保留設定:給項目一個 CSS 類別(在項目的「CSS 類別」欄位填,若看不到要先在右上「顯示選項」開啟),再用SEO 友善的網站架構規劃裡提到的自訂 CSS,用 display:none 控制何時顯示。第二種適合促銷期間臨時加掛、活動結束就隱藏的情境。

大型導覽需求就靠 Mega Menu 外掛。Max Mega Menu、UberMenu 這類外掛能把下拉選單做成多欄、分組、甚至帶圖文的展開面板,適合商品分類很多的大型電商或內容站。選用前先評估是否真的需要,因為這類外掛會增加載入負擔,搭配圖片壓縮與延遲載入設定與快取優化才能維持速度。裝外掛的方法前面已介紹過;若想直接選用內建 Mega Menu 的電商主題,可參考WooCommerce 電商主題推薦

進階應用裡,選單還能結合會員機制做動態顯示。例如登入前顯示「登入」,登入後顯示「會員專區」「登出」,這要靠外掛或依登入狀態切換的會員導覽選單介紹的做法。會員權限控管可參考使用者角色與權限控管會員權限與瀏覽範圍管理,登入頁美化看登入頁面美化與品牌形象,登入安全看登入網址隱藏與安全強化

網站置頂的通知列也能搭配選單使用,例如把促銷訊息放通知列、導覽放主選單,分工清楚,可看網站置頂通知列與推播橫幅。聯絡管道則可把聯絡表單頁放進主選單,表單製作看聯絡表單製作教學,表單外掛比較看聯絡與功能表單外掛比較

選單故障排查矩陣:症狀對照原因與修法

排查選單問題最有效率的方式,是先鎖定症狀再反推原因。選單的故障表現其實有限,症狀一旦對應上原因,多半能在十分鐘內解掉。整理一份症狀導向的排查矩陣,把最常回報的問題、背後原因、與第一步該做什麼對齊,遇到狀況時直接照表操作。

症狀最可能的原因第一步修法
前台完全沒出現選單沒勾顯示位置回「外觀 > 選單」底部勾位置並儲存
選單出現,但位置不對勾錯顯示位置核對主題的位置命名,重新勾到正確位置
桌機正常、手機看不到手機位置未指派或快取未清指派手機位置,清網站與手機瀏覽器快取
改了項目前台沒變網站快取擋住清快取外掛與主機面板快取,前台強制重新整理
第二層以後點不到主題只展開一到兩層壓低層數,或改用 Mega Menu 外掛
換主題後選單消失位置對應失效回選單頁重新掛到新主題的位置
子選單鍵盤進不去主題只靠滑鼠 hover 觸發換無障礙支援較好的主題,或用外掛補鍵盤觸發
外部連結把訪客帶離網站沒勾開新分頁展開項目勾「在新分頁開啟連結」
選單項目變多後排序亂掉開啟了「自動加入新頂層頁面」關閉自動加入,改手動維護順序與分層

這份矩陣有兩個使用要訣。第一,先排除快取再懷疑設定。快取造成的「假性故障」占比極高,清完快取若問題仍在,才回頭檢查設定,能省下大量誤判時間。第二,症狀若同時符合多個原因,從「最常見」那欄開始試。例如桌機正常、手機看不到,先試指派手機位置,再試清快取,最後才考慮主題本身沒有手機選單功能。逐項排除比一次動多個變數更容易鎖定真兇。

換主題或更新主題後出問題,是另一個高頻場景。建議的標準動作是:更新或換主題前先備份,更新後立刻到「外觀 > 選單」逐個位置核對勾選狀態,再分別用桌機與手機無痕模式檢查前台。主題更新有時會改動註冊的位置名稱或數量,原本掛好的選單會被歸類成「未指派」,核對這一步通常就能還原。對網站更新流程不熟的,可先把網站備份與還原的步驟練熟,降低更新踩雷的風險。

主選單項目排序與分組的最佳實踐

選單的排序與分組,直接影響訪客能不能快速找到要找的頁面,也影響你引導訪客走完轉換路徑的效率。排序的通用原則是「依使用頻率與重要性遞減」:最常用、最重要的頁面放最左邊,因為多數語言的閱讀起點在左側,左邊的項目獲得第一眼注意力與第一下點擊的比例最高。次要頁面往右放,聯絡或行動呼籲類的項目可考慮放最右側收尾,形成自然的動線。

分組則是把同性質的頁面收進同一個第二層。例如「服務項目」底下展開「諮詢」「設計」「維護」三項,比把三項散落在主選單頂層更清爽,也讓訪客一眼看出服務的結構。分組的判斷準則是:當頂層項目超過七個,或出現性質相近的頁面時,就該收進第二層。反過來,若某個第二層底下只有一個項目,分組就失去意義,直接拉回頂層更清楚。

排序與分組的原則要落實,最好有一套可重複套用的判斷工具,避免每次憑直覺決定。這裡提出一個「菜單席位評分卡」,把一個頁面該不該放進主選單,拆成三個可量化維度,每項 0 到 2 分,總分 0 到 6 分。這套評分卡的核心,是把「這頁對我重要」這種主觀感覺,轉成「這頁對訪客與搜尋引擎多容易抵達」的客觀依據。

維度0 分1 分2 分
商業/轉換價值純資訊、無轉換目的輔助頁(常見問題、部落格分類)直接貢獻轉換(服務、報價、諮詢)
搜尋主力程度長尾、低搜尋量有穩定搜尋量但非核心字主力關鍵字的目標頁
訪客抵達頻率少數人才需要多數訪客會路過幾乎每位訪客都該看到

用一個具體例子走一遍。假設你經營一個接案的設計工作室網站,要決定「首頁」「服務項目」「設計案例」「設計部落格」「隱私權政策」這五頁哪些進主選單。首頁三項都拿滿分共 6 分,必放頂層;服務項目商業價值 2、搜尋主力 2、抵達頻率 2,同樣 6 分放頂層;設計案例商業價值 2(有助成交)、搜尋主力 1、抵達頻率 2,共 5 分放頂層;設計部落格商業價值 1、搜尋主力 1、抵達頻率 1,共 3 分,收進服務項目下的第二層或獨立的部落格分類頁;隱私權政策三項都偏低,0 到 1 分,移到頁腳選單。這套評分卡的好處是:當團隊對「某頁要不要上主選單」有爭議時,可以對著三個維度逐項打分,把爭論收斂成可檢視的依據,勝過單純比誰的聲音大。

這裡有個常被忽略的細節:主選單的排序應該定期回頭檢視。網站經營一段時間後,重要頁面會改變、新增的服務會需要曝光、某些舊頁面會退居次要。每隔幾個月根據實際點擊數據調整排序,把點閱率高的頁面往前移、把沒人點的項目收進第二層或移除,能持續提升選單的導覽效率。若網站已接上分析工具,到行為報告看選單連結的點擊分布,是調整排序最客觀的依據。

選單與內部連結權重分配:進階 SEO 視角

從技術 SEO 的角度看,主選單是站內連結權重(link equity)分配的核心樞紐。Googlebot 從首頁出發,主選單上的每個連結都是從首頁直接傳遞權重的高品質路徑。離首頁的點擊距離愈短,頁面被發現與被分配權重的速度愈快。放進主選單的頁面,點擊距離等於一;放進第二層的頁面,點擊距離等於二。點擊距離每多一層,頁面獲得的內部權重就會遞減,被索引的優先順序也會往後挪。

這帶出一個具體的策略:把「希望排名」的頁面盡量壓在點擊距離一到二的範圍內。重要的分類列表頁、主力服務頁、轉換關鍵頁,都值得放進主選單或主選單的第二層。相反地,長尾內容、過時活動頁、點閱率低的頁面,不必硬塞進主選單,改讓它們從分類頁或相關文章連結被發現即可,把主選單的權重保留給真正需要曝光的頁面。

頁面類型建議放置位置點擊距離
核心服務頁主選單頂層1
重要分類列表頁主選單頂層或第二層1 到 2
轉換關鍵頁(報價、諮詢)主選單頂層或行動呼籲區1
長尾內容文章分類頁、相關文章、站內搜尋3 以上
法規頁(隱私權、條款)頁腳選單1(頁腳)

選單連結的錨點文字,在這個視角下有了第二層意義。它不只是給訪客看的標籤,也是告訴搜尋引擎「目標頁在講什麼」的語意訊號。描述性的錨點文字(「WordPress 架站費用」「SEO 完整操作手冊」)比通用文字(「了解更多」「這裡」)能傳遞更精確的主題訊號,有助於目標頁在相關查詢的排名。把錨點文字當成微型的標題來寫,帶上目標頁的核心語意,是免費且有效的內部 SEO 操作。

一個要平衡的點是:選單項目愈多,每個連結分到的權重愈少。這也是為什麼把主選單壓在七項以內會是相對穩當的取捨。在「曝光更多頁面」與「保留每個連結的權重」之間,存在天然的取捨。實務上的解法是分層:核心頁面放頂層搶點擊距離與權重,次要內容收進第二層或頁腳,長尾內容交給分類與站內搜尋。這樣既照顧了導覽廣度,也保住了關鍵頁面的權重集中度。整體網站架構與內部連結的進階規劃,可對照SEO 友善的網站架構規劃內部連結策略與佈局深入檢視。

選單設計的延伸需求往往隨網站規模出現。多語系網站要為每個語言建不同選單,可參考Polylang 多語系網站設定;要從 WordPress.com 搬到自架站的,WordPress.org 與.com 的差異先搞懂兩者差別。想從架站到 SEO 一次串起來的,架站攻略與WordPress 架站與 SEO 優化全攻略是完整的入口;要評估整體投入成本的話,WordPress 架站費用全面拆解可當參考。

WordPress 選單設定常見問題(FAQ)

選單設定好了,前台為什麼完全看不到?

九成是沒勾顯示位置,或主題根本沒註冊那個位置。再來依序是忘了按儲存、或前台被快取擋住。先回「外觀 > 選單」底部確認位置有勾、按了儲存,再清一次網站與瀏覽器快取,這個排查順序能解掉絕大多數案例。

桌機看得到、手機卻看不到,是同一個原因嗎?

不一定。手機版是主題另行設計的漢堡選單,部分主題的手機選單是獨立位置,要單獨指派;部分主題則自動沿用主選單。手機看不到時,除了檢查指派與快取,還要確認主題的手機選單開關是否在自訂器裡開啟。用無痕模式測試能排除快取造成的誤判。

自訂連結選單什麼時候用?

用在外部網址(社群、合作網站)、站內錨點(跳到同頁某段)、或臨時指定網址。自訂連結可勾「在新分頁開啟連結」,外部連結建議開新分頁,避免訪客離開網站。指向站內分類頁時,改用「分類」來源會比自訂連結更穩,因為分類連結會跟著內容自動更新。

選單項目怎麼刪除或暫時隱藏?

展開項目點「移除」就能刪除。想暫時隱藏但保留設定,給項目一個 CSS 類別(欄位看不到時先到右上「顯示選項」開啟),再用自訂 CSS 的 display:none 控制。促銷期間臨時加掛、活動結束就隱藏的項目,用隱藏比刪除更方便。

區塊主題跟傳統主題的選單做法差在哪?

區塊主題改用「外觀 > 編輯器」的 Navigation 區塊來組裝導覽,不再走「外觀 > 選單」的勾選位置機制。選單資料仍存在資料庫,但管理與顯示交給 Site Editor 的頁首範本。傳統選單頁在區塊主題下仍可使用作為向下相容,但顯示權由 Navigation 區塊決定,這也是有人換到區塊主題後覺得選單設定「沒作用」的原因。

相關文章