深入理解 `wp_nav_menu()` 函数的源码，它如何使用 `Walker` 类来递归渲染菜单项？ - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位观众，掌声欢迎！今天咱们来聊聊 WordPress 菜单背后的英雄——wp_nav_menu() 函数，以及它神秘的搭档 Walker 类。这俩哥们儿是怎么配合，把一堆菜单项给你安排得明明白白的，可不是随便点点鼠标就完事儿的。咱们要扒开它的皮，看看里面的血肉，保证让你以后用菜单的时候，腰杆子更硬！

开场白：菜单这玩意儿，可不简单！

话说，网站菜单，那是门面担当啊！用户进来第一眼就看它，能不能快速找到想要的东西，全靠它了。WordPress 提供了 wp_nav_menu() 这个函数，让你可以轻松创建和管理菜单。但是，你有没有好奇过，它是怎么把菜单项，一层一层地，像俄罗斯套娃一样，给你套出来的呢？

答案就在 Walker 类身上！

第一幕：wp_nav_menu()：总指挥，发号施令！

首先，我们得认识一下 wp_nav_menu() 这个总指挥。它的作用是：

接收指令： 接收你传给它的各种参数，比如菜单 ID、容器标签、CSS 类等等。
准备数据： 获取菜单项的数据，这些数据包括菜单项的 ID、标题、链接、父级 ID 等等。
委派任务： 创建一个 Walker 类的实例，然后把数据和一些参数交给它，让它去渲染菜单。
返回结果： 接收 Walker 类渲染好的 HTML 代码，然后返回给你，让你在页面上显示出来。

让我们来看一段简化的 wp_nav_menu() 函数的代码（真正的 wp_nav_menu() 比这复杂得多，这里只保留了关键部分）：

function my_simplified_wp_nav_menu( $args = array() ) {
    // 1. 合并默认参数和用户传入的参数
    $defaults = array(
        'menu'            => '', // 菜单名称、ID 或 slug
        'container'       => 'div', // 容器标签
        'container_class' => 'menu-container', // 容器 CSS 类
        'menu_class'      => 'menu', // 菜单 CSS 类
        'walker'          => new Walker_Nav_Menu(), // Walker 类的实例
    );

    $args = wp_parse_args( $args, $defaults );

    // 2. 获取菜单对象
    $menu = wp_get_nav_menu_object( $args['menu'] );

    // 如果菜单不存在，就返回错误
    if ( ! $menu ) {
        return false;
    }

    // 3. 获取菜单项
    $menu_items = wp_get_nav_menu_items( $menu->term_id );

    // 4. 创建容器标签
    $output = '<' . $args['container'] . ' class="' . esc_attr( $args['container_class'] ) . '">';
    $output .= '<ul class="' . esc_attr( $args['menu_class'] ) . '">';

    // 5. 调用 Walker 类的 `walk()` 方法，开始渲染菜单
    $walker = $args['walker'];
    $output .= walk_nav_menu_tree( $menu_items, 0, (object) $args ); //注意这里

    $output .= '</ul>';
    $output .= '</' . $args['container'] . '>';

    return $output;
}

注意 walk_nav_menu_tree() 这个函数，它接收菜单项数据、深度和参数，然后调用 Walker 类的 walk() 方法，真正开始渲染菜单。

第二幕：Walker 类：幕后英雄，递归渲染！

Walker 类是一个抽象类，它的作用是：

定义结构： 定义了渲染树形结构数据的基本方法。
递归渲染： 通过递归的方式，遍历菜单项，并生成 HTML 代码。
可定制性： 允许你通过继承 Walker 类，自定义菜单的渲染方式。

WordPress 默认提供了一个 Walker_Nav_Menu 类，它继承自 Walker 类，专门用于渲染导航菜单。

Walker_Nav_Menu 类中有几个关键的方法：

start_lvl()：在开始一个子菜单时调用，通常用于输出 <ul> 标签。
end_lvl()：在结束一个子菜单时调用，通常用于输出 </ul> 标签。
start_el()：在开始一个菜单项时调用，用于输出 <li> 标签和链接。
end_el()：在结束一个菜单项时调用，通常用于输出 </li> 标签。

我们来看看 Walker_Nav_Menu 类的简化代码：

class My_Walker_Nav_Menu extends Walker_Nav_Menu { //继承了 Walker_Nav_Menu

    function start_lvl( &$output, $depth = 0, $args = array() ) {
        $indent = str_repeat("t", $depth);
        $output .= "n$indent<ul class="sub-menu">n";
    }

    function end_lvl( &$output, $depth = 0, $args = array() ) {
        $indent = str_repeat("t", $depth);
        $output .= "$indent</ul>n";
    }

    function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
        $indent = ( $depth ) ? str_repeat( "t", $depth ) : '';

        $classes = empty( $item->classes ) ? array() : (array) $item->classes;
        $classes[] = 'menu-item-' . $item->ID;

        $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args, $depth ) );
        $class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';

        $id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args, $depth );
        $id = $id ? ' id="' . esc_attr( $id ) . '"' : '';

        $output .= $indent . '<li' . $id . $class_names .'>';

        $attributes  = ! empty( $item->attr_title ) ? ' title="'  . esc_attr( $item->attr_title ) .'"' : '';
        $attributes .= ! empty( $item->target )     ? ' target="' . esc_attr( $item->target     ) .'"' : '';
        $attributes .= ! empty( $item->xfn )        ? ' rel="'    . esc_attr( $item->xfn        ) .'"' : '';
        $attributes .= ! empty( $item->url )        ? ' href="'   . esc_attr( $item->url        ) .'"' : '';

        $item_output = $args->before;
        $item_output .= '<a'. $attributes .'>';
        $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
        $item_output .= '</a>';
        $item_output .= $args->after;

        $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
    }

    function end_el( &$output, $item, $depth = 0, $args = array() ) {
        $output .= "</li>n";
    }
}

第三幕：递归的魅力：层层递进，抽丝剥茧！

walk_nav_menu_tree() 函数是递归渲染的关键。它接收菜单项数据，然后根据菜单项的父级 ID，构建树形结构。

我们来看一段简化的 walk_nav_menu_tree() 函数的代码：

if ( ! function_exists( 'walk_nav_menu_tree' ) ) {
/**
 * Display a navigation menu.
 *
 * @uses Walker_Nav_Menu
 * @since 3.0.0
 * @param array $items Menu items.
 * @param int $depth Max depth.
 * @param array|object $args An array of arguments. @see wp_nav_menu()
 * @return string Walker_Nav_Menu::walk()
 */
function walk_nav_menu_tree( $items, $depth, $args ) {
    $walker = $args->walker;

    $output = '';

    if ( $depth == -1 ) {
        $top_level_elements = $items;
    } else {
        $top_level_elements = array();
        foreach ( $items as $e ) {
            if ( 0 == $e->menu_item_parent )
                $top_level_elements[] = $e;
        }

        $children_elements = array();
        foreach ( (array) $items as $k => $item ) {
            $children_elements[$item->menu_item_parent][] = $item;
        }
    }

    /**
     * Filters the sorted array of nav menu items before generating the menu's HTML.
     *
     * @since 3.0.0
     *
     * @param array $sorted_menu_items The menu items, sorted by each menu item's menu order.
     * @param object $args An object containing wp_nav_menu() arguments.
     */
    $sorted_menu_items = apply_filters( 'wp_nav_menu_objects', $top_level_elements, $args );

    $output = $walker->walk( $sorted_menu_items, $depth, $args );

    return $output;
}
}

Walker::walk() 方法是真正执行递归渲染的地方。它接收菜单项数组和深度，然后遍历数组，根据菜单项的层级关系，调用 start_lvl()、start_el()、end_el() 和 end_lvl() 方法，生成 HTML 代码。

递归的过程大致如下：

找到顶级菜单项： 从菜单项数组中找到所有父级 ID 为 0 的菜单项，这些是顶级菜单项。
遍历顶级菜单项： 遍历顶级菜单项，对每个菜单项调用 start_el() 方法，输出 <li> 标签和链接。
查找子菜单项： 对于每个顶级菜单项，查找它的子菜单项。
递归调用： 如果有子菜单项，则对子菜单项调用 start_lvl() 方法，输出 <ul> 标签，然后递归调用 walk() 方法，处理子菜单项。
结束子菜单： 递归调用结束后，对子菜单项调用 end_lvl() 方法，输出 </ul> 标签。
结束菜单项： 对顶级菜单项调用 end_el() 方法，输出 </li> 标签。

这个过程会一直重复，直到所有菜单项都被处理完毕。

代码示例：自定义菜单渲染

现在，让我们来写一个简单的例子，演示如何自定义菜单的渲染方式。

假设我们想给每个菜单项添加一个 Font Awesome 图标。我们可以这样做：

class My_Custom_Walker extends Walker_Nav_Menu {
    function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
        // 调用父类的 start_el 方法，获取默认的输出
        parent::start_el( $output, $item, $depth, $args, $id );

        // 在链接前添加 Font Awesome 图标
        $output = str_replace( '<a', '<a><i class="fa fa-home"></i> ', $output ); //这里用 home 图标做演示
    }
}

// 在调用 `wp_nav_menu()` 函数时，指定使用我们自定义的 Walker 类
$args = array(
    'menu'      => 'Main Menu',
    'walker'    => new My_Custom_Walker(),
);

wp_nav_menu( $args );

这段代码会给每个菜单项的链接前添加一个 Font Awesome 图标。

总结：wp_nav_menu() 和 Walker 类的完美配合

wp_nav_menu() 函数和 Walker 类是 WordPress 菜单系统的核心。wp_nav_menu() 负责接收参数、获取数据和委派任务，而 Walker 类负责递归渲染菜单项，生成 HTML 代码。

它们之间的配合，就像一个乐队的指挥和乐手，指挥告诉乐手们演奏什么，乐手们负责演奏出美妙的音乐。

表格总结

组件	作用	关键方法
`wp_nav_menu()`	接收参数，获取菜单数据，创建 `Walker` 实例，委派任务，返回 HTML 代码。	`wp_parse_args()`: 合并参数；`wp_get_nav_menu_object()`: 获取菜单对象；`wp_get_nav_menu_items()`: 获取菜单项；`walk_nav_menu_tree()`: 开始渲染菜单。
`Walker` 类	定义渲染树形结构数据的基本方法，通过递归的方式遍历菜单项，生成 HTML 代码，允许自定义菜单的渲染方式。	`start_lvl()`: 在开始一个子菜单时调用；`end_lvl()`: 在结束一个子菜单时调用；`start_el()`: 在开始一个菜单项时调用；`end_el()`: 在结束一个菜单项时调用；`walk()`: 递归遍历菜单项，调用其他方法生成 HTML 代码。

进阶思考：

如何优化菜单性能？ 比如使用缓存，减少数据库查询。
如何创建多级菜单？ 深入理解 Walker 类的递归原理。
如何使用 wp_nav_menu() 函数的过滤器？ 自定义菜单的各个方面。

结束语：

今天我们一起深入了解了 wp_nav_menu() 函数和 Walker 类，希望能够帮助你更好地理解 WordPress 菜单系统。以后再遇到菜单问题，就不会再手足无措啦！记住，技术的世界里，没有什么是不能理解的，只要你肯花时间去探索。

感谢大家的观看！希望我的讲座能够对你有所帮助。下次有机会，咱们再聊点更有意思的！

发表回复 取消回复

发表回复取消回复