WordPress 選單設定教學:從零打造清晰的網站導覽
完整 WordPress 選單設定教學,帶你搞懂選單的三層結構觀念,學會新增選單、做多層結構、排查手機版漢堡選單,並從 SEO 與無障礙角度優化網站導覽結構。
作者:褚崇名(Sliven)
說不定你也曾點開一個網站,盯著最上方的選單找了三分鐘,還是搞不清楚「關於我們」「服務項目」「最新消息」到底哪一個才放了你想要的資訊?這種經驗每個人都遇過。把場景反過來,當訪客走進你自己的網站,他們腦袋裡也是同樣的問號。選單,就是回答這些問號的第一線,也是 WordPress 架站全攻略 在導覽設計上的核心。
選單不是把頁面排一排放上去就了事。它同時要服務兩個對象:真人訪客,以及 Google 的爬蟲程式。一份清楚的導覽結構能降低跳出率、把流量導向真正重要的頁面,也讓搜尋引擎更快理解你網站的內容架構。這篇教學會從資訊架構的思考出發,帶你用 WordPress 內建的選單系統,從零打造一份對人友善、對 SEO 也友善的網站導覽。
快速總覽:重點摘述選單設定的核心觀念
- 選單有三層結構:選單項目(item)→ 選單(menu)→ 選單位置(location)。
- 動手前先決定資訊架構,再進後台拉順序,順序顛倒會一直回頭改。
- 頂層項目控制在 5 到 7 個,下拉深度最多兩層。
- 手機版一定要實測,因為 Google 已經全面採用行動優先索引。
- 內容超過 100 個項目的電商站,要當心伺服器的一個隱藏上限。
在開始之前,先把這件事放進脈絡裡:WordPress 是目前全球使用最廣的內容管理系統,W3Techs 的長期統計(2026 年 6 月)顯示,在所有使用已知 CMS 的網站裡,WordPress 的市佔長年維持在六成以上的絕對多數。這代表全世界有極大比例的網站導覽,都是用同一套選單系統做出來的。學會它,等於把大半個網際網路的導覽邏輯打通。
選單是網站的導覽骨架,不是裝飾品
很多新手把選單當成「把所有頁面塞進去」的清單,但選單其實是整個網站的導覽骨架。它決定訪客第一眼看到什麼、決定點哪一個按鈕,也決定 Google 爬蟲從首頁出發後,怎麼用最短路徑走完你的網站。
從 SEO 角度看,選單裡的每一個連結都是一條內部連結。首頁的選單連結,會把首頁累積的權重傳遞給下層頁面。換句話說,你把哪幾個頁面放進主選單,等於在告訴 Google「這是我最重要的內容」。這也是為什麼亂塞選單會稀釋權重,把重要頁面擠到很深的位置,等於自己把它們埋掉。想把內部連結的運作邏輯摸得更透,可以先讀過內部連結是什麼:打造優質網站架構的核心技巧,會發現選單其實是全站最強的內部連結布局工具之一。
從使用體驗看,選單是使用者最常點擊的區塊,沒有之一。訪客開啟網站的前幾秒,視線幾乎都落在最上方的導覽列。選單一亂,他們就會直接跳出。跳出率一高、停留時間一短,這些行為訊號回到 Google 那裡,排名就跟著往下掉。所以選單優化表面是 UI 問題,骨子裡其實是 SEO 問題。
動手前先決定資訊架構:分類邏輯比按鈕樣式重要
很多網站一進後台就直接拉選單,拉完才發現「那這個頁面到底要放哪裡?」,結果選單越拉越亂。正確順序是反過來的:先在紙上或任何你順手的筆記軟體把資訊架構畫出來,再進 WordPress 依樣畫葫蘆。先想清楚要分幾區、每區放什麼,後台操作只是執行而已。
規劃資訊架構時,有幾個原則屢試不爽:
- 用使用者任務分類,不要用公司部門分類。訪客不在乎你內部怎麼分部,他們在乎的是能不能兩秒內找到要的服務。「行銷部」「技術部」這種分法對外完全沒意義。
- 頂層項目維持在 5 到 7 個之間。心理學有個說法是人的短期記憶大約容納七項,超過就容易讓人放棄閱讀。數字可以討論,但「越少越好」這個方向不會錯。
- 下拉深度最多兩層。主選單一層、下拉子選單一層,到此為止。再深訪客就會迷路,手機版更難點。
- 核心服務放左側,品牌資訊放右側。人的閱讀動線是由左到右,左側拿到最多注意力,把最想讓人點的放那裡。「聯絡我們」「關於我們」可以推到最右邊,甚至頁尾。
架構畫完,後續的 WordPress 操作就不會迷失。如果你還在思考網站整體結構要怎麼安排,建議把網站架構圖規劃全攻略:SEO 友善的網頁結構設計心法與實例解析先讀一遍,選單其實就是網站架構的「使用者可見版」,兩者一起規劃最省事。
我用一個具體例子示範怎麼想。假設你做的是一個室內設計公司的官網,常見的錯誤是把選單分成「設計部」「工程部」「行政部」,這對訪客毫無意義。換成使用者任務的角度,主選單應該長這樣:作品案例、服務項目、設計流程、關於我們、聯絡我們。看作品是訪客的第一個念頭,所以放最左邊;聯絡與關於放最右邊。服務項目底下可以再做一層下拉,分成「住宅設計」「商業空間」「舊屋翻新」這種依需求分類的子項,千萬別依你內部哪個設計師負責什麼來分。這個原則套到任何產業都成立:永遠從「訪客想做什麼」出發,不要從「我們公司怎麼分工」出發。
不同類型網站的選單內容該怎麼放
不同類型的網站,選單該出現的項目差很多。憑感覺亂放很容易遺漏重要項目,建議先參考底下這份對照表,把常見的項目就定位,再依自己的業務微調。我把三種最常見的站型整理出來:
| 站型 | 主選單建議項目 | 頁尾選單建議項目 |
|---|---|---|
| 企業 / 服務型官網 | 服務項目、案例作品、關於我們、部落格、聯絡我們 | 隱私權政策、服務條款、常見問題、社群連結 |
| 部落格 / 內容站 | 分類(最多 5 到 7 個主題)、關於作者、聯絡 | 分類全列表、標籤雲、訂閱、合作提案 |
| 電商 / 購物網站 | 商品分類(mega menu)、熱門商品、購物流程、會員中心 | 退換貨政策、運送說明、付款方式、客服中心 |
這份表是起點,不是死規定。重點是掌握一個原則:主選單放「訪客最想找、也最能代表你業務」的東西,頁尾放「政策性、輔助性、法律必要」的東西。電商站因為分類多,主選單幾乎一定要用 mega menu,這時更要把分類階層想清楚,不然一個塞滿一百個連結的 mega menu,對訪客和對 SEO 都是災難。如果你正要架電商站,WordPress 購物網站架設全教學:從零打造你的電商平台,購物車設定一次學會把從選主題到設購物車的流程都走過一遍,選單規劃可以搭著一起做。
認識 WordPress 選單系統的三層結構
要正確使用 WordPress 選單,得先搞懂三層結構,很多新手混淆就是卡在這裡。三個相近的名詞綁著三個不同的東西,分不清楚就會一直在錯的地方找設定。
| 層級 | 名稱 | 白話解釋 |
|---|---|---|
| 最底層 | 選單項目(Menu Item) | 一個連結按鈕,例如「關於我們」 |
| 中間層 | 選單(Menu) | 一整排按鈕的集合,例如「主選單」「頁尾選單」 |
| 最頂層 | 選單位置(Menu Location) | 佈景主題在版面上預留的位置,例如頁首、頁尾、手機側邊 |
關鍵在於:選單位置是佈景主題決定的,不是你決定的。主題在原始碼裡用 register_nav_menus() 這個函式宣告「我有頁首和頁尾兩個位置可以放選單」,你在後台才能把做好的選單掛上去。換句話說,換了主題,能用的位置就會跟著變。這是 WordPress 官方 Theme Handbook 明確記載的機制。
這也是為什麼有時候你做好選單,卻找不到地方放。問題通常出在你裝的主題根本沒開放那個位置,跟選單本身沒有關係。想知道主題開了哪些位置,進後台「外觀 → 選單 → 管理位置」標籤頁就能看到完整清單。如果你對整個後台還不熟,WordPress 後台操作全指南:從登入到網站設定的 10 大核心功能詳解把每個選單都走過一遍,搭配著看會更快上手。
從零建立第一個導覽選單:完整操作流程
觀念講完,來動手。第一次建立選單,照接下來這個順序最不會出錯。
- 進入後台,點左側「外觀 → 選單」(英文介面是 Appearance → Menus)。
- 在最上方的「選單名稱」輸入一個你認得的名字,例如「主選單」,按「建立選單」。
- 畫面左邊會出現幾個區塊:頁面、文章、自訂連結、分類。勾選要加入的項目,按「加入至選單」。
- 右邊的選單結構區,用滑鼠拖曳就能調整順序。往右拖一格,就變成上一層的子選單。
- 全部排好後,畫面最下方的「選單設定」,勾選要顯示這個選單的位置(例如 Primary menu),按「儲存選單」。
有兩個小細節新手常錯過。第一,左邊那幾個區塊預設只顯示「最近」的項目,點最右上角的「顯示選項」標籤,可以展開更多篩選條件,把所有頁面、所有分類都列出來。第二,如果左邊找不到「分類」這個區塊,一樣去「顯示選項」裡把它勾起來就會出現。這個「顯示選項」是 WordPress 後台一個低調但好用的開關,很多找不到的設定都藏在裡面。
子選單(下拉選單)是靠拖曳縮排做出來的。把項目往右下方拖,它就會變成上一層的子項。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 頁首設計秘訣:300+ 現成套版讓你告別手動排版有完整的視覺化頁首設計流程,想把選單做得更有質感的人一定要看。
手機版選單:漢堡選單與觸控體驗
手機版選單不是桌機版的附屬品,它是主戰場。Statista 的長期追蹤(2026 年 4 月)顯示,全球網站流量來自行動裝置的比例長年維持在六成上下。Google 也早在 2023 年底的 搜尋中心公告正式宣告,搜尋索引已全面採用行動優先(mobile-first)索引。意思是:Google 看到的、拿來排名的,是手機版的那一份網頁。
對選單來說,這代表兩件事。第一,手機版選單必須完整、必須能被爬蟲正確讀取。有些主題的漢堡選單用純 JavaScript 動態產生連結,Google 雖然能執行 JS,但過程慢、也不保證穩定。最保險的做法是確認手機選單的連結存在於原始 HTML 裡,而不是點擊之後才生成。你可以對著手機版頁面按右鍵「檢視原始碼」,用搜尋找一個你選單裡的連結文字,找得到就過關。第二,觸控體驗要好。按鈕的點擊範圍(touch target)至少要有 44×44 像素,這是普遍的觸控友善標準。太小的按鈕在手指點的時候會誤觸隔壁項,訪客越點越火,乾脆離開。
漢堡選單(☰)是最常見的手機版樣式,點開後從側邊或上方滑出。它省空間,但代價是:選單內容預設隱藏,訪客必須主動點開才看得到。所以最關鍵的幾個連結(例如「立即購買」「聯絡我們」),建議在手機版單獨用一條固定的通知列或按鈕顯示,不要藏在漢堡裡。WordPress 網站通知列教學:製作置頂推播橫幅,有效提升 CTA 點擊率講的就是這種置頂 CTA 橫幅的做法。更廣泛的響應式觀念,可以搭配響應式網頁設計 RWD:手機版網站不漏接任何一位客戶一起看,會把整個行動版的全局拼起來。
手機版選單有幾個重複出現的犯錯模式,列在這裡給你避雷。第一是層級太深,有些站把桌機的三層選單直接搬到手機,訪客要連點三次展開才看得到目標,多半點到第二層就放棄。第二是關閉按鈕難找,漢堡選單展開後,關閉的叉叉藏在角落或根本沒有,訪客被困在選單裡回不了首頁。第三是下拉展開後的項目太小、太擠,手指根本點不到想點的那一個。這三個問題的根因都一樣:設計選單時只看桌機預覽,沒有真的拿起手機點一遍。把手機實測列進流程,這些問題會在你上線前就浮現。
進階技巧一:自訂連結、錨點、外部連結
選單不只能放內部頁面。WordPress 的「自訂連結(Custom Links)」區塊讓你放任何網址,這在幾個情境特別好用:
- 頁內錨點:把連結設成
https://你的網址/關於我們/#團隊介紹,點下去直接跳到那一頁的某個段落。長頁面很實用。 - 外部服務:把「線上預約」「會員登入」連到外部系統,例如表單工具、第三方會員平台。
- 社群連結:粉絲專頁、Instagram 等外部連結,放頁尾選單很常見。
放外部連結時有一個 SEO 細節要處理:如果你不希望把網站權重傳給外部站台(例如社群媒體這種你不需要幫它衝排名的大站),應該加上 rel="nofollow"。WordPress 後台的做法是點開畫面最右上角的「顯示選項」,勾起「進階選單屬性」裡的「連結目標」「標題屬性」「連結關係(XFN)」,每個選單項目就會多出對應欄位,在「連結關係(rel)」欄位輸入 nofollow 即可。這個欄位預設是關起來的,所以很多人根本不知道它能設。
另一個常用屬性是「在新分頁開啟」,勾起來連結就會帶 target="_blank"。外部連結我習慣都開新分頁,避免訪客一點就整個被帶離你的網站。內部連結則維持原分頁,讓他們留在站內順著流程走完。這個原則很簡單,但很多人沒意識到它對停留時間的影響。
進階技巧二:條件式選單與多語系
預設的選單對所有訪客都一樣。但有些情境你會希望選單根據條件動態變化,這時原生功能就不夠用,得搭配外掛或主題設定。
第一種情境是登入狀態。會員網站很常見的設計:未登入時選單顯示「登入」「註冊」,登入後變成「會員專區」「登出」。WordPress 原生做不到這件事,要靠外掛搭配角色判斷。背後的核心機制是「使用者角色權限」,讓選單項目依訪客是不是會員、屬於哪一種角色,來決定要不要出現。想把這套機制摸熟,WordPress 使用者權限完全指南:用 User Role Editor 精準管控每個角色的後台存取範圍是必讀的地基,搞懂角色分級,條件式選單才有支撐。
第二種情境是多語系。多語系網站的選單不能只做一組,每個語言要對應各自的頁面與翻譯。用 Polylang 這類多語系外掛時,每個語系會維護自己的選單,切換語言時連選單也跟著換,訪客看到的永遠是當前語言版本的導覽。Polylang 完整教學:從安裝到上架,零基礎也能搞定 WordPress 多語系網站從安裝到上架講得很清楚,選單設定是其中一段,做多語站之前務必先讀。
第三種情境是根據頁面顯示不同選單。例如產品頁只顯示產品相關選單,部落格只顯示文章分類。這要靠 Conditional Menu 類型的外掛,或在主題層級用程式判斷當前頁面再決定顯示哪組選單。概念跟前兩種類似,差別在觸發條件從「人」變成「頁面」。
選單的 SEO 與技術優化清單
把選單功能用熟之後,這裡有幾個我做選單時一定檢查的技術與 SEO 項目。這些是「會做選單」和「把選單做到對 SEO 真正有幫助」之間的差距,很多人停在前面那一步就收工了。
| 檢查項目 | 為什麼重要 | 怎麼做 |
|---|---|---|
| 錨點文字用關鍵字,但別堆砌 | 選單連結是全站最強的內部連結之一,錨點文字會被搜尋引擎解讀為目標頁面的主題 | 用「新娘秘書服務」這種清楚的詞,不要用「點我」「更多」 |
| 頂層不要超過 7 個 | 過多選項讓權重分散,也讓訪客難以選擇 | 合併相近分類,次要項目移到頁尾 |
| 確認連結在 HTML 裡看得到 | 純 JS 產生的連結爬蟲不容易抓到 | 檢視原始碼,確認選單連結是靜態 HTML |
| 補上無障礙屬性 | 螢幕閱讀器與搜尋引擎都會讀 aria-label | 在主題或外掛設定裡為選單加上 aria-label |
| 重要頁面離首頁越近越好 | 點擊深度越深,被爬蟲抓到、權重傳遞的效率越低 | 核心頁面放主選單,一層就到 |
有一個鮮少被提起的技術地雷,值得特別講。當你的選單項目超過 100 個(這在產品分類很多的電商站很常見),按「儲存選單」時,可能會發現後半段的項目沒有被存進去、或順序錯亂。這不是 WordPress 的 bug,而是 PHP 伺服器的一個設定叫 max_input_vars 在擋。它預設值通常是 1000,意思是表單一次能送出的欄位數上限。一個選單項目會佔用多個欄位(標題、連結、父層、排序、屬性⋯⋯),100 個項目很容易就超過。解法是請主機商把 max_input_vars 調高到 3000 以上,或改用程式批次建立選單。這是保健食品電商這類網站常踩的坑,往往儲存了三次才發現問題根本不在按錯,而是伺服器在「自動省略」欄位。如果你也在經營大型電商,務必把這個設定檢查一次。
另一個常被看漏的是效能。選單本身很輕,但裝了動態選單外掛、mega menu 外掛後,前端會多載入 CSS 和 JavaScript,拖慢首頁載入速度。載入速度是 Google 公開的排名因素之一,挑選單外掛時要注意它有沒有產出多餘的程式碼、能不能只在前端需要的頁面載入。整站的快取與效能優化,可以參考WordPress 快取外掛推薦:7 款最佳網站加速外掛完整實測比較,把選單外掛帶來的負擔用快取層補回來。
選單與無障礙:別讓螢幕閱讀器讀不懂你的導覽
選單的無障礙性(accessibility)是台灣站長最容易忘記的一塊,但它同時影響兩個對象:使用螢幕閱讀器的視障訪客,以及搜尋引擎。本質上來說搜尋引擎讀網頁的方式跟螢幕閱讀器很像,都依賴 HTML 結構和語意標記。你把選單做對無障礙,SEO 也會跟著受惠。
- 用語意標籤包裹選單。好的主題會用
<nav>標籤包導覽列,並加上aria-label="主要導覽",讓機器知道這一區是選單。沒有nav的選單,對機器來說就只是一堆普通連結。 - 鍵盤要能操作。用 Tab 鍵應該能逐一走過每個選單項目,Enter 能觸發連結。下拉子選單也要能用鍵盤展開。純靠滑鼠 hover 才能展開的選單,對鍵盤使用者完全不可用。
- 對比度要夠。選單文字和背景的顏色對比,建議達到 4.5:1 以上。深藍底配深灰字這種搭配,在桌機上勉強能看,到手機陽光下就糊成一片。
- 當前所在頁面要標示。WordPress 原生會給當前頁面對應的選單項目一個
current-menu-item的 class,主題應該用它做出視覺差異,讓訪客知道「我現在在哪一頁」。這對導覽體驗的幫助比想像中大。
這幾點大多數主流主題都會處理,但免費或來路不明的主題常常缺東缺西。換主題、或挑選單外掛時,把無障礙列進檢查清單,長期會少掉很多麻煩。想把主題這層的選擇做對,15 大 WordPress 佈景主題推薦:免費+付費完整比較,附中文安裝教學把市面上主流主題的特性都比過一遍,包含它們對選單與無障礙的支援程度。
常見錯誤與排查:選單為什麼怪怪的?
實務上,選單出問題大多是幾個固定原因。我把最常被問的狀況整理成接下來這張表,遇到時照著排查就好,不用從頭猜。
| 狀況 | 可能原因 | 處理方式 |
|---|---|---|
| 選單做好卻沒顯示在網站上 | 沒有在「管理位置」把選單指派給位置 | 進「外觀 → 選單 → 管理位置」勾選 |
| 換了主題後選單消失 | 新主題的選單位置名稱不同 | 重新在新主題的位置裡指派選單 |
| 子選單點不出來 | 主題的選單深度被限制,或 CSS 衝突 | 改用主題本身的選單設定,或檢查子主題 CSS |
| 手機版選單連結點不到 | 觸控範圍太小或被其他元素蓋住 | 調整 CSS 的 padding 與 z-index |
| 儲存後項目遺失 | 觸發 max_input_vars 上限 | 請主機商調高該設定,或分批建立選單 |
| 選單連結出現 404 | 目標頁面被刪除或網址變更 | 在選單編輯器更新連結,或重建該頁面 |
換主題是最容易出事的時刻。因為選單位置是主題綁定的,主題一換,原本掛好的選單會「找不到家」。這不是資料不見,只是位置對不上,重新指派就回來了。但保險起見,養成一個習慣:做大改動前先備份。WordPress 備份與還原完全指南:4 種方法確保你的網站永不消失介紹了四種備份方法,選一個最順手的定期跑,選單改壞了也能一鍵還原。
選單不是設好就好:定期檢視的時機
很多站長把選單設好就再也不動它,這其實是個隱藏問題。網站會長大,頁面會新增,舊服務會下架,選單如果跟不上,就會慢慢變成跟現況脫節的化石。我自己的習慣是每季花十分鐘重新檢視一次選單,檢查幾件事:有沒有連到已刪除頁面的死連結、有沒有該上架的新服務還沒放進去、頂層項目是不是又悄悄超過了七個、手機版是不是還能順暢操作。
另一個觸發重新檢視的時機,是當你從 Google Search Console 發現某個重要頁面流量一直起不來。先別急著改內容,回頭看看它是不是被埋在選單深處、或根本沒有出現在導覽裡。把它拉到主選單或放進更顯著的位置,往往比改內容更快帶來流量改變。選單是全站權重分配的水龍頭,開對方向,水才會流到對的地方。想知道怎麼用數據找出這些被埋沒的頁面,Google Search Console 安裝教學與方法|GSC 教學是必備的基礎工具。
六步行動方案:今天就重建你的導覽選單
觀念、操作、進階、排查都講完了。這裡給你一個可以馬上動手的六步行動方案。不用一次做完,每天撥半小時走一步,一週內你的網站導覽就會脫胎換骨。
- 盤點現有選單。把你目前主選單的每一個項目抄下來,數一數頂層有幾個、最深幾層。超過 7 個或超過兩層的,標記起來,這些就是第一波要處理的。
- 畫出新的資訊架構。在紙上重新分組,用使用者任務而非公司部門來想。把次要連結移到頁尾候選區,把核心服務推到左側。
- 清掉舊選單。在後台把過時、重複、點進去是 404 的項目全部刪掉。一個乾淨的起點比什麼都重要,不要在舊的爛攤子上硬改。
- 重建主選單。照前面教的順序,從「外觀 → 選單」重新建立。邊拉順序邊對照你畫的架構圖,憑腦袋裡的記憶拉順序很容易出錯,務必對著紙上那張圖做。
- 設定頁尾與手機選單。頁尾放次要連結與政策頁,手機版確認漢堡選單能展開、觸控範圍夠大、關鍵 CTA 沒被藏在裡面。
- 手機實測。拿起自己的手機開網站,用訪客的心情從首頁走一次,看能不能在三秒內找到核心服務。做不到,就回頭調。
導覽選單看似是技術設定,本質卻是一場「替訪客著想」的設計練習。你每多花一分心思讓分類更直覺、讓點擊更輕鬆,訪客停留的時間就多一點,Google 對這個網站的評價也會跟著好一點。這是一個投入小、長期回報卻很穩的優化,值得你認真做一次,而不是隨便拉一拉就放著。
如果你才剛開始架站,選單只是整個 WordPress 學習地圖裡的一塊拼圖。從主機、主題到外掛,WordPress 架站完整攻略:新手零基礎也能自己架設專業網站把新手零基礎的路徑都串起來了,搭配這篇選單教學一起看,會更有全局觀,知道自己每一步在整張地圖的哪裡。
現在就打開你的網站,用一個第一次來的訪客的眼睛,重新看一遍最上方那排選單。你會發現,要改的地方比你想像中多。那就對了,這正是開始優化的起點。
常見問題
選單設定好了,前台為什麼完全看不到?
桌機看得到、手機卻看不到,是同一個原因嗎?
自訂連結選單什麼時候用?
選單項目一多,儲存後後半段的項目就遺失,是選單壞掉了嗎?
主選單要不要放單篇文章?
操作步驟
- 建立選單到「外觀 > 選單」輸入選單名稱,按「建立選單」。名稱僅供自己辨識,不會顯示在前台。
- 加入頁面或分類在左側欄勾選要加入的頁面、分類或自訂連結,找不到就點最右上角的「顯示選項」展開篩選條件,再按「加到選單」。
- 拖放排序與分層在中間區域以拖放完成:上下拖是排序,左右拖是設定父子層級。建議壓在兩層以內。
- 勾選顯示位置拉到最底部的「選單設定」,勾選要掛的顯示位置(例如「主要選單」)。這一步最常被略過,是選單沒出現的頭號原因。
- 儲存並回前台檢查按「儲存選單」,回前台按 Ctrl+F5(Mac 為 Cmd+Shift+R)強制重新整理確認顯示;若有快取外掛記得一併清除。