WordPress 條件式選單教學:依登入狀態切換導覽列
WordPress 條件式選單完整教學:在子主題 functions.php 用 wp_nav_menu_args 搭 is_user_logged_in(),依登入狀態切換主選單,全程伺服器端切換、不必裝會員外掛,並涵蓋角色分級、快取與行動版處理。
作者:褚崇名(Sliven)
本頁目錄
- 條件式選單到底解決什麼問題?先把你放進一個情境
- 先分清楚「條件」跟「位置」這兩層,才不會愈做愈亂
- 你最常需要的六種判斷條件
- 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 的購物車頁面」、「當他是批發客戶這個角色」、「當他用行動裝置瀏覽」。這一層是判斷條件,跟選單本身無關。
位置層回答的是「換掉哪裡的選單」。WordPress 的選單是掛在選單位置(menu location)上的,例如「主要選單(primary)」、「頁尾選單(footer)」、「行動選單(mobile)」。當條件成立時,你要決定的是:把這個位置上的選單,換成哪一套。
| 層級 | 它決定什麼 | 具體例子 |
|---|---|---|
| 條件層 | 什麼時候觸發切換 | 已登入、某角色、某頁面、手機瀏覽 |
| 位置層 | 切換哪一個選單位置 | primary、footer、mobile menu |
| 內容層 | 換成哪一套選單 | 「訪客選單」「會員選單」「批發選單」 |
把這三層想清楚之後,你會發現所有的實作手法,不管裝外掛還是寫程式,本質上都是在回答這三個問題。差別只在於:外掛幫你把介面做好,你只要勾選;寫程式則是你自己用程式碼描述這三層邏輯。觀念通了,後面學任何工具都快。
還有一個關鍵認知:條件式選單有兩種顆粒度。一種是整組替換(把整個選單位置換成另一套選單),另一種是單一項目顯示隱藏(選單結構不變,但某些項目根據條件出現或消失)。前者適合「訪客 vs 會員」這種整組差異大的情境;後者適合「只多一個 VIP 專屬按鈕」這種小範圍調整。你選的工具,取決於你要的是哪一種顆粒度。
你最常需要的六種判斷條件
條件層可以判斷的東西很多,但實務上你真正會用到的就那幾種。我把最常用的六種整理出來,讓你心裡有個譜,知道哪些是「高頻需求」,哪些是偶爾才碰到。
1. 登入狀態
「使用者有沒有登入」是常用條件。典型應用是登入前顯示「登入/註冊」,登入後改成「會員中心/登出」。WordPress 內建的 is_user_logged_in() 函式可判斷登入狀態,用法細節見 WordPress 官方程式碼參考。
2. 使用者角色
WordPress 用「角色(role)」來分群使用者,內建有管理者、編輯、作者、投稿者、訂閱者。WooCommerce 會多一個「顧客(customer)」角色(見 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 後台建立好幾套選單(例如「訪客選單」「會員選單」),再到外掛設定裡指派條件即可,完全不用碰程式碼。如果你想先搞懂怎麼在後台建立與管理選單本身,可以回頭看我們寫的WordPress 選單設定教學,把基本功打穩。
單一項目顯示隱藏:If Menu
If Menu 走的是另一個方向:選單結構維持不變,但你可以在每個選單項目上勾選「只在某條件下顯示」。比方說你有一個「下載專區」項目,設定成「只在使用者已登入時顯示」。它動的是內容層的單點開關,適合只多一兩個專屬按鈕的場景,不必為了這點而多建一整套選單。
兩種顆粒度怎麼選
| 你的需求 | 建議路線 | 代表外掛類型 |
|---|---|---|
| 訪客跟會員要看到完全不同的一組選單 | 整組替換 | 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,就能做到「登入者看 member-menu、訪客看 guest-menu」:
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」這個位置名稱會因為你用的主題而不同,Astra、Elementor、Storefront 各家命名有差,要對照你的主題文件來填。
進階:依使用者角色換選單
電商網站常需要分「一般顧客」跟「批發客戶」兩種選單。這時要把判斷從「有沒有登入」升級成「登入的是什麼角色」。 WordPress 判斷角色的標準做法,是先拿到目前使用者物件,再看他的 roles 陣列:
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( 'is_checkout' ) 先確認 WooCommerce 有在執行,才去呼叫它的函式。這是個好習慣:WooCommerce 萬一被停用,你的網站不會因為找不到函式而整個白屏。第二,判斷順序是「結帳頁 → 購物車頁 → 一般商店頁」,由嚴到鬆。結帳頁是最該淨空的,所以放最前面優先命中;沒命中再往下檢查。這種由嚴到鬆的排列,是寫條件判斷的基本紀律。
把這三段範例(登入狀態、角色、頁面類型)組合起來,你已經能涵蓋九成以上的條件式選單需求。真正進階的玩家,還會用 wp_get_nav_menu_items 這個勾點去做「只隱藏某幾個項目」的單點控制,但那比較適合留下單一外掛(例如 If Menu)來處理,不必硬寫成程式。判斷該寫程式還是用外掛的標準很簡單:如果是「整組換」,寫程式最乾淨;如果是「單點開關」,外掛最省事。
兩個寫程式時的硬規矩
- 一定要加位置判斷。先用
isset()確認theme_location存在,再比對位置。省略這層,可能把頁尾或行動選單一起換掉。 - 程式碼放子主題,不要改主題主檔。主題一更新,你直接改在父主題的程式碼就會被覆蓋掉。用子主題的
functions.php才是正解,這也是為什麼任何客製化前都建議先準備好子主題。
寫程式路線的好處是零依賴、效能好、可重現:同一段程式碼搬到別的網站改兩個字就能用,不必重新設定外掛。代價是它需要你懂一點 PHP 跟 WordPress 的勾點概念。如果你的網站會交給別人維護、或團隊裡沒人寫程式,那就乖乖用外掛或 Theme Builder,別為了「看起來很厲害」而埋下日後沒人敢動的地雷。
三條路怎麼選:一張決策表
我把前面講的三條實作路線,整理成一張決策表,讓你根據自己的情況對號入座。選路線這件事,重點在於哪條最匹配你的技術能力、網站現況,以及未來誰會接手維護,沒有所謂萬用的最佳解。
| 你的情況 | 建議路線 | 為什麼 |
|---|---|---|
| 完全不碰程式,預算也有限 | 免費選單外掛 | 最快上手,但只能做選單本身的條件 |
| 網站已經用 Elementor Pro 或 Astra Pro | Theme Builder 顯示條件 | 不另裝外掛,連頁首整體都能跟著換 |
| 團隊裡有人寫 PHP,追求輕量與可重現 | functions.php 勾點 | 零依賴、效能最好、可跨站複製 |
| 需求只是隱藏一兩個會員專屬按鈕 | If Menu 類單點開關外掛 | 不必為小需求建一整套備用選單 |
| 網站會交給外部廠商維護 | 外掛或 Theme Builder | 視覺化設定,廠商看得懂、敢動 |
有一個判斷原則很實用:能讓下一個接手的人看懂的做法,就是好做法。技術上最漂亮的程式碼,如果只有你一個人會改,那它對網站長期反倒是個風險。反過來說,如果團隊技術能力到位,硬要用外掛去湊,反而會把簡單邏輯埋在一堆設定選項裡,除錯更難。誠實評估你的團隊,再選路線。
WooCommerce 商店最該做的三個條件式選單
電商網站是條件式選單價值最高的場域,因為訪客的「狀態」會隨著購物流程不斷變化。我把三個投報比最高的應用整理出來。
應用一:訪客 vs 已登入顧客的導覽切換
還沒登入的訪客,首頁選單應該引導他「開始購物」,出現「全系列商品、熱銷排行、優惠方案、登入」。一旦他登入(WooCommerce 會給他 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 強制登入設定教學來設計。
手機選單還有一個桌機不會遇到的痛點:展開後的層級深度。桌機可以用下拉子選單顯示多層,手機每多一層,使用者就要多點一次、多滑一輪。可依實際任務精簡不必要的子層,並用點擊資料與可用性測試確認,而不是套用固定的層數門檻。
老實說,現在手機流量已經是多數網站的主力,我建議你先把手機的條件式選單設計好,再回頭調桌機,順序別顛倒。桌機的選單因為空間充裕,就算沒做條件優化,勉強還能用;手機沒做,轉換率會直接告訴你答案。
五個最常見的踩坑
整理五個最經典的錯誤,讓你少走點冤枉路。
- 選單項目與實際頁面不同步。你換了條件式選單,卻忘了對應的頁面或分類也已經改名或刪除,結果選單點下去是 404。每次改選單,都要回頭確認連結目標還在。
- 忘記設位置判斷,全部位置一起換。寫程式時漏掉
theme_location判斷,結果頁尾選單也被換成會員選單,整個網站選單大亂。 - 角色 slug 拼錯。WordPress 的角色 slug 是小寫英文(例如 customer、wholesale_customer),拼錯一個字,條件就永遠不成立,而且不會報錯,只會「靜默失效」。
- 快取沒排除已登入者。就是前面那章講的地雷,症狀是「有時對有時錯」,最難抓。
- 同時裝多支選單外掛互相打架。裝了 Conditional Menus 又裝 If Menu,兩支都在攔截選單輸出,結果互相覆蓋。同一個需求用一支就夠,別疊床架屋。
這五個坑的共同點是:它們都不會讓網站立刻壞掉,而是用「偶爾出錯」的方式折磨你。這種間歇性問題最耗時間,所以預防永遠比除錯划算。
從今天開始的三步上線計畫
講了這麼多,最小可行的上線步驟如下,照著做就能把第一個條件式選單跑起來。
第一步:盤點你的使用者狀態。拿一張紙,列出你網站上「有幾種不同狀態的人」。最基本就是「訪客/已登入」兩種,電商再加「批發客」,會員制網站再加「免費/付費會員」。每一種人,寫下他最該看到的三到五個選單項目。這一步看似簡單,卻是後面所有設計的地基。
第二步:依技術能力選一條路。不碰程式就先分清楚要「整組替換」還是「單點開關」,再選外掛類型。現有主題或建構器若完整支援所需條件,可以沿用;能維護程式碼時,則可評估 wp_nav_menu_args。避免重複套用多種切換機制。
第三步:上線前過快取這一關。不管用哪條路,都要在清快取、登入、登出與行動裝置等情境下測試選單,確認每個狀態都正確。
條件式選單看似是個小功能,但它真正影響的,是你這個網站有沒有把使用者當成一個「活生生、會變化狀態的人」。一個永遠長一樣的選單,等於對每位訪客說「我懶得管你是誰」。而一個會依狀態調整的選單,傳遞的是「我知道你現在需要什麼」。這份貼心,就是品牌信任的累積起點,也是訪客願意留下來、願意掏錢的關鍵之一。
這件事沒有做完的一天。隨著你網站長出新角色、新商品分類、新頁面類型,你的條件式選單也該跟著長。把它當成網站導覽的活器官,定期回頭檢視每種狀態的人看到的是不是還合理,這個習慣會讓你的網站愈經營愈順手,避免愈跑愈沉重。
現在,就去打開你的網站,用一個訪客的身份、再用一個會員的身份,分別走一次導覽。你會很快發現,哪裡該換了。
常見問題
WordPress 怎麼讓未登入訪客看到登入註冊、已登入會員看到我的帳戶登出?
is_user_logged_in() 跟 current_user_can 哪個適合切換選單?
為什麼條件選單程式碼貼上去沒生效?
條件選單能把會員專區頁面完全保護住嗎?
操作步驟
- 釐清需求:判斷你要的只是「換選單」,還是需要會員分級瀏覽權限;前者用原生條件標籤程式碼最快,後者才需要權限外掛。
- 到後台「外觀 > 選單」新增兩組選單:guest-menu(放登入、註冊)與 member-menu(放我的帳戶、登出),slug 必須與程式碼裡的字串完全對應。
- 把 wp_nav_menu_args filter 程式碼(以 is_user_logged_in() 判斷,鎖定 theme_location 為 primary)貼進子主題的 functions.php,儲存即生效。
- 用無痕視窗測試:訪客狀態應只剩登入、註冊,登入後切換成我的帳戶、登出;並檢視原始碼確認頁面只輸出一組選單而非 CSS 隱藏兩組。
- 把含條件選單的頁面排除快取,或啟用 WP Rocket 的依使用者快取;同時確認你主題的行動版 menu location(例如 mobile)是否也需要同一段條件判斷,避免只換了桌機、手機仍顯示舊選單。