WordPress开发

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调用菜单函数,传入一个数组,数组以键值对的方式传入,其中参数:

字段含义
menumain_menu表示你前面注册的那个菜单id,这将告诉这个函数在这里调用哪个菜单。
containerdiv包裹整个菜单的html标签,这里用的div
container_classsliver_main_menu_classdiv的class名称,这里是sliver_main_menu_class
container_idsliver_main_menudiv的id名称,这里是:sliver_main_menu
menu_classsliver_main_menu_ul菜单的class名称,也就是ul标签的class名称,这里使用sliver_main_menu_ul
depth0这表示菜单是否嵌套,0代表输出所有层级,1代表只输出一级菜单……

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

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

技术援助

需要技术援助?点击这里,帮你解决你的所有问题!PS:可能你离大神之间,只差一个我们!!!!

评论已经被关闭。

插入图片