Wordpress菜单函数wp_nav_menu各参数详解及示例

注册菜单

首先要注册菜单,将以下函数添加至function.php函数里

‘PrimaryMenu’=>’导航’

这个表示导航栏的名称,左边是别名,右边是名称。别名会用在导航栏的调用上,名称则显示在菜单后台页面上

添加上述函数后,进入wp后台,在左侧菜单的“外观”里即多了“菜单”选项

创建菜单

创建一个名称为“导航栏”的菜单

可以看到主题位置显示了三个位置,即刚才我们添加到function.php的函数里设置的

在后台创建了菜单,并勾选主题位置后,开始下一步

引用菜单

在主题文件对应位置,引用导航栏。需要用到下面这个函数

这些是几乎所有的参数,还有一个item_space参数没写进去,觉得没什么必要

接着来讲讲这些参数如何使用,并给出了相应例子,以供参考

最简单的用法

输出结果为:

这里的类名带有中文,即在后台创建菜单的名称。这是一个默认输出的导航菜单结构

修改最外层容器标签及类名和id

以下这几个参数,可以修改最外层容器的标签,以及它的类名和id,默认为div

输出结果

修改ul的class和id

导航菜单的次层容器默认为ul,当然也是可改的,后面会讲到。这里给出了如何修改ul的类名和id

输出结果

menu参数的使用

menu参数是用来调用想显示的菜单。一般我们都是在后台操作,创建好菜单,勾选了主题位置后,该位置即使用这个菜单。如果有多菜单的情况下,可以通过menu参数去选择,一般输入菜单名称或菜单id。例如我在后台又创建了一个名为nav1的菜单

然后如下设置

输出结果

可以看到已经不是输出刚才的菜单了

插入文本参数的使用

通过这四个参数,可以添加文本到导航栏的文本中

示例输出如下

当然,不止是文本,也可以输出html标签,所以灵活使用这四个参数,可以打造出别具一格的导航菜单

items_wrap参数的使用

这个参数控制次层容器,默认为ul标签,通过修改该参数,可以输出不同的菜单结构

输出结果

去除ul标签

输出结果

关于其他参数

像depth这个参数,默认0就行了

还有其他参数因为几乎很少用到,所以就不讲了

具体内容可以查阅官方文档:https://developer.wordpress.org/reference/functions/wp_nav_menu/

去除或保留菜单多余类名

将以下代码添加至function.php文件即可

需要去除什么,保留什么,根据使用情况,修改上面的代码即可

构造多级菜单

通过上述例子,很明显默认二级菜单的类名为sub-menu。那么,如果要构造更多级的菜单,以及要修改类名,该怎么办呢?其实这个可以通过Walker参数来设置,这个参数用于调用一个对象定义显示导航菜单,默认调用的就是Walker_ Nav_Menu这个类。所以我们也可以自己写一个类,来构造多级菜单

例如

调用方法

上面只是一个简单例子,通过这个方法,可以自己写一个菜单并调用

如果只是简单修改,可以更改\wp-includes\nav-menu-template.php中默认的Walker_Nav_Menu函数

示例如下:

按照以上代码,则生成二级菜单时类名为sub-menul,三级菜单为third-menu

那么,以上就是wp_ nav_menu函数的详解及示例了。已经写得尽量详细了,掌握了这些参数的使用,相信实现任何菜单都不在话下。刚接触wordpress时,最早碰到的就是这个函数,吃到了不少苦头,为了做一个菜单功能花了很长时间。现在,终于是理解了这个函数的几乎全部用法,也希望能帮到大家

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180912G1UKVO00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券