, , , , ,

WordPress 選單設定教學：2026 從基礎到進階的選單管理完整指南

  • 2026-04-11
WordPress選單類型總覽圖，展示五種選單形式：主選單、下拉式選單、漢堡選單、浮動選單、錨點選單，每種有簡易示意圖

WordPress 選單設定教學：2026 從基礎到進階的選單管理完整指南

WordPress 選單看似簡單，但設定錯了就會讓訪客迷路。手機版選單跑掉、選單莫名消失、多層選單不出現——這些問題你遇過幾個？

WordPress選單類型總覽圖，展示五種選單形式：主選單、下拉式選單、漢堡選單、浮動選單、錨點選單，每種有簡易示意圖

這篇教學從最基本的新增選單開始，一路教到浮動選單、錨點連結、手機版選單優化。不管你是第一次碰 WordPress 還是已經用了好幾年，都能在這裡找到你需要的答案。

WordPress選單建立步驟圖，四個步驟流程：命名選單→新增項目→設定層級→指定位置，每步驟有簡化的後台畫面示意

WordPress 選單設定搞不定？加 LINE 免費諮詢，我們幫你設定到好，或一對一教你自己做。

選單CSS客製化前後對比圖，左側為預設樣式的選單，右側為客製化後的選單（品牌色、圓角、hover效果），中間有CSS程式碼片段

重點摘要： WordPress 選單在後台「外觀 → 選單」建立。多層選單用拖曳建立但不超過三層。手機版漢堡選單大部分主題已內建。選單不見最常見的原因是使用了 FSE 主題（改到「外觀 → 編輯器」操作）。浮動選單用 CSS position: sticky 或外掛實現。

WordPress 選單的基礎建立與位置設定

如何新增選單與指定選單位置

進入後台「外觀 → 選單」，就是你管理選單的地方。

操作步驟：

  1. 輸入選單名稱（例如「主選單」），點擊「建立選單」
  2. 從左側面板勾選要加入的頁面、文章或分類
  3. 點「加到選單」
  4. 在下方勾選選單位置（主選單、頁尾選單等）
  5. 儲存選單

選單位置是由你的佈景主題定義的。不同主題有不同的選單位置。如果你需要的位置主題沒提供，可能要用外掛或自訂程式碼來新增。

你可以建立多組選單。例如主選單放導航項目，頁尾選單放隱私權政策、服務條款之類的法律頁面。

注意：如果你用的是新版的全站編輯（FSE）主題（例如 Twenty Twenty-Four），選單功能不在「外觀 → 選單」，而是在「外觀 → 編輯器」裡面用 Navigation Block 管理。

選單項目的排列與巢狀（多層選單）設定

多層選單（下拉式選單）怎麼做？很簡單。

在選單編輯畫面，把某個項目往右拖一格，它就變成上面那個項目的子選單。

我們的建議是多層選單不要超過三層。我們測試過四層和五層的選單，手機版幾乎沒辦法正常操作。三層就是極限了。

如果你的網站結構真的很複雜需要更多層級，考慮用 Mega Menu 外掛（如 Max Mega Menu 或 UberMenu），它能做出大型的下拉式選單面板。

選單項目的進階設定（CSS Class、開新分頁、標題屬性）在選單編輯畫面右上角的「顯示選項」裡面打開。

WordPress 外觀找不到選單的解決方法

「我的 WordPress 外觀裡面沒有選單選項！」這是我們最常被問到的問題之一。

三個最常見的原因：

  1. 用了 FSE 主題：新版的全站編輯主題把選單移到了「外觀 → 編輯器」。看看你的主題是不是 Twenty Twenty-Four 之類的 Block Theme。

  2. 主題沒有註冊選單位置：有些極簡主題或自訂主題可能沒有在 functions.php 裡面用 register_nav_menus 註冊選單。

  3. 外掛衝突：某些外掛可能導致選單頁面消失。試試停用所有外掛後重新檢查。

症狀 可能原因 解法
外觀裡面完全沒有選單選項 FSE 主題 改到外觀→編輯器
選單頁面存在但是空的 主題未註冊位置 切換主題測試
選單頁面載入異常 外掛衝突 停用所有外掛排查

WordPress 手機版選單與響應式設計

根據 StatCounter 2025 年數據，行動裝置已產生全球 64.35% 的網站流量（StatCounter, 2025）。手機版選單設計不好，你的網站等於少了一半以上的訪客。根據研究，行動端跳出率比桌面端高約 10 個百分點，達 58-60%，複雜的選單導航是主要原因之一（Marketing LTB, 2025）。

手機漢堡選單的正確設定方式

漢堡選單（三條線的圖示）是手機版選單的主流做法。點擊後展開完整選單，不點的時候收合起來不佔空間。

好消息是大部分現代佈景主題都已經內建了響應式的漢堡選單。你不需要額外設定，只要確認選單在手機上測試正常就好。

怎麼測試？最簡單的方式：在電腦的 Chrome 瀏覽器按 F12，點左上角的手機圖示，就能模擬手機畫面。

選單收合功能與觸控友善設計

手機上的選單要考慮「手指」的操作。按鈕太小點不到、間距太密容易誤觸。

建議每個選單項目的觸控區域至少 48px 高度。這是 Google 的建議標準。

子選單的收合/展開動畫要流暢。卡頓的動畫比沒有動畫更糟糕。

浮動選單（Sticky Menu）設定教學

浮動選單就是滾動頁面時選單會固定在頂部。這對導航體驗很好——訪客不用滾回頁面最上方才能切換頁面。

實現方式有三種：

  1. 佈景主題內建：很多主題在設定裡就能開啟浮動選單
  2. CSS 方法：在選單的 CSS 加上 position: sticky; top: 0;
  3. 外掛方式：Sticky Menu (or Anything!) on Scroll 外掛

學完覺得太複雜？沒關係，加 LINE 讓我們幫你搞定

WordPress 進階選單功能實作

基礎學完了，來點進階的。

選單錨點連結：讓選單跳到頁面指定位置

一頁式網站（Landing Page）最常用的功能。點擊選單項目後，頁面會平滑捲動到指定的區塊。

設定方式：

  1. 在目標區塊設定一個 HTML 錨點 ID（例如 services）
  2. 在選單裡新增自訂連結，URL 填 #services
  3. 如果要跨頁面跳轉，URL 填 https://你的網域/#services

錨點連結搭配平滑捲動的 CSS：html { scroll-behavior: smooth; } 一行搞定。

商品分類選單與文章分類選單的設定

WooCommerce 的商品分類和 WordPress 的文章分類，都可以加到選單裡面。

在選單編輯畫面左側面板，勾選「產品分類」或「分類」的選項。如果沒看到，點右上角「顯示選項」打開。

語言選單：多語系網站的語言切換器

如果你用了 WPML 或 Polylang 做多語系網站，語言切換器會自動出現在選單裡面。

更多多語系的設定教學看多語系網站的語言選單設定。也可以回到WordPress 後台操作完整指南了解更多後台功能。

WordPress 選單樣式客製化

使用 CSS 自訂選單外觀與動畫效果

不滿意主題預設的選單樣式？用 CSS 就能改。

常見的客製化需求：

  • 改選單背景色：nav { background-color: #f0871c; }
  • 改選單文字顏色：nav a { color: #ffffff; }
  • hover 效果：nav a:hover { text-decoration: underline; }
  • 下拉動畫：transition: all 0.3s ease;

CSS 加在哪裡？後台 → 外觀 → 自訂 → 附加的 CSS。

主流佈景主題的選單客製化選項

根據 Google 的研究，53% 的行動用戶會在頁面載入超過 3 秒時離開，選單設計影響頁面載入速度和使用者體驗（Google Web.dev, 2025）。根據 Patchstack 2025 年報告，有 CTA 按鈕的廣告點擊率提升約 45%，選單中的 CTA 按鈕設計同樣重要（Tapflare, 2025）。

不同主題的選單客製化程度不同：

  • Astra：選單設定非常豐富，在「自訂 → 頁首」裡面
  • GeneratePress：輕量但選單設定項目多
  • Elementor Hello：搭配 Elementor 的 Nav Widget 做最大化客製

更多手機版設計和 RWD 的技巧，看WordPress 手機版選單與 RWD 設定。

WordPress 選單常見問題排錯

選單不見的五個常見原因與解法

WordPress 選單消失的五個常見原因包括 FSE 主題相容性問題、未註冊選單位置、外掛衝突，以及以下兩個：

  1. 快取問題：選單改了但前台沒變。清除瀏覽器快取和 WordPress 快取外掛的快取。
  2. 選單沒有指定位置：建立了選單但忘了勾選顯示位置。回到選單設定頁面底部勾選。

選單在手機版顯示異常的修復方法

手機版選單跑掉最常見的原因是 CSS 衝突。

解決方法：用 Chrome DevTools 的手機模擬模式（F12 → 點手機圖示），檢查哪些 CSS 規則影響了選單的顯示。通常是某個外掛或自訂 CSS 覆蓋了主題的響應式設定。

選單與快取外掛衝突的處理

如果你用了 WP Rocket 或 LiteSpeed Cache，選單可能會被快取導致更新後前台看不到變化。

解決方法：更新選單後手動清除快取。或在快取外掛設定中排除選單相關的動態元素。

WordPress 選單設定常見問題 FAQ

Q: WordPress 外觀裡面沒有選單選項怎麼辦？

A: 最可能的原因是你用了全站編輯（FSE）主題。改到「外觀 → 編輯器」裡面用 Navigation Block 管理選單。如果不是 FSE 主題，試試停用所有外掛排查衝突。

Q: WordPress 手機版選單怎麼設定才好用？

A: 大部分現代主題已內建響應式漢堡選單。確保每個選單項目的觸控區域至少 48px 高度、層級不超過三層、收合展開動畫流暢。用 Chrome DevTools 的手機模式測試。

Q: WordPress 選單可以做到幾層？

A: 技術上沒有限制，但實際操作建議不超過三層。三層以上在手機版幾乎無法正常操作。如果結構很複雜，建議用 Mega Menu 外掛（Max Mega Menu）建立大型下拉面板。

Q: 如何讓選單固定在頁面頂部？

A: 三種方式：主題設定裡面開啟、CSS 加上 position: sticky; top: 0;、或用 Sticky Menu 外掛。推薦 CSS 方法，最輕量也最穩定。

結論：好的選單讓訪客留下來

根據設計研究，使用者在 50 毫秒內就會對網頁產生第一印象，94% 的第一印象與網站設計有關（Tapflare, 2025）。根據 W3Techs 2026 年數據，WordPress 驅動全球 42.6% 的網站，CMS 市佔率達 60.4%（W3Techs, 2026）。

選單不是裝飾品，是導航工具。設定得好，訪客能快速找到想要的資訊。設定得差，訪客兩秒就走了。

花點時間把選單設定好，特別是手機版的體驗。這個小小的優化，可能直接影響你的轉換率。

WordPress 選單設定、網站客製化，我們全程服務

GOT YOU DESIGN 提供 WordPress 客製化服務，選單設定、手機版優化、品牌化設計，全部幫你處理。

👉 加 LINE 免費諮詢

延伸閱讀

常見問題

WordPress 外觀裡面沒有選單選項怎麼辦？

最可能的原因是你用了全站編輯（FSE）主題。改到「外觀 → 編輯器」裡面用 Navigation Block 管理選單。如果不是 FSE 主題，試試停用所有外掛排查衝突。

WordPress 手機版選單怎麼設定才好用？

大部分現代主題已內建響應式漢堡選單。確保每個選單項目的觸控區域至少 48px 高度、層級不超過三層、收合展開動畫流暢。用 Chrome DevTools 的手機模式測試。

WordPress 選單可以做到幾層？

技術上沒有限制，但實際操作建議不超過三層。三層以上在手機版幾乎無法正常操作。如果結構很複雜，建議用 Mega Menu 外掛（Max Mega Menu）建立大型下拉面板。

如何讓選單固定在頁面頂部？

三種方式：主題設定裡面開啟、CSS 加上 position: sticky; top: 0;、或用 Sticky Menu 外掛。推薦 CSS 方法，最輕量也最穩定。