WordPress 條件式選單教學:依登入狀態切換導覽列

WordPress 條件式選單教學:比較整組替換與項目顯示、示範傳統選單 wp_nav_menu_args,並說明區塊導覽、會員授權、角色與快取的適用限制。
本頁目錄
- 條件式選單到底解決什麼問題?先把你放進一個情境
- 先分清楚條件、位置與內容
- 你最常需要的六種判斷條件
- 1. 登入狀態
- 2. 使用者角色
- 3. 正在瀏覽的頁面類型
- 4. 分類與自訂分類法
- 5. 裝置類型
- 6. 語系(多語網站)
- 不寫程式的兩條外掛路線
- 整組替換:Conditional Menus(Themify 出品)
- 單一項目顯示隱藏:If Menu
- 兩種顆粒度怎麼選
- 先檢查現有主題或頁面編輯器能做到哪裡
- 頁面建構器的 Theme Builder 顯示條件
- 主題提供的選單位置
- 寫一小段 functions.php,把控制權完全握在手裡
- 最基本的範例:依登入狀態換選單
- 進階:依使用者角色換選單
- 再進階:依頁面類型換選單
- 兩個寫程式時的硬規矩
- 三條路怎麼選:一張決策表
- WooCommerce 商店最該做的三個條件式選單
- 應用一:訪客 vs 已登入顧客的導覽切換
- 應用二:批發客戶的專屬入口
- 應用三:購物車有商品時的結帳引導
- 快取地雷:為什麼登入者會看到訪客選單
- 三層快取,三種踩法
- 手機上的條件式選單,是另一個戰場
- 五個最常見的踩坑
- 從今天開始的三步上線計畫
你是不是也遇過這種窘境?一位會員登入你的網站,導覽列上卻還掛著「登入」、「註冊」兩個按鈕,而他明明早就付費成為站內會員了。又或者,你的購物網站首頁選單塞了七、八個商品分類,結果對第一次上門的訪客來說,他真正想找的「關於我們」反而被淹沒在分類海裡。
會員制網站若用同一組選單服務不同狀態的訪客,容易出現不相關入口。訪客與會員、手機與桌機、商品頁與文章頁的導覽需求可能不同,應先盤點再決定是否切換選單。
重點摘述:什麼是 WordPress 條件式選單
條件式選單(conditional menu)讓網站上同一個選單位置,依使用者狀態、頁面或裝置切換內容。實作路線包括外掛、既有頁面編輯器或一小段functions.php;上線前還要驗證快取是否正確區分狀態。這是 WordPress 架站全攻略 在選單段的進階應用。
WordPress 不只用於部落格。W3Techs 的長期追蹤顯示,WordPress 跑在全球大約 43% 的網站上(2026 年 6 月資料)。當網站加入會員、購物車或不同權限,單一固定選單便可能無法兼顧所有狀態。
條件式選單到底解決什麼問題?先把你放進一個情境
想像你經營一個線上學習網站。你的訪客有三種人:還沒註冊的路人、已註冊但沒付費的免費會員、付費的 VIP 學員。三種人登進同一個網站,應該看到完全不同的導覽。
路人看到的是「首頁、課程介紹、定價方案、成功案例、免費試聽、登入」。免費會員登入後,那些行銷頁面對他已經沒有意義,他想看到的是「我的課程、學習紀錄、升級 VIP、會員中心、登出」。VIP 學員則需要「我的專屬課程、下載教材、直播行事曆、專屬社群、登出」。
如果你硬要把這三組需求塞進同一個選單,會發生兩件事:選單變得超長,手機上展開像一份報稅單;而且每個使用者在十幾個項目裡找自己要的那一個,體驗很糟。
條件式選單的核心價值就在這裡:把對的入口,在對的時間,給對的人。它背後牽動的是轉換率與使用者體驗的基礎工程。一個已經登入的付費會員,不該再被「立即註冊」這種按鈕妨礙;一個還沒結帳的訪客,也不該被「會員下載區」弄得一頭霧水。
換句話說,這背後的邏輯跟實體零售是一樣的。一家好店不會把「員工通道」、「倉庫」、「VIP 休息室」的牌子全部掛在正門口讓每個客人都看到。它會根據你的身分,引導你走對的門。網站的導覽列,就是你這家店的門面。
先分清楚條件、位置與內容
很多新手一開始做條件式選單會卡關,是因為把兩件不同的事混在一起。我想先用一個框架,幫你把概念拆開。這個框架是:條件層、位置層、內容層。
條件層回答的是「什麼時候要換」。比方說「當使用者已經登入」、「當他在 WooCommerce 的購物車頁面」、「當他是批發客戶這個角色」、「當他用行動裝置瀏覽」。這一層是判斷條件,跟選單本身無關。
位置層回答的是「換掉哪裡的選單」。使用傳統 wp_nav_menu() 的主題,選單可掛在選單位置(menu location)上的,例如「主要選單(primary)」、「頁尾選單(footer)」、「行動選單(mobile)」。當條件成立時,你要決定的是:把這個位置上的選單,換成哪一套。
左右捲動檢視完整表格
| 層級 | 它決定什麼 | 具體例子 |
|---|---|---|
| 條件層 | 什麼時候觸發切換 | 已登入、某角色、某頁面、手機瀏覽 |
| 位置層 | 切換哪一個選單位置 | primary、footer、mobile menu |
| 內容層 | 換成哪一套選單 | 「訪客選單」「會員選單」「批發選單」 |
把這三層想清楚之後,你會發現所有的實作手法,不管裝外掛還是寫程式,本質上都是在回答這三個問題。差別只在於:外掛幫你把介面做好,你只要勾選;寫程式則是你自己用程式碼描述這三層邏輯。觀念通了,後面學任何工具都快。
還有一個關鍵認知:條件式選單有兩種顆粒度。一種是整組替換(把整個選單位置換成另一套選單),另一種是單一項目顯示隱藏(選單結構不變,但某些項目根據條件出現或消失)。前者適合「訪客 vs 會員」這種整組差異大的情境;後者適合「只多一個 VIP 專屬按鈕」這種小範圍調整。你選的工具,取決於你要的是哪一種顆粒度。隱藏選單不會保護連結目標;會員頁、下載檔與 API 仍需獨立授權檢查。
你最常需要的六種判斷條件
條件層可以判斷的東西很多,但實務上你真正會用到的就那幾種。我把最常用的六種整理出來,讓你心裡有個譜,知道哪些是「高頻需求」,哪些是偶爾才碰到。
1. 登入狀態
「使用者有沒有登入」是常用條件。典型應用是登入前顯示「登入/註冊」,登入後改成「會員中心/登出」。WordPress 內建的 is_user_logged_in() 函式可判斷登入狀態,用法細節見 WordPress 官方程式碼參考。
2. 使用者角色
WordPress 用「角色(role)」來分群使用者,內建有管理者、編輯、作者、投稿者、訂閱者。WooCommerce 另有「顧客(customer)」及「商店管理員(shop_manager)」角色(見 WooCommerce 官方文件),會員外掛如 Ultimate Member 也可能提供自訂角色。你可以根據角色,給批發客、VIP、一般顧客不同的選單。
3. 正在瀏覽的頁面類型
「他在看哪一頁」也是很常用的條件。部落格文章區出現「文章分類」選單很合理,但在 WooCommerce 結帳頁還顯示「文章分類」就會妨礙結帳。你可以讓商品頁、購物車、結帳頁出現一套「購物導覽」,其他頁面出現「內容導覽」。WordPress 內建一整套這類判斷函式,is_front_page() 判斷首頁、is_single() 判斷單篇文章、is_page() 判斷指定頁面,WooCommerce 再加上 is_product()、is_cart()、is_checkout() 這組電商專用判斷。把這些函式串起來,你能做到非常細的「逐頁導覽」,比方說只讓某個特定 landing page 顯示一組促銷選單,其他頁面完全不受影響。這種做法對活動檔期特別好用,檔期一結束把條件拿掉就好,不必動到整個網站的選單結構。
4. 分類與自訂分類法
可依商品分類切換選單;若要自動列出子分類,還需工具支援動態項目或自行產生,不能只靠條件切換完成。這在大型商品目錄很實用,能幫使用者少點好幾層。
5. 裝置類型
手機跟桌機的選單邏輯不同。桌機可以放水平選單配下拉子選單,手機則通常收進漢堡選單。全球網頁流量超過六成來自行動裝置(Statista 2026 年 4 月的統計);單一網站仍要以自己的裝置資料驗證。
6. 語系(多語網站)
多語網站裡,每個語系通常需要各自的選單,連結也要指向同語系的頁面。這通常由多語外掛處理,但底層一樣是條件判斷。
這六種條件還可以組合使用。比方說「已登入」+「角色是批發客」+「正在看商品頁」三者同時成立,才顯示「批發專屬下單」按鈕。組合愈多,彈性愈大,但也愈容易出錯,所以建議從單一條件開始,驗證沒問題再疊加。
不寫程式的兩條外掛路線
如果你不想碰程式碼,外掛是最快上路的選擇。但這裡有個很多人沒注意到的關鍵:不同外掛處理的顆粒度不一樣。選錯外掛,你會做到一半才發現它做不到你要的效果。
我依「替換整組選單」跟「控制單一項目」兩種需求,把主流路線分開講。
整組替換:Conditional Menus(Themify 出品)
這類外掛讓你針對某個選單位置,設定「在某條件下改用另一套選單」。它動的是位置層,適合「訪客選單 vs 會員選單」這種整組差異大的情境。你只要先在 WordPress 後台建立好幾套選單(例如「訪客選單」「會員選單」),再到外掛設定裡指派條件即可,需確認工具目前提供的條件,以及主題是否使用標準選單函式。區塊主題的 Navigation block 不能直接假設相容。如果你想先搞懂怎麼在後台建立與管理選單本身,可以回頭看我們寫的WordPress 選單設定教學,把基本功打穩。
單一項目顯示隱藏:If Menu
If Menu 走的是另一個方向:選單結構維持不變,但你可以在每個選單項目上勾選「只在某條件下顯示」。比方說你有一個「下載專區」項目,設定成「只在使用者已登入時顯示」。它動的是內容層的單點開關,適合只多一兩個專屬按鈕的場景,不必為了這點而多建一整套選單。WordPress.org 外掛目錄目前顯示它尚未測試最近三個 WordPress 主要版本;新站不宜只依舊教學直接採用。若要使用,先在測試站核對目前版本、傳統選單編輯器、登入狀態與快取;Navigation block 的支援也不能由這個傳統選單功能推定。
兩種顆粒度怎麼選
左右捲動檢視完整表格
| 你的需求 | 建議路線 | 代表外掛類型 |
|---|---|---|
| 訪客跟會員要看到完全不同的一組選單 | 整組替換 | Conditional Menus 類 |
| 選單大致一樣,只多幾個會員專屬按鈕 | 單一項目顯示隱藏 | If Menu 類 |
| 不同頁面要不同選單(例如商品頁 vs 部落格) | 整組替換,條件設頁面類型 | Conditional Menus 類 |
| 只想隱藏「登入」按鈕給已登入者 | 單一項目顯示隱藏 | If Menu 類 |
不管選哪一支,安裝步驟都一樣。還不熟悉怎麼裝外掛的人,可以照WordPress 外掛安裝教學的三種方法操作。這兩款工具的主要用途不同,其他工具可能同時提供多種功能。所以裝之前先想清楚你的需求是整組替換還是單點開關,別裝錯方向。
先檢查現有主題或頁面編輯器能做到哪裡
如果網站已使用頁面編輯器或具備頁首建構器的佈景主題,先查看現有版本與方案提供哪些顯示條件。有些工具只能依頁面或範本切換,未必能直接依登入狀態或角色判斷。
頁面建構器的 Theme Builder 顯示條件
部分頁面建構器能用視覺化方式設計頁首(header),並為頁首範本設定頁面層級的顯示條件(見 Elementor 官方文件)。登入狀態或角色條件是否可用,取決於目前方案、版本及額外整合,不能把一般的 Include/Exclude 頁面條件當成會員條件。

這條路能把頁首的 logo、CTA 按鈕與配色一併放進範本,但會員條件仍要另行確認。設定時避免為小差異複製過多頁首範本,以免後續更新不一致。
主題提供的選單位置
部分主題提供 primary、footer、mobile 等選單位置,可在自訂器或 Header Builder 指派。這不等於內建登入狀態或角色判斷;若需要會員條件,仍要查目前方案、擴充功能或改用外掛與程式碼。
現有工具若確實支援所需條件,可以優先沿用;若只支援頁面層級條件,就不要硬套成會員選單。選擇依據是條件是否完整、快取能否正確區分狀態,以及後續維護者是否看得懂。
寫一小段 functions.php,把控制權完全握在手裡
第三條路是寫程式。如果你對程式碼不陌生,可用 WordPress 的 wp_nav_menu_args filter,在選單輸出前修改「要用哪套選單、掛在哪個位置」的參數,WordPress 官方程式碼參考對這個 filter 有完整說明。
最基本的範例:依登入狀態換選單
假設你在後台建了兩套選單,slug 分別是「guest-menu」跟「member-menu」,掛在 primary 這個位置。把這段程式碼放進子主題的 functions.php,此範例適用於呼叫 wp_nav_menu() 的傳統選單。確認實際位置名稱與選單 slug 後,可讓登入者看 member-menu、訪客看 guest-menu;它不會改寫 Navigation block:
add_filter( 'wp_nav_menu_args', 'sliven_swap_menu_by_login' );
function sliven_swap_menu_by_login( $args ) {
// 只處理主要選單這個位置
if ( isset( $args['theme_location'] ) && 'primary' === $args['theme_location'] ) {
$args['menu'] = is_user_logged_in() ? 'member-menu' : 'guest-menu';
}
return $args;
}
這段程式的邏輯很直白:先判斷現在要輸出的是不是 primary 位置,如果是,再依 is_user_logged_in() 的結果決定選單 slug。修改完把參數陣列回傳,WordPress 就會用你指定的新選單來渲染。記得,「primary」這個位置名稱會因為你用的主題而不同,不同主題或建構器的輸出方式可能有差,要對照你的主題文件來填。

進階:依使用者角色換選單
若需求確實是角色分組,可取得目前使用者的 roles 陣列。以下 wholesale_customer 是示例角色,必須與網站已建立的實際角色一致;付費會員資格則應使用會員系統的有效資格判斷,不能假設登入或角色就代表付款有效。
add_filter( 'wp_nav_menu_args', 'sliven_swap_menu_by_role' );
function sliven_swap_menu_by_role( $args ) {
if ( ! isset( $args['theme_location'] ) || 'primary' !== $args['theme_location'] ) {
return $args;
}
if ( is_user_logged_in() ) {
$user = wp_get_current_user();
$roles = (array) $user->roles;
if ( in_array( 'wholesale_customer', $roles, true ) ) {
$args['menu'] = 'wholesale-menu';
} else {
$args['menu'] = 'member-menu';
}
} else {
$args['menu'] = 'guest-menu';
}
return $args;
}
這段程式會優先判斷「批發客戶」角色(wholesale_customer),命中就用批發選單,否則用一般會員選單,未登入則用訪客選單。如果你想用能力(capability)來判斷,例如「能編輯別人文章的人」,可以改用 current_user_can( 'edit_others_posts' ),但要傳入能力名稱,官方不建議把角色名稱直接當作能力使用。能力跟角色的對應,我們在WordPress 使用者權限完全指南裡有完整對照表,寫條件時很好用。
再進階:依頁面類型換選單
電商網站還有一個很實際的需求:結帳流程裡,你希望使用者專心把錢付完,不要被「部落格」、「關於我們」這些無關的選單項目分散注意力。這時判斷條件就從「人」換成「頁面」。WooCommerce 提供了一組專屬的條件函式,讓你精準辨識使用者現在站在購物流程的哪一站:
add_filter( 'wp_nav_menu_args', 'sliven_swap_menu_by_page' );
function sliven_swap_menu_by_page( $args ) {
if ( ! isset( $args['theme_location'] ) || 'primary' !== $args['theme_location'] ) {
return $args;
}
// 結帳流程用極簡選單,降低分心與棄單
if ( function_exists( 'is_checkout' ) && is_checkout() ) {
$args['menu'] = 'checkout-menu';
} elseif ( function_exists( 'is_cart' ) && is_cart() ) {
$args['menu'] = 'cart-menu';
} elseif ( function_exists( 'is_woocommerce' ) && is_woocommerce() ) {
$args['menu'] = 'shop-menu';
}
return $args;
}
function_exists() 可避免 WooCommerce 停用後呼叫不存在的函式。這裡分別處理結帳、購物車及一般商店頁,因為 is_woocommerce() 不涵蓋所有購物流程頁;如需區分付款或訂單完成端點,還要加上端點判斷。
這三段是分開的示範,不要直接全部啟用:它們都修改同一個 filter,後執行的函式可能覆蓋先前結果。若要組合登入、角色與頁面條件,請合併為一個明確的優先順序,並測試衝突情境。
兩個寫程式時的硬規矩
- 一定要加位置判斷。先用
isset()確認theme_location存在,再比對位置。省略這層,可能把頁尾或行動選單一起換掉。 - 程式碼放子主題,不要改主題主檔。主題一更新,你直接改在父主題的程式碼就會被覆蓋掉。可放在子主題的
functions.php或自訂功能外掛,保留備份與回復方式。
程式碼路線方便做版本控管,但仍依賴 WordPress、主題位置與相關外掛 API。跨站搬用前要重新核對 slug 與快取,不是改兩個字就能保證相同結果。若團隊不維護 PHP,選擇介面清楚的工具通常更容易交接。
三條路怎麼選:一張決策表
我把前面講的三條實作路線,整理成一張決策表,讓你根據自己的情況對號入座。選路線這件事,重點在於哪條最匹配你的技術能力、網站現況,以及未來誰會接手維護,沒有所謂萬用的最佳解。
左右捲動檢視完整表格
| 你的情況 | 建議路線 | 為什麼 |
|---|---|---|
| 完全不碰程式,預算也有限 | 免費選單外掛 | 最快上手,但只能做選單本身的條件 |
| 網站已經用 Elementor Pro 或 Astra Pro | Theme Builder 顯示條件 | 先確認方案支援所需條件,再決定是否沿用 |
| 團隊裡有人寫 PHP,追求輕量與可重現 | functions.php 勾點 | 可控管程式版本,但需檢查主題 API 與效能 |
| 需求只是隱藏一兩個會員專屬按鈕 | If Menu 類單點開關外掛 | 不必為小需求建一整套備用選單 |
| 網站會交給外部廠商維護 | 外掛或 Theme Builder | 視覺化設定,廠商看得懂、敢動 |
有一個判斷原則很實用:能讓下一個接手的人看懂的做法,就是好做法。技術上最漂亮的程式碼,如果只有你一個人會改,那它對網站長期反倒是個風險。反過來說,如果團隊技術能力到位,硬要用外掛去湊,反而會把簡單邏輯埋在一堆設定選項裡,除錯更難。誠實評估你的團隊,再選路線。
WooCommerce 商店最該做的三個條件式選單
電商訪客的需求會隨購物狀態改變,以下三種情境可作為導覽規劃起點。
應用一:訪客 vs 已登入顧客的導覽切換
還沒登入的訪客,首頁選單應該引導他「開始購物」,出現「全系列商品、熱銷排行、優惠方案、登入」。顧客帳號登入後(既有其他角色不會單因登入就變成 customer),選單換成「我的訂單、追蹤清單、會員專屬優惠、登出」。這些項目只是規劃範例;是否讓回訪顧客更快找到訂單,應用實際任務測試與點擊資料確認。
應用二:批發客戶的專屬入口
B2B 電商常把批發客設成獨立角色,給他們不同的價格、最小下單量、下單流程。這些人需要的選單也完全不同:他們要的是「快速補貨、歷史訂單重下、報價單下載、業務聯絡」,跟一般消費者想的「熱銷、優惠、加入購物車」完全是兩回事。用前面那段依角色切換的程式碼,就能精準服務這群高價值客戶。
批發場景還有一個容易被錯過的細節:這群人重複下單的頻率很高,他們最討厭的是「每次都要重新找商品」。所以批發選單的設計重心,應該放在「讓常買的東西兩次點擊就到」,行銷誘因反而是次要考量。你甚至可以依據每個批發客過往的採購紀錄,動態把「常補貨品項」放進他的專屬選單。這已經超出條件式選單的基本範圍,進到個人化導覽的領域,但底層一樣是「依使用者狀態換內容」這個概念。先把基本的角色切換做穩,再往個人化延伸,腳步才不會亂。
應用三:購物車有商品時的結帳引導
當訪客的購物車裡已經有商品,你可以在選單上強化「購物車」跟「結帳」的視覺權重,甚至直接顯示商品數量。這通常用小工具或選單項目加上條件判斷來做,是否讓訪客更容易完成購物,需用實際任務測試與購物流程資料確認。把整體結帳流程串起來的細節,可以參考WooCommerce 電商架站實戰,搭配本篇的選單邏輯一起規劃。
電商做條件式選單還有一個延伸應用:會員等級。如果你用積分或等級制把顧客分層(例如銀卡、金卡、白金),可以依等級顯示對應的專屬下單入口或折扣區。會員制度本身的設計邏輯,跟我們寫的會員權限、登入流程是同一條線,建議把會員系統的基礎先讀過WordPress 會員登入註冊系統客製化教學,再回頭疊選單條件,整個會員體驗才會一致。也要分清楚,條件式選單只決定入口要不要出現,屬於導覽層而非權限控管:未授權者仍可能直接輸入網址進入頁面,真正的內容保護要在角色權限或頁面層做伺服器端檢查。
快取地雷:為什麼登入者會看到訪客選單
接下來這段,是整篇文章裡最值得你讀的一段。你可以把前面所有方法都做對,但只要漏了快取這一關,條件式選單就會在某一天無預警失效,而且症狀極難重現。
典型的情境是這樣:某個電商網站有會員跟批發客兩種角色,用 wp_nav_menu_args 依角色切換選單,在本機測試一切正常,登入批發客就看到批發選單。結果網站上線後,使用者回報的狀況是:「批發客登入後,有時候看到批發選單,有時候看到一般訪客選單,重新整理又不一樣。」
這類症狀常見原因之一是頁面快取。快取會保存產生後的 HTML,下次訪問同一網址時可能直接回傳存檔,不再執行 PHP;若快取規則沒有依登入 cookie 或使用者狀態區分,動態選單便可能拿到錯誤版本。程式條件、外掛衝突與選單指派也仍要一併排查。
因為選單是 HTML 的一部分,它會被一起快取。假設第一個訪問首頁的是個未登入的訪客,快取就把「訪客版選單」的首頁存了下來。接著一個登入的批發客連上首頁,快取直接把那份存檔吐給他,他看到的就是訪客選單。重新整理偶爾會對,是因為快取剛好過期重產。症狀飄忽不定,正是快取衝突的招牌特徵。
三層快取,三種踩法
左右捲動檢視完整表格
| 快取層 | 衝突症狀 | 處理方向 |
|---|---|---|
| 外掛頁面快取 | 登入者看到訪客版的快取頁 | 排除已登入使用者,或正確設定使用者快取 |
| 主機/邊緣快取 | 不管登不登入,都拿到同一份邊緣存檔 | 依 cookie(logged-in、購物車)繞過快取 |
| 瀏覽器快取 | 登出後還看到登入版選單 | 送出正確的快取標頭,別把動態頁存進瀏覽器 |
正確的處理原則只有一句話:只要頁面內容會依使用者狀態變動,那個頁面就不能用「不分對象」的單一快取。

部分快取外掛預設不快取已登入使用者,也可能提供依使用者區分的快取,WP Rocket 的使用者快取文件就是一例。啟用前要確認角色、個人化內容、Cookie 與登出後清除行為,不能只看選單是否正確。
若網站另行設定了整頁邊緣快取,也要確認它是否依登入或購物車 cookie 繞過快取。一般 CDN 不一定預設快取動態 HTML;問題通常發生在啟用全頁快取或自訂 Cache Rule 後。若不熟悉快取機制,可先讀WordPress 快取外掛推薦與快取 Cache 是什麼,再依供應商文件設定。
條件式選單寫完後,還要連同快取一起驗證。上線前應測試登入、登出、清快取與不同裝置,確認每種狀態都取得正確選單。
底下這個驗證流程,就是為了抓這類快取問題而整理出來的,建議每次上線前都跑一遍。第一步,開無痕視窗模擬訪客,看訪客選單。第二步,用一般顧客帳號登入,看會員選單。第三步,用批發客帳號登入,看批發選單。第四步,在三種狀態下各按一次「重新整理」並觀察選單是否會跳掉,這一步專門抓快取問題。第五步,切到手機視角把整套流程重跑一次。這五步走完還都正確,才算真的過關。流程不華麗,但能幫你省下無數個「為什麼這次又壞了」的夜晚。
手機上的條件式選單,是另一個戰場
前面講的條件邏輯,在手機上全部成立,但手機多了一層物理限制:螢幕小。桌機能放八到十個水平選單項目,手機塞不下,幾乎都收進漢堡選單。問題是,漢堡選單一展開,使用者要滑很久才找得到東西,這時候「少即是多」變成鐵律。
所以在手機上,條件式選單的價值被放大。你更應該狠心砍掉非必要的項目:未登入者只看到「商品、登入、購物車」三個核心入口;已登入顧客只看到「我的訂單、繼續購物、會員中心」。保留必要入口,再用可用性測試確認訪客是否找得到;可用找尋時間、誤點與使用者回饋檢查是否需要調整。
另一個手機專屬考量是登入流程。手機打字麻煩,很多網站會把登入或可選的社群登入做進流程;強制登入本身可能增加購物門檻,應由服務需求決定。如果你用了強制登入的機制,條件式選單就要對應處理被導去登入頁的那群人,別讓他們在登入頁還看到一般選單而分心。強制登入的做法細節,可以對照WordPress 強制登入設定教學來設計。
手機選單還有一個桌機不會遇到的痛點:展開後的層級深度。桌機可以用下拉子選單顯示多層,手機每多一層,使用者就要多點一次、多滑一輪。可依實際任務精簡不必要的子層,並用點擊資料與可用性測試確認,而不是套用固定的層數門檻。
老實說,現在手機流量已經是多數網站的主力,我建議你先把手機的條件式選單設計好,再回頭調桌機,順序別顛倒。伺服器端裝置判斷不等同螢幕寬度;使用 wp_is_mobile() 切換內容時,快取也要區分裝置。單純版面調整應優先使用響應式 CSS。
五個最常見的踩坑
整理五個最經典的錯誤,讓你少走點冤枉路。
- 選單項目與實際頁面不同步。你換了條件式選單,卻忘了對應的頁面或分類也已經改名或刪除,結果選單點下去是 404。每次改選單,都要回頭確認連結目標還在。
- 忘記設位置判斷,全部位置一起換。寫程式時漏掉
theme_location判斷,結果頁尾選單也被換成會員選單,整個網站選單大亂。 - 角色 slug 拼錯。請核對實際角色識別字,例如 customer;wholesale_customer 並非 WooCommerce 內建角色,拼錯一個字,條件就永遠不成立,而且不會報錯,只會「靜默失效」。
- 快取沒排除已登入者。就是前面那章講的地雷,症狀是「有時對有時錯」,最難抓。
- 同時裝多支選單外掛互相打架。裝了 Conditional Menus 又裝 If Menu,可能同時影響輸出,需要檢查條件與執行順序,並非安裝兩支就一定互相覆蓋。同一個需求用一支就夠,別疊床架屋。
這些問題可能是持續性設定錯誤,也可能只在特定快取或登入狀態出現。先固定重現條件,再逐一檢查選單、角色與快取。
從今天開始的三步上線計畫
講了這麼多,最小可行的上線步驟如下,照著做就能把第一個條件式選單跑起來。
第一步:盤點你的使用者狀態。拿一張紙,列出你網站上「有幾種不同狀態的人」。最基本就是「訪客/已登入」兩種,電商再加「批發客」,會員制網站再加「免費/付費會員」。每一種人,寫下他最該看到的三到五個選單項目。這一步看似簡單,卻是後面所有設計的地基。
第二步:依技術能力選一條路。不碰程式就先分清楚要「整組替換」還是「單點開關」,再選外掛類型。現有主題或建構器若完整支援所需條件,可以沿用;能維護程式碼時,則可評估 wp_nav_menu_args。避免重複套用多種切換機制。
第三步:上線前過快取這一關。不管用哪條路,都要在清快取、登入、登出與行動裝置等情境下測試選單,確認每個狀態都正確。
條件式選單看似是個小功能,但它真正影響的,是你這個網站有沒有把使用者當成一個「活生生、會變化狀態的人」。一個永遠長一樣的選單,等於對每位訪客說「我懶得管你是誰」。而一個會依狀態調整的選單,傳遞的是「我知道你現在需要什麼」。這份貼心,就是品牌信任的累積起點,也是訪客願意留下來、願意掏錢的關鍵之一。
這件事沒有做完的一天。隨著你網站長出新角色、新商品分類、新頁面類型,你的條件式選單也該跟著長。把它當成網站導覽的活器官,定期回頭檢視每種狀態的人看到的是不是還合理,這個習慣會讓你的網站愈經營愈順手,避免愈跑愈沉重。
現在,就去打開你的網站,用一個訪客的身份、再用一個會員的身份,分別走一次導覽。你會很快發現,哪裡該換了。
常見問題
WordPress 怎麼讓未登入訪客看到登入註冊、已登入會員看到我的帳戶登出?
is_user_logged_in() 跟 current_user_can 哪個適合切換選單?
為什麼條件選單程式碼貼上去沒生效?
條件選單能把會員專區頁面完全保護住嗎?
If Menu 能直接用於 Navigation block 嗎?
操作步驟
- 確認是傳統選單或 Navigation block,並將選單顯示與會員頁授權分開規劃。
- 建立訪客與會員選單,核對實際 slug 和主題註冊的位置名稱。
- 在測試環境選用一段示範程式;如要組合條件,合併優先順序而非同時貼入三段 filter。
- 分別測試訪客、不同角色、登入及登出,確認連結目標仍有正確存取權限。
- 檢查各層快取是否區分狀態,並測試桌面、手機與付款或訂單完成頁。