分析 `wp_nav_menu()` 函数的源码，它是如何与 `wp_get_nav_menu_items()` 配合渲染导航菜单的？ - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

好的，诸位观众老爷们，今天咱们就来唠唠 WordPress 导航菜单的那些事儿。别看这玩意儿天天用，背后的水可深着呢！特别是 wp_nav_menu() 和 wp_get_nav_menu_items() 这俩哥们儿，配合得那叫一个天衣无缝。今天咱就扒开它们的底裤，看看它们是怎么合伙把菜单给渲染出来的。

开场白：导航菜单的江湖地位

在 WordPress 的世界里，导航菜单可是个顶梁柱。用户想去哪儿，全靠它指路。一个好的导航菜单，能让你的网站体验蹭蹭上涨，用户粘性嗖嗖提升。所以，搞懂导航菜单的渲染机制，那是每个 WordPress 开发者必备的技能。

正文：深入 wp_nav_menu() 的核心

wp_nav_menu()，顾名思义，就是用来显示导航菜单的函数。它接受一个数组作为参数，这个数组里包含了各种配置选项，比如菜单的 ID、菜单的容器、菜单的样式等等。

先来看看它的基本用法：

<?php
wp_nav_menu( array(
    'theme_location' => 'primary', // 主题位置，需要在主题的 functions.php 中注册
    'menu_class'     => 'nav-menu',  // 菜单的 CSS 类名
    'menu_id'        => 'primary-menu', // 菜单的 ID
    'container'      => 'div',      // 菜单的容器标签
    'container_class' => 'menu-primary-container', // 容器的 CSS 类名
    'depth'          => 2,          // 菜单的深度，2 表示显示两级菜单
    'fallback_cb'    => 'wp_page_menu', // 如果菜单不存在，使用哪个回调函数
));
?>

这只是个简单的例子，wp_nav_menu() 的参数选项多得能绕地球一圈。不过别慌，咱们慢慢来。

wp_nav_menu() 的内部运作流程

参数解析： wp_nav_menu() 首先会解析你传入的参数，并合并默认参数，形成一个最终的参数数组。
菜单获取： 根据你传入的参数，wp_nav_menu() 会尝试获取指定的菜单。如果 theme_location 参数有效，它会根据主题位置来查找菜单。如果 menu 参数有效，它会根据菜单名称、ID 或 slug 来查找菜单。
菜单项获取： 重点来了！如果找到了菜单，wp_nav_menu() 就会调用 wp_get_nav_menu_items() 函数来获取菜单项。
菜单项处理： wp_get_nav_menu_items() 返回的是一个包含菜单项对象的数组。wp_nav_menu() 会对这些菜单项进行处理，比如添加 CSS 类名、生成 HTML 结构等等。
菜单渲染： 最后，wp_nav_menu() 会根据你传入的参数，将菜单项渲染成 HTML 代码，并输出到页面上。

wp_get_nav_menu_items()：菜单项的挖掘机

wp_get_nav_menu_items() 的作用很简单，就是根据菜单 ID 获取菜单项。但它的实现却相当复杂，因为它需要从数据库中查询菜单项，并对菜单项进行排序、过滤等处理。

<?php
$menu_id = 3; // 菜单 ID
$menu_items = wp_get_nav_menu_items( $menu_id );

if ( $menu_items ) {
    foreach ( $menu_items as $menu_item ) {
        // 处理每个菜单项
        echo $menu_item->title; // 菜单项标题
        echo $menu_item->url;   // 菜单项 URL
        echo $menu_item->menu_order; // 菜单项顺序
        echo $menu_item->parent; // 父级菜单项 ID
        // ...更多属性
    }
}
?>

wp_get_nav_menu_items() 的内部运作流程

菜单 ID 校验： wp_get_nav_menu_items() 首先会校验传入的菜单 ID 是否有效。
缓存检查： 为了提高性能，wp_get_nav_menu_items() 会先检查缓存中是否已经存在该菜单的菜单项。如果存在，则直接从缓存中读取。
数据库查询： 如果缓存中不存在，wp_get_nav_menu_items() 就会从数据库中查询菜单项。它会查询 wp_posts 表和 wp_postmeta 表，并将查询结果组合成一个包含菜单项对象的数组。
菜单项排序： wp_get_nav_menu_items() 会根据菜单项的 menu_order 属性进行排序，确保菜单项按照正确的顺序显示。
菜单项过滤： wp_get_nav_menu_items() 还会对菜单项进行过滤，比如排除隐藏的菜单项、排除没有权限访问的菜单项等等。
缓存存储： 最后，wp_get_nav_menu_items() 会将查询结果存储到缓存中，以便下次快速访问。

wp_nav_menu() 和 wp_get_nav_menu_items() 的配合

现在，咱们来捋一捋 wp_nav_menu() 和 wp_get_nav_menu_items() 是如何配合的。

wp_nav_menu() 接收参数，确定要显示的菜单。
wp_nav_menu() 调用 wp_get_nav_menu_items() 获取菜单项。
wp_get_nav_menu_items() 从数据库或缓存中获取菜单项，并进行排序和过滤。
wp_get_nav_menu_items() 将菜单项返回给 wp_nav_menu()。
wp_nav_menu() 对菜单项进行处理，生成 HTML 代码。
wp_nav_menu() 将 HTML 代码输出到页面上。

用一张表格来总结一下：

函数	作用	内部流程
`wp_nav_menu()`	显示导航菜单	1. 参数解析；2. 菜单获取；3. 调用 `wp_get_nav_menu_items()`；4. 菜单项处理；5. 菜单渲染。
`wp_get_nav_menu_items()`	根据菜单 ID 获取菜单项	1. 菜单 ID 校验；2. 缓存检查；3. 数据库查询；4. 菜单项排序；5. 菜单项过滤；6. 缓存存储。

代码示例：自定义菜单项的输出

有时候，你可能需要自定义菜单项的输出，比如添加一些额外的 HTML 属性、修改菜单项的链接等等。这时，你可以使用 wp_nav_menu_objects 过滤器。

<?php
function my_custom_nav_menu_item( $items, $args ) {
    foreach ( $items as $item ) {
        // 添加自定义属性
        $item->atts['data-custom'] = 'my-value';

        // 修改菜单项的链接
        if ( $item->title == 'Home' ) {
            $item->url = '/my-home-page';
        }
    }
    return $items;
}
add_filter( 'wp_nav_menu_objects', 'my_custom_nav_menu_item', 10, 2 );
?>

这个例子中，我们使用 wp_nav_menu_objects 过滤器来修改菜单项。我们为每个菜单项添加了一个 data-custom 属性，并将 Home 菜单项的链接修改为 /my-home-page。

高级技巧：菜单项的层级结构

wp_get_nav_menu_items() 返回的菜单项数组是扁平的，没有层级结构。如果你需要构建菜单项的层级结构，你需要自己进行处理。

<?php
function build_menu_tree( $menu_items, $parent_id = 0 ) {
    $tree = array();
    foreach ( $menu_items as $item ) {
        if ( $item->menu_item_parent == $parent_id ) {
            $children = build_menu_tree( $menu_items, $item->ID );
            if ( $children ) {
                $item->children = $children;
            }
            $tree[] = $item;
        }
    }
    return $tree;
}

$menu_id = 3;
$menu_items = wp_get_nav_menu_items( $menu_id );
$menu_tree = build_menu_tree( $menu_items );

// 打印菜单树
function print_menu_tree( $tree ) {
    echo '<ul>';
    foreach ( $tree as $item ) {
        echo '<li><a href="' . $item->url . '">' . $item->title . '</a>';
        if ( isset( $item->children ) ) {
            print_menu_tree( $item->children );
        }
        echo '</li>';
    }
    echo '</ul>';
}

print_menu_tree( $menu_tree );
?>

这个例子中，我们定义了一个 build_menu_tree() 函数，用于构建菜单项的层级结构。我们还定义了一个 print_menu_tree() 函数，用于打印菜单树。

性能优化：缓存的妙用

导航菜单的性能优化非常重要，特别是对于大型网站来说。wp_get_nav_menu_items() 已经使用了缓存，但你还可以采取一些额外的措施来提高性能。

对象缓存： 使用对象缓存可以有效地缓存菜单项数据，避免重复查询数据库。
瞬态： 使用瞬态可以缓存 HTML 代码片段，避免重复生成 HTML 代码。
CDN： 使用 CDN 可以将菜单资源分发到全球各地，提高访问速度。

常见问题解答

菜单不显示： 检查主题是否注册了 theme_location，检查菜单是否被分配到该位置，检查菜单是否包含菜单项。
菜单样式错乱： 检查 CSS 样式是否正确，检查是否有 CSS 冲突。
菜单项链接错误： 检查菜单项的 URL 是否正确，检查是否有 URL 重定向。

总结：掌握导航菜单，走向人生巅峰

通过今天的学习，相信大家对 wp_nav_menu() 和 wp_get_nav_menu_items() 的配合已经有了更深入的了解。掌握了导航菜单的渲染机制，你就可以更加灵活地定制导航菜单，提升网站的用户体验。

记住，熟练掌握 WordPress 的底层机制，是成为一名优秀 WordPress 开发者的必经之路。希望今天的讲座能对你有所帮助，祝你在 WordPress 的世界里越走越远，早日走向人生巅峰！

最后的彩蛋：Walker 类的高级用法

如果你想对菜单的 HTML 结构进行更精细的控制，可以使用 Walker 类。Walker 类是一个抽象类，你可以继承它并重写其中的方法，来实现自定义的菜单 HTML 结构。

<?php
class My_Custom_Walker_Nav_Menu extends Walker_Nav_Menu {
    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;

        $args = apply_filters( 'nav_menu_item_args', $args, $item, $depth );

        $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 .'>';

        $atts = array();
        $atts['title']  = ! empty( $item->attr_title ) ? $item->attr_title : '';
        $atts['target'] = ! empty( $item->target )     ? $item->target     : '';
        $atts['rel']    = ! empty( $item->xfn )        ? $item->xfn        : '';
        $atts['href']   = ! empty( $item->url )        ? $item->url        : '';

        $atts = apply_filters( 'nav_menu_link_attributes', $atts, $item, $args, $depth );

        $attributes = '';
        foreach ( $atts as $attr => $value ) {
            if ( ! empty( $value ) ) {
                $value = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value );
                $attributes .= ' ' . $attr . '="' . $value . '"';
            }
        }

        $title = apply_filters( 'the_title', $item->title, $item->ID );

        $title = apply_filters( 'nav_menu_item_title', $title, $item, $args, $depth );

        $item_output = $args->before;
        $item_output .= '<a'. $attributes .'>';
        $item_output .= $args->link_before . $title . $args->link_after;
        $item_output .= '</a>';
        $item_output .= $args->after;

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

wp_nav_menu( array(
    'theme_location' => 'primary',
    'walker' => new My_Custom_Walker_Nav_Menu(),
));
?>

这个例子中，我们创建了一个 My_Custom_Walker_Nav_Menu 类，继承了 Walker_Nav_Menu 类，并重写了 start_el() 方法。start_el() 方法用于生成每个菜单项的 HTML 代码。通过重写 start_el() 方法，我们可以自定义菜单项的 HTML 结构。

好了，今天的讲座就到这里了。希望大家能够好好消化今天的内容，并在实践中不断探索，成为一名真正的 WordPress 大师！

发表回复 取消回复

发表回复取消回复