首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
您现在的位置: 程式碼之家 >> 編程語言 >  >> 網頁程式設計 >> PHP 程式設計 >> PHP 相關知識

WordPress 開發筆記:wp_get_nav_menu 與 Walker 類自定義導航

     編輯:PHP 相關知識

WordPress 開發筆記:wp_get_nav_menu 與 Walker 類自定義導航

記錄 WordPress 主題開發中導航菜單的高級用法。

wp_nav_menu 核心參數

參數默認值說明
theme_location''註冊的導航位置(如 primary)
menu''菜單名稱/ID/slug
container'div'ul 父容器標籤(div/nav/false)
container_class'menu-{slug}-container'容器 class
menu_class'menu'ul class
echotrue直接輸出還是返回字符串
fallback_cb'wp_page_menu'無菜單時回調
depth0顯示層級深度(0=全部)
walkernew Walker_Nav_Menu()自定義遍歷類

Walker 類結構

抽象類 Walker 定義樹形結構遍歷:

  • 屬性:$tree_type, $db_fields, $max_pages, $has_children
  • 方法:start_lvl/end_lvl(層級開始/結束)、start_el/end_el(元素開始/結束)、display_element(核心顯示邏輯)、walk(遞歸入口)

自定義 Walker 實戰

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()]);

Shortcode 機制

// 註冊
add_shortcode('my_btn', function() { return '<button>Click</button>'; });

// 後台編輯器使用
[my_btn]

// 代碼中執行
echo do_shortcode('[my_btn]');

掌握 Walker 類可完全控制菜單 HTML 結構,配合 Shortcode 實現編輯器可視化組件化。

  1. 上一篇文章:
  2. 下一篇文章:
Copyright © 程式碼之家 All Rights Reserved