WordPress 自定義選單開發：核心 PHP 函數完整指南與最佳實踐

核心函數總覽

在 WordPress 主題開發中，自定義選單功能自 3.0 版本引入以來，已成為構建靈活導航結構的標準方式。掌握以下三個核心函數，即可完整掌控選單的註冊、顯示與自定義：

• register_nav_menus()：批量註冊導航選單位置（推薦使用複數形式，避免重複調用）
• register_nav_menu()：單一選單位置註冊
• wp_nav_menu()：前端輸出選單 HTML 結構

實作步驟詳解

1. 在 functions.php 註冊選單位置

建議一次性註冊多個選單位置，鍵值為內部調用標識（英文），值為後台顯示名稱：

register_nav_menus( array(
    'primary'   => '主導航',
    'secondary' => '次導航',
    'footer'    => '頁腳導航'
) );

2. 後台配置選單內容

進入「外觀 → 選單」，創建新選單並勾選對應的「顯示位置」。可拖拽調整層級、添加頁面/分類/自定義鏈接，支援多級下拉結構。

3. 模板中調用輸出

在 header.php、footer.php 或側邊欄模板中，按需調用：

// 輸出主導航
wp_nav_menu( array( 'theme_location' => 'primary' ) );

// 輸出頁腳導航，自定義容器標籤為 nav
wp_nav_menu( array(
    'theme_location' => 'footer',
    'container'      => 'nav',
    'menu_class'     => 'footer-nav'
) );

進階優化：精簡輸出的 CSS 類別

預設輸出的 <li> 擁有大量類別（如 menu-item-type-post_type），影響代碼可讀性。通過 nav_menu_css_class 過濾器僅保留必要類別：

add_filter( 'nav_menu_css_class', function( $classes ) {
    $allowed = array( 'current-menu-item', 'current-menu-ancestor', 'menu-item-has-children' );
    return array_intersect( $classes, $allowed );
} );

保留 current-menu-item 可維持當前頁面高亮樣式，其他語義類別按需保留。

常見陷阱與解決方案

未分配選單時的預設行為

若某位置未指定選單，wp_nav_menu() 預設回調 wp_page_menu() 輸出所有頁面。解決方法：在後台創建一個空選單並分配給該位置，或顯式設置 'fallback_cb' => '__return_false' 禁用回調。

深度控制輸出結構

若需完全自定義 HTML（如加入圖標、特殊屬性），請繼承 Walker_Nav_Menu 類並傳遞給 'walker' 參數，雖較複雜但可實現像素級控制。

總結

WordPress 自定義選單系統將導航管理從硬編碼模板中解脫，賦予內容編輯者可視化配置能力。開發者只需：註冊位置 → 模板調用 → 後台配置 三步走，即可構建可維護、可擴展的導航架構。善用過濾器精簡輸出、理解 fallback 機制，能避免 90% 的常見問題。