WordPress主题开发：开发WordPress主题菜单

描述

在WordPress的整个主题中若无特必要，菜单都是公共的，因此我们的菜单需要在header.php文件中添加。

开始

开启主题菜单功能

因为我们是做了一个新的主题，一个新的主题默认是没有开启菜单功能的，也就是说在站点后台你是看不见菜单项的。

这时候我们需要在主题的全局函数文件（functions.php）中添加一个菜单，代码如下：

<?php
register_nav_menus( array(
'main_menu' => '这是头部菜单'
));

register_nav_menus()

此函数为WordPress注册菜单函数，此函数接收一个数组，数组为键值对方式，键是菜单名称，在前台调用的时候会用到，值是该菜单的描述用于在后台添加菜单的时候查看。

这个时候我们再次打开网站后台就会发现有菜单功能了，创建菜单之后在左侧把想要的页面放过来，然后保存。

在前台显示菜单

上面我们在主题中添加了一个菜单，现在我们让这个菜单显示在前台，这里使用WordPress封装好的函数函数：wp_nav_menu();

如下：

<?php wp_nav_menu( array(
                'menu'            => 'main_menu',
                'container'       => 'div',
                'container_class' => 'sliver_main_menu_class',
                'container_id'    => 'sliver_main_menu',
                'menu_class'      => 'sliver_main_menu_ul',
                'echo'            => true,
                'fallback_cb'     => 'wp_page_menu',
                'before'          => '',
                'after'           => '',
                'link_before'     => '',
                'link_after'      => '',
                'depth'           => 0,
                'walker'          => ''
            )); ?>

在讲解这个函数之前我们需要先了解它在前台给我们生成了什么。

如下代码，它在前台生成的结构是这个样子的：

<div id="sliver_main_menu" class="sliver_main_menu_class">
  <ul id="menu-%e4%b8%bb%e8%8f%9c%e5%8d%95" class="sliver_main_menu_ul">
    <li id="menu-item-8" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-8">
      <a href="https://zc.inacorner.top/" aria-current="page">首页</a>
    </li>
<li id="menu-item-9" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-9">
  <a href="https://zc.inacorner.top/index.php/sample-page/">示例页面</a>
    </li>
</ul>
</div>

wp_nav_menu()

该函数为WordPress调用菜单函数，传入一个数组，数组以键值对的方式传入，其中参数:

字段	值	含义
menu	main_menu	表示你前面注册的那个菜单id，这将告诉这个函数在这里调用哪个菜单。
container	div	包裹整个菜单的html标签，这里用的div
container_class	sliver_main_menu_class	div的class名称，这里是sliver_main_menu_class
container_id	sliver_main_menu	div的id名称，这里是：sliver_main_menu
menu_class	sliver_main_menu_ul	菜单的class名称，也就是ul标签的class名称，这里使用sliver_main_menu_ul
depth	0	这表示菜单是否嵌套，0代表输出所有层级，1代表只输出一级菜单……

一般我们要用的就是这些参数，其余参数我在开发中基本没有用到过，所以这里便不在注明了，具体详情大家可以去官方文档上面看也行。

最后我们打开网站，就可以看到菜单了，样式有点儿丑，大家可以根据自己的想法美化一下。