本文主要介绍wordpress多级菜单/多级导航的调用方法。使用wp_nav_menu()函数中walker自定义类。

本文核心内容来自WP官方开发社区的用户笔记：https://developer.wordpress.org/reference/functions/wp_nav_menu/，作者是wordpress资深开发者Drew Jaynes。

国内文章一大抄，百度搜了一下，都是相同的，也不注明出处，百度收录这些真是一点意义都没有。无奈去官方看了，归纳于此，以备查用。然而我想说一下，wordpress设计的太复杂了，我真是没理解这种设计的便捷在哪里。

worpdress调用单级菜单，只用一个wp_nav_menu()函数即可，非常简便不说了。多级调用的话，需要使用这个函数里面一个叫walker的自定义类。直接上例子然后再解释，例子核心内容来自于上面标注的地址，我给更改了一些，方便理解，注释写的超清晰。

//如果存在一个叫header-menu的菜单
if ( has_nav_menu( 'header-menu' ) ) {
    //一个常规的wp_nav_menu函数，注意看walker部分
    wp_nav_menu( array(
    'theme_location' => 'header-menu',
    'menu'              => 'header-menu',
    'depth'             => 0,
    'container'         => '',
    'container_class'   => '',
    'menu_class'        => 'super',
    'items_wrap'        => '<ul id="%1$s" class="%2$s">%3$s</ul>',
    'walker' => new Header_Menu_Walker() ) ); //这里new一个新实例

}

/**
 * Header_Menu_Walker类
 * 这类名当然你随意了
 */
class Header_Menu_Walker extends Walker_Nav_Menu {

    /**
     * start_lvl函数
     * 这函数主要处理ul，如果ul有一些特殊的样式，修改这里
     * 他这里面的$depth就是层级，一级二级三级
     * $args是上面wp_nav_menu()函数定义的那个数组
     *
     */
    function start_lvl( &$output, $depth = 0, $args = array() ) {
        $indent = ( $depth > 0  ? str_repeat( "\t", $depth ) : '' ); // 缩进
        $display_depth = ( $depth + 1); // 层级默认是0级，这里+1为了从1开始算
        $classes = array(
            'sub-menu', //ul是个子菜单的时候，添加这个样式
            ( $display_depth % 2  ? 'menu-odd' : 'menu-even' ), //子菜单奇数加样式menu-odd,偶数加样式menu-even
            ( $display_depth >=2 ? 'sub-sub-menu' : '' ),   //三级菜单的时候，添加这个样式
            'menu-depth-' . $display_depth, //这样式主要能看出当前菜单的层级，menu-depth-2是二级呗
        );
        $class_names = implode( ' ', $classes ); //用空格分割多个样式名

        $output .= "\n" . $indent . '<ul class="' . $class_names . '">' . "\n"; //把刚才定义的，那么多的样式，写到ul里面
    }

    /**
     * start_el函数
     * 主要处理li和里面的a
     * $depth和$args同上
     *
     * @param string $output Passed by reference. Used to append additional content.
     * @param object $item   Menu item data object.
     * @param int    $depth  Depth of menu item. Used for padding.
     * @param array  $args   An array of arguments. @see wp_nav_menu()
     * @param int    $id     Current item ID.
     */
    function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
        global $wp_query;
        $indent = ( $depth > 0 ? str_repeat( "\t", $depth ) : '' ); // 缩进

        // 定义li的样式
        $depth_classes = array(
            ( $depth == 0 ? 'main-menu-item' : 'sub-menu-item' ),   //一级的li，就main-menu-item，其余全部sub-menu-item
            ( $depth >=2 ? 'sub-sub-menu-item' : '' ),  //三级的li，添加这个样式
            ( $depth % 2 ? 'menu-item-odd' : 'menu-item-even' ),    //奇数加样式menu-item-odd,偶数加样式menu-item-even
            'menu-item-depth-' . $depth,    //层级同上
        );
        $depth_class_names = esc_attr( implode( ' ', $depth_classes ) );

        $classes = empty( $item->classes ) ? array() : (array) $item->classes;
        $class_names = esc_attr( implode( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) ) ); //这句我没看懂，不知道是在干啥

        // 把样式合成到li里面
        $output .= $indent . '<li id="nav-menu-item-'. $item->ID . '" class="' . $depth_class_names . ' ' . $class_names . '">';

        // 处理a的属性
        $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        ) .'"' : '';
        $attributes .= ' class="menu-link ' . ( $depth > 0 ? 'sub-menu-link' : 'main-menu-link' ) . '"';

        //添加a的样式
        $item_output = sprintf( '%1$s<a%2$s>%3$s%4$s%5$s</a>%6$s',
            $args->before,
            $attributes,
            $args->link_before,
            apply_filters( 'the_title', $item->title, $item->ID ),
            $args->link_after,
            $args->after
        );
        //上面这个item_output我要说一下。这里写的有点死。
        //如果一级菜单是<a><span>我是菜单</span></a>
        //然而其他级菜单是<a><strong>我是菜单</strong></a>
        //这样的情况，$args->link_before是固定值就不行了，要自行判断
        //$link_before = $depth == 0 ? '<span>' : '<strong>';
        //$link_after = $depth == 0 ? '</span>' : '</strong>';
        //类似这个意思。
        $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
    }
}