記錄 WordPress 主題開發中導航菜單的高級用法。
| 參數 | 默認值 | 說明 |
|---|---|---|
| theme_location | '' | 註冊的導航位置(如 primary) |
| menu | '' | 菜單名稱/ID/slug |
| container | 'div' | ul 父容器標籤(div/nav/false) |
| container_class | 'menu-{slug}-container' | 容器 class |
| menu_class | 'menu' | ul class |
| echo | true | 直接輸出還是返回字符串 |
| fallback_cb | 'wp_page_menu' | 無菜單時回調 |
| depth | 0 | 顯示層級深度(0=全部) |
| walker | new Walker_Nav_Menu() | 自定義遍歷類 |
抽象類 Walker 定義樹形結構遍歷:
$tree_type, $db_fields, $max_pages, $has_childrenstart_lvl/end_lvl(層級開始/結束)、start_el/end_el(元素開始/結束)、display_element(核心顯示邏輯)、walk(遞歸入口)class My_Walker extends Walker_Nav_Menu {
function start_el(&$output, $item, $depth=0, $args=[], $id=0) {
$output .= '<li class="my-class">';
$output .= '<a href="' . $item->url . '">' . $item->title . '</a>';
}
function end_el(&$output, $item, $depth=0, $args=[]) {
$output .= '</li>';
}
}
// 使用
wp_nav_menu(['walker' => new My_Walker()]);
// 註冊
add_shortcode('my_btn', function() { return '<button>Click</button>'; });
// 後台編輯器使用
[my_btn]
// 代碼中執行
echo do_shortcode('[my_btn]');
掌握 Walker 類可完全控制菜單 HTML 結構,配合 Shortcode 實現編輯器可視化組件化。