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

注册菜单

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

register_nav_menus(array(

'PrimaryMenu'=>'导航',

'friendlinks'=>'友情链接',

'footer_nav'=>'页脚导航'));

add_theme_support('nav_menus');

'PrimaryMenu'=>'导航'

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

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

创建菜单

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

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

注册导航栏

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

引用菜单

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

<?php

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

) );

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

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

最简单的用法

<?php

wp_nav_menu( array( 'theme_location'=>'PrimaryMenu', 'depth' => 0) );

输出结果为：

</ul>

</li>

</ul>

</div>

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

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

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

<?php

wp_nav_menu( array(

'theme_location'=>'PrimaryMenu',

'container' => 'div',

'container_class' => 'divclass',

'container_id' => 'divid',

'depth' => 0

));

输出结果

</ul>

</li>

</ul>

</div>

修改ul的class和id

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

<?php

wp_nav_menu( array(

'theme_location'=>'PrimaryMenu',

'menu_class' => 'menuclass', //ul节点class值

'menu_id' => 'menuid', //ul节点id值

'depth' => 0

));

输出结果

</ul></li>

</ul>

</div>

menu参数的使用

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

然后如下设置

<?php

wp_nav_menu( array(

'theme_location'=>'PrimaryMenu',

'menu' => 'nav1', //期望显示的菜单（输入名称或菜单id）

'depth' => 0

));

输出结果

</ul>

</div>

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

插入文本参数的使用

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

<?php

wp_nav_menu( array(

'theme_location'=>'PrimaryMenu',

'before' => '1', //链接前文本

'after' => '2', //链接后文本

'link_before' => '3', //链接文本前

'link_after' => '4',//链接文本后

'depth' => 0

));

示例输出如下

………………

link

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

items_wrap参数的使用

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

<?php

wp_nav_menu( array(

'theme_location'=>'PrimaryMenu',

'items_wrap' => '<ul id="ulid" class="ulclass">%3$s</ul>',

'depth' => 0

));

参数：

%1$s：最外层容器(由参数container控制)的class名，即参数container_class的值

%2$s：次一层容器class名，默认为menu，即参数menu_class的值

%3$s：菜单内容

输出结果

………………

</ul>

</div>

去除ul标签

<?php

wp_nav_menu( array(

'theme_location'=>'PrimaryMenu',

'items_wrap' => '%3$s',

'depth' => 0

));

输出结果

…………

</div>

关于其他参数

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

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

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

去除或保留菜单多余类名

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

add_filter('nav_menu_css_class', 'my_css_attributes_filter', 100, 1);

add_filter('nav_menu_item_id', 'my_css_attributes_filter', 100, 1);

add_filter('page_css_class', 'my_css_attributes_filter', 100, 1);

function my_css_attributes_filter($var) {

return is_array($var) ? array_intersect($var, array('current-menu-item','current-post-ancestor','current-menu-ancestor','current-menu-parent')) : '';

}

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

构造多级菜单

通过上述例子，很明显默认二级菜单的类名为sub-menu

那么，如果要构造更多级的菜单，以及要修改类名，该怎么办呢？

其实这个可以通过Walker参数来设置

这个参数用于调用一个对象定义显示导航菜单

默认调用的就是Walker_ Nav_Menu这个类

所以我们也可以自己写一个类，来构造多级菜单

例如

class new_walker extends Walker_Nav_Menu

{

function start_lvl( &$output, $depth = 0, $args = array() ) {

$indent = str_repeat("\t", $depth);

$output .= "\n$indent<ul class=\"child-menu\">\n";

}

调用方法

<?php

wp_nav_menu( array(

'theme_location'=>'PrimaryMenu',

'walker' => new new_walker(),

'fallback_cb' => '',

'depth' => 0

));

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

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

示例如下：

<?php

function start_lvl( &$output, $depth = 0, $args = array() ) {

if( $depth == 0 ){

$output .= '<ul class="sub-menu">';

}else{

$output .= '<ul class="third-menu">';

}

<?php

function end_lvl( &$output, $depth = 0, $args = array() ) {

if( $depth == 0 ){

$output .= "</ul>";

}else{

$output .= '</ul>';

}

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

Wordpress菜单函数wp_nav_menu各参数详解及示例的更多相关文章

WordPress菜单函数wp_nav_menu()详细介绍
导航菜单函数wp_nav_menu()进行详细的说明. 1.wp_nav_menu()函数介绍: worpdress发展到3.0以后增加了一个自定义菜单函数wp_nav_menu(),使得wordpr ...
[js高手之路] es6系列教程 - 函数的默认参数详解
在ES6之前,我们一般用短路表达式处理默认参数 function show( a, b ){ var a = a || 10; var b = b || 20; console.log( a, b ) ...
setsockopt函数功能及参数详解
Socket描述符选项[SOL_SOCKET] #include <sys/socket.h> int setsockopt( int socket, int level, int opt ...
curl常用参数详解及示例
curl简介 curl是一个开源的命令行工具,它基于网络协议,对指定URL进行网络传输,得到数据后不任何具体处理(如:html的渲染等),直接显示在"标准输出"(stdout)上. ...
Nginx配置参数详解参考示例
user nobody; worker_processes 2; events{ worker_connections 1024; } http{ #设置默认类型为二进制流 default_type ...
WordPress函数：get_bloginfo()用法详解
描述返回你博客的信息,这些信息可以用在任何地方的 PHP 代码中.这个函数,和 bloginfo() 一样,可以用来在模板文件的任何地方显示你博客的信息. 用法 <?php $bloginfo ...
PHP date函数参数详解
PHP date函数参数详解作者: 字体:[增加减小] 类型:转载 time()在PHP中是得到一个数字,这个数字表示从1970-01-01到现在共走了多少秒,很奇怪吧不过这样方便计 ...
Python函数参数详解
Python函数参数详解形参与实参什么是形参在定义函数阶段定义的参数称之为形式参数,简称形参,相当于变量名. 什么是实参在调用函数阶段传入的值称为实际参数,简称实参.相当于"变量值& ...
C/C++子函数参数传递，堆栈帧、堆栈参数详解
本文转载自C/C++子函数参数传递,堆栈帧.堆栈参数详解导语因为参数传递和汇编语言有很大联系,之后会出现较多x86汇编代码. 该文会先讲一下x86的堆栈参数传递过程,然后再分析C/C++子函数是怎 ...

随机推荐

Docker Flie
七.Docker File .dockeringore:打包忽略的文件列表,每行写一个文件的路径,可使用通配符 FROM指令:指定基础镜像 FROM <repository>[:<t ...
js和css文件位置对页面性能的影响
翻译了一篇Performance上的关于页面性能的文章<DecIPhering the critical rendering path>,原文在这里.需要进一步整理和了解有关js.css等 ...
HTTP header parsing errors will be logged at DEBUG level
-- ::-exec-] INFO org.apache.coyote.http11.Http11Processor - Error parsing HTTP request header Note: ...
day04 ---Linux安装Python3
如何linux上安装python3 1.下载源代码,方式有2个, 1.在windows上下载,下载完成后,通过lrzsz工具,或者xftp工具,传输到linux服务器中 2.在linux中直接下载 c ...
策略模式（Strategy
Strategy 无论什么程序,其目的都是解决问题.而为了解决问题,我们又需要编写特定的算法.使用Strategy模式可以整体地替换算法的实现部分.能够整体地替换算法,能让我们轻松地以不同的算法去解决 ...
CAS操作
CAS操作: Compare and Swap,比较并操作,CPU指令,在大多数处理器架构,包括IA32.Space中采用的都是CAS指令,CAS的语义是“我认为V的值应该为A,如果是,那么将V的值更 ...
PHP异步任务worker
1.概述异步任务框架主要包含两个角色: WorkerServer主要负责管理(启动,重启,监控等)worker工作进程. Worker负责从指定消息队列获取任务消息并执行任务. 为了提高worker ...
Jetty项目解压目录设置
Ubuntu14.04 没有在Jetty的根目录下建立work文件夹时,Jetty会默认将项目解压到/var/cache/jetty/data/下,如果在Jetty的根目录下建立work文件夹,jet ...
每天学一点ubuntu指令
2017-03-06apt-get | dpkg -i | apt-cache | add-apt-repository ppa源 | dpkg -S一.apt 给Ubuntu安装软件的一种命令方式a ...
java与模式读后总结
一老规则边看边写书上的代码,磨磨蹭蹭三个多星期终于把一本1000+的java与模式看完了. 于是,在这里贴上自己对每个模式的思考和总结,其实这个东西在我边看边写的时候已经写了一大半,博文再写一次算是 ...

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

Wordpress菜单函数wp_nav_menu各参数详解及示例的更多相关文章

随机推荐

热门专题