一個網站裡常常有好幾塊不同的內容：公司介紹、線上商店、課程報名。客人進到商店，選單最好是「全部商品、運費說明、購物車」；進到課程，選單換成「課程介紹、上課時間、報名」。
WordPress 預設整個網站只有一組主選單。這篇用一段程式碼，讓你在編輯頁面時直接選這一頁要用哪一組選單，不用裝外掛。
先說適用範圍
- 傳統佈景主題（例如 Twenty Twenty-One、Astra 這類在「外觀 → 選單」設定選單的佈景主題）：用這篇的程式碼。
- 區塊佈景主題（例如 Twenty Twenty-Five，選單在「外觀 → 編輯器」裡設定）：不用寫程式，做法在文章最後。
程式碼
先到「外觀 → 選單」把每一組選單建好，例如「購物選單」「課程選單」。然後把下面的程式碼放在子佈景主題的 functions.php，或用 Code Snippets 這類外掛新增：
PHP
// 1. 編輯頁面時，右邊多一個「這一頁的選單」下拉選單
add_action( 'add_meta_boxes_page', function () {
add_meta_box( 'zw-page-menu', '這一頁的選單', 'zw_page_menu_box', 'page', 'side' );
} );
function zw_page_menu_box( $post ) {
wp_nonce_field( 'zw_page_menu', 'zw_page_menu_nonce' );
$current = (int) get_post_meta( $post->ID, '_zw_page_menu', true );
echo '<select name="zw_page_menu" style="width:100%">';
echo '<option value="0">預設選單（沒設定就沿用上層頁面）</option>';
foreach ( wp_get_nav_menus() as $menu ) {
printf(
'<option value="%d"%s>%s</option>',
$menu->term_id,
selected( $current, $menu->term_id, false ),
esc_html( $menu->name )
);
}
echo '</select>';
}
// 2. 儲存頁面時，把選的選單記下來
add_action( 'save_post_page', function ( $post_id ) {
if ( ! isset( $_POST['zw_page_menu_nonce'] )
|| ! wp_verify_nonce( sanitize_key( $_POST['zw_page_menu_nonce'] ), 'zw_page_menu' ) ) {
return;
}
if ( ! current_user_can( 'edit_page', $post_id ) ) {
return;
}
$menu = absint( $_POST['zw_page_menu'] ?? 0 );
if ( $menu ) {
update_post_meta( $post_id, '_zw_page_menu', $menu );
} else {
delete_post_meta( $post_id, '_zw_page_menu' );
}
} );
// 3. 前台：「主選單」位置換成這一頁（或上層頁面）指定的選單
add_filter( 'wp_nav_menu_args', function ( $args ) {
if ( 'primary' !== $args['theme_location'] || ! is_page() ) {
return $args;
}
$page_id = get_queried_object_id();
foreach ( array_merge( array( $page_id ), get_post_ancestors( $page_id ) ) as $id ) {
$menu = (int) get_post_meta( $id, '_zw_page_menu', true );
if ( $menu && is_nav_menu( $menu ) ) {
$args['menu'] = $menu;
break;
}
}
return $args;
} );逐段說明：
- 第 1 段：在編輯頁面的畫面加一個區塊，列出所有建好的選單。用區塊編輯器時，它會出現在右側「頁面」設定的最下面。
- 第 2 段：按下儲存時，把選的選單編號存起來。
wp_nonce_field、wp_verify_nonce確認是從這個畫面送出的，current_user_can確認這個人有權限編輯這一頁。 - 第 3 段：前台顯示選單時，如果是主選單的位置，就看這一頁有沒有指定選單；沒有的話往上找上層頁面，找到就換掉。
'primary'是 Twenty Twenty-One 主選單位置的名稱。每個佈景主題的名稱不一樣，可以在「外觀 → 選單 → 管理位置」看到有哪些位置，再到佈景主題的functions.php找register_nav_menus對照。is_nav_menu檢查選單還存在。選單被刪掉時，會回到預設的主選單，不會整排消失。
實際測試的結果
測試站：WordPress 7.1.3，佈景主題 Twenty Twenty-One。主選單只有「首頁」，另外建了「購物選單」（全部商品、運費說明、購物車）和「課程選單」（課程介紹、上課時間、報名）。
- 公司介紹頁，沒有設定：選單是「首頁」。
- 線上商店頁，設定購物選單：選單變成「全部商品、運費說明、購物車」。
- 運費說明頁（線上商店的子頁面），沒有設定：自動沿用上層的購物選單。
- 在區塊編輯器裡設定：打開「課程」頁面，右側「頁面」設定最下面出現「這一頁的選單」，下拉選單列出主選單、課程選單、購物選單；選「課程選單」按儲存，資料有存進去，前台的選單變成「課程介紹、上課時間、報名」。
- 指定的選單被刪掉：前台回到主選單「首頁」。
- 拿掉程式碼：線上商店頁回到主選單，存起來的設定不會影響網站。
區塊佈景主題的做法
區塊佈景主題的選單是頁首裡的「導覽」區塊，不經過上面的程式碼。做法是用範本：
- 到「外觀 → 編輯器 → 範本」，替頁面新增一個自訂範本，例如「商店頁面」。
- 在這個範本裡，把頁首的導覽區塊換成另一組選單，或換成另一個頁首。
- 編輯線上商店頁，在右側的「範本」選「商店頁面」。
這樣用同一個範本的頁面，選單都會一樣。
什麼時候適合
- 一個網站裡有好幾個品牌或服務，客人各看各的。
- 活動頁、招生頁：不想讓客人點到別的地方，選單只留報名相關的項目。
如果只是想讓選單短一點，先檢查是不是選單項目太多，〈企業官網要放哪些頁面？〉有建議的頁面清單。
延伸閱讀
選單是客人在網站裡找路的地圖。正威網路行銷是 25 年經驗的基隆網頁設計工作室，網站管家年費包含每年 12 次小修改，像這樣的小調整都可以交給我們，台北與全台客戶也歡迎免費諮詢。
發表留言
還沒有人留言，歡迎第一個分享你的想法或問題。留言經審核後才會顯示，Email 不會公開。