WordPress菜单输出

哈哈哈，不得不说我是真的能鸽啊！！
这是一篇来自2022年10月份的文章了。
此文章于2023年4月10日正式编写！！
那么，我们开始教程吧！！

这次要教学的就是如何添加Wordpress的菜单选项？？？
Wordpress的很多函数都不是一次性全部展现出来的，他有极多部分是没有输出的，比如这个【菜单】选项？
如果你是主题开发者你会发现你翻遍Wordprsss后台就是看不到一个【菜单】选项的影子。
其实道理很简单，你没有输出【菜单】选项，说白点就是WP官方没有直接输出菜单设置。
我们要如何调用出菜单设置呢？？？则需要用到下方的代码来给自己添加菜单！！

register_nav_menus(array(
    'PrimaryMenu'=>'导航',
// 'PrimaryMenu'|是菜单的英文名字也相当于他的ID或者理解为他的专属Key|这里我就简称为【Key】吧
// '导航',|是后台【外观>菜单】设置中的菜单名字，你可以输出英文名或者中文名？都是可以的！
//一行代表一个菜单选择，如果你写了四个那么后台的【外观>菜单】设置中的菜单选择就有四个，自行搭配使用
));

这段代码放在你的【functions.php】文件当中即可哦~这样你就可以在后台的【外观】中找到【菜单】设置选项了！
接下来就是如何在我们想要加载的地方调用呢？？？
其实这蛮简单的呢

 if (isset($locations['PrimaryMenu'])) {
            wp_nav_menu(array(
                    'menu' => 'nav-top',
                    'theme_location' => 'nav-top',
                    'depth' => 3,
                    'container' => 'nav',
                    'container_class' => 'maple',
                    'menu_class' => 'box',
                    'items_wrap' => '<ul class="%2$s">%3$s</ul>',
                    'walker' => '',
                )
            );
        }

将这段代码放在你要输出导航栏的文件中即可
如果你想调用其他的菜单栏只需要把$locations['PrimaryMenu']中的【PrimaryMenu】替换即可！
切记这只能替换成其他等待【Key】而不是输出的中文or英文名

这下面的内容就是导航栏的高级用法了~
喜欢折腾的可以看一下~

//这里是全局解释
wp_nav_menu( array(
    'theme_location'  => '',//导航别名
    'menu'   => '', //期望显示的菜单
    'container'  => 'div',  //容器标签
    'container_class' => '',//ul父节点class值
    'container_id'  => '',  //ul父节点id值
    'menu_class'   => 'menu',   //ul节点class值
    'menu_id'   => '',  //ul节点id值
    'echo'  => true,//是否输出菜单，默认为真
    'fallback_cb' => 'wp_page_menu',  //菜单不存在时，返回默认菜单，设为false则不返回
    'before' => '', //链接前文本
    'after'  => '', //链接后文本
    'link_before'  => '',   //链接文本前
    'link_after'  => '',//链接文本后
    'items_wrap'  => '<ul id="%1$s" class="%2$s">%3$s</ul>',   //如何包装列表
    'depth' => 0,   //显示几级菜单栏，默认0
    'walker' => ''  //自定义walker
  ) );

//这里是菜单栏的高级用法看各行解释吧~ 
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 );
    }
}

在你需要哦的地方写上这个代码即可！
大致内容就是这些了，运用你高超的储备知识来编写你的主题吧！！！