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

https://blog.csdn.net/qq_37296622/article/details/82633833

 

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

register_nav_menus(array(
'PrimaryMenu'=>'导航',
'friendlinks'=>'友情链接',
'footer_nav'=>'页脚导航'));
add_theme_support('nav_menus'); 
1
2
3
4
5
‘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
  ) );
?>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
这些是几乎所有的参数,还有一个item_space参数没写进去,觉得没什么必要

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

最简单的用法
<?php 
    wp_nav_menu( array( 'theme_location'=>'PrimaryMenu', 'depth' => 0) );
?> 
1
2
3
输出结果为:

<div class="menu-导航栏-container">
    <ul id="menu-导航栏" class="menu">
    <li id="menu-item-27" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-27"><a href="#">首页</a></li>
    <li id="menu-item-28" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-28"><a href="#">一级导航</a>
    <ul class="sub-menu">   
        <li id="menu-item-29" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-29"><a href="#">二级导航</a></li>
        <li id="menu-item-30" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-30"><a href="#">二级导航1</a></li>
        <li id="menu-item-31" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-31"><a href="#">二级导航2</a></li>
    </ul>
    </li>
    </ul>
</div> 
1
2
3
4
5
6
7
8
9
10
11
12
这里的类名带有中文,即在后台创建菜单的名称。这是一个默认输出的导航菜单结构

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

 <?php 
    wp_nav_menu( array( 
    'theme_location'=>'PrimaryMenu', 
    'container'  => 'div', 
    'container_class' => 'divclass',
    'container_id'  => 'divid', 
    'depth' => 0
    ));
 ?> 
1
2
3
4
5
6
7
8
9
输出结果

<div class="divclass" id="divid">
    <ul id="menu-导航栏" class="menu">
    <li id="menu-item-27" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-27"><a href="#">首页</a></li>
    <li id="menu-item-28" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-28"><a href="#">一级导航</a>
        <ul class="sub-menu">   
            <li id="menu-item-29" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-29"><a href="#">二级导航</a></li>
        </ul>
    </li>
    </ul>
</div> 
1
2
3
4
5
6
7
8
9
10
修改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
    ));
?> 
1
2
3
4
5
6
7
8
输出结果

 <div class="menu-导航栏-container">
    <ul id="menuid" class="menuclass">
    <li id="menu-item-27" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-27"><a href="#">首页</a></li>
    <li id="menu-item-28" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-28"><a href="#">一级导航</a>
        <ul class="sub-menu">   
        <li id="menu-item-29" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-29"><a href="#">二级导航</a></li>
    </ul></li>
    </ul>
 </div> 
1
2
3
4
5
6
7
8
9
menu参数的使用
menu参数是用来调用想显示的菜单。一般我们都是在后台操作,创建好菜单,勾选了主题位置后,该位置即使用这个菜单。如果有多菜单的情况下,可以通过menu参数去选择,一般输入菜单名称或菜单id。例如我在后台又创建了一个名为nav1的菜单

然后如下设置

<?php 
    wp_nav_menu( array( 
    'theme_location'=>'PrimaryMenu', 
    'menu'   => 'nav1',  //期望显示的菜单(输入名称或菜单id)
    'depth' => 0
    ));
?> 
1
2
3
4
5
6
7
输出结果

<div class="menu-nav1-container">
    <ul id="menu-nav1" class="menu">
    <li id="menu-item-35" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-35"><a href="#">示例页面</a></li>
    </ul>
</div> 
1
2
3
4
5
可以看到已经不是输出刚才的菜单了

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

<?php 
    wp_nav_menu( array( 
    'theme_location'=>'PrimaryMenu', 
    'before' => '1', //链接前文本
    'after'  => '2', //链接后文本
    'link_before'  => '3',   //链接文本前
    'link_after'  => '4',//链接文本后
    'depth' => 0
    ));
?> 
1
2
3
4
5
6
7
8
9
10
示例输出如下

<div class="menu-导航栏-container">
    <ul id="menu-导航栏" class="menu">
    <li id="menu-item-27" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-27">1<a href="#">3首页4</a>2</li>
    ………………
1
2
3
4


当然,不止是文本,也可以输出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:菜单内容
    */
?> 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
输出结果

<div class="menu-导航栏-container">
    <ul id="ulid" class="ulclass">
    <li id="menu-item-27" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-27"><a href="#">首页</a></li>
    ………………
    </ul>
</div> 
1
2
3
4
5
6
去除ul标签

<?php 
    wp_nav_menu( array( 
    'theme_location'=>'PrimaryMenu', 
    'items_wrap'  => '%3$s',
    'depth' => 0
    ));
?> 
1
2
3
4
5
6
7
输出结果

<div class="menu-导航栏-container">
    <li id="menu-item-27" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-27"><a href="#">首页</a></li>
    …………
</div> 
1
2
3
4
关于其他参数
像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')) : '';
}
1
2
3
4
5
6
需要去除什么,保留什么,根据使用情况,修改上面的代码即可

构造多级菜单
通过上述例子,很明显默认二级菜单的类名为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";
     }
 }
1
2
3
4
5
6
7
调用方法

<?php 
    wp_nav_menu( array( 
    'theme_location'=>'PrimaryMenu', 
    'walker' => new new_walker(),
    'fallback_cb' => '',
    'depth' => 0
    ));
?> 
1
2
3
4
5
6
7
8
上面只是一个简单例子,通过这个方法,可以自己写一个菜单并调用

如果只是简单修改,可以更改\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>';
    }
    }
?>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
按照以上代码,则生成二级菜单时类名为sub-menul,三级菜单为third-menu

那么,以上就是wp_ nav_menu函数的详解及示例了。已经写得尽量详细了,掌握了这些参数的使用,相信实现任何菜单都不在话下。刚接触wordpress时,最早碰到的就是这个函数,吃到了不少苦头,为了做一个菜单功能花了很长时间。现在,终于是理解了这个函数的几乎全部用法,也希望能帮到大家
--------------------- 
作者:逝去abcde 
来源:CSDN 
原文:https://blog.csdn.net/qq_37296622/article/details/82633833 
版权声明:本文为博主原创文章,转载请附上博文链接!

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/399526.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

page对象

page对象指的是页面本身 查看当前page对象的字符串描述 转载于:https://www.cnblogs.com/liuliuyiming/p/7731704.html

Memcached总结三:Memcached常用命令及使用说明

一、存储命令 存储命令的格式&#xff1a; 12<command name> <key> <flags> <exptime> <bytes><data block>参数说明如下&#xff1a; <command name>set/add/replace<key>查找关键字<flags>客户机使用它存储关于键值对…

mysql.zip免安装版配置

MYSQL ZIP免安装版配置 1. 下载MySQL 选择自己想要的.本次安装.我使用的是mysql-5.6.17-winx64 地址:http://dev.mysql.com/downloads/mysql/ 2. 解压zip 文件. 在mysql 的根目录下找到 my-default.ini 复制出一个 my.ini 文件, 根据你需要的位置修改 my.ini 文件 a&#xf…

Html中CSS之去除li前面的小黑点,和ul、LI部分属性方法

https://blog.csdn.net/business122/article/details/7973638 <style type"text/css"> list-style:none; </style>

Day3:集合

一、集合的定义及特性 1.集合的特性 1.1 去重&#xff0c;把一个列表变成集合&#xff0c;就自动去重了 1.2 关系测试&#xff0c;测试两组数据之间的交集、差集等关系 #!/usr/bin/env python # -*- coding:utf-8 -*- # Author:Hiuhung Wan list_1 [1,3,5,9,7,5,4] set_1 …

解决SQL命令行回退的问题

场景 在linux或者aix上安装后Oracle后&#xff0c;在SQL命令行下无法通过键盘的退格键回退&#xff0c;如下 解决方法 安装软件 # rpm -ivh rlwrap-0.41-1.el6.x86_64.rpm warning: rlwrap-0.41-1.el6.x86_64.rpm: Header V3 RSA/SHA256 Signature, key ID 0608b895: NOKEYPrep…

p740备件号

http://www.gzyuxing.net/machine/show-113.htmlhttp://www.fuyuanit.cn/index.php?mProduct&ashow&id258http://www.fuyuanit.cn/index.php?mProduct&ashow&id258扩展柜如何确定:标签上一般有字样&#xff0c;到ibm knowledge center搜索关键字 5877 parts即…

Android listview addHeaderView 和 addFooterView 详解

addHeaderView()方法&#xff1a;主要是向listView的头部添加布局addFooterView()方法&#xff1a;主要是向listView的底部添加布局 需要注意的是添加布局的时候应该添加从父容器开始添加&#xff0c;而不能直接添加父容器中的子控件。例如&#xff1a;从一个xml布局文件中添加…

python教程--__init_.py的作用

__init__.py 的作用 python的每个模块的包中&#xff0c;都有一个__init__.py文件&#xff0c;有了这个文件&#xff0c;我们才能导入这个目录下的module。那么&#xff0c;__init__.py还有什么别的功能呢&#xff1f;其实&#xff0c;__init__.py里面还是可以有内容的&#xf…

在HTML中怎么去掉超链接的下划线?

<style type"text/css">a {text-decoration: none}</style> https://zhidao.baidu.com/question/253614370.html

ASP.NET AJAX Timer Trouble? Location is key.

If you’ve made much use of the ASP.NET AJAX Timer control, you may have noticed that it can behave somewhat unexpectedly. In this post, I’m going to take a closer look at how the Timer works and the most significant factor that influences it: Location.…

linq 分组求和的一般方法

//var query from d in expenseApplyModel.ApplyBillList.AsEnumerable() // group d by d.ExpenseItemID into g // select new // { // ExpenseItemID g.Key, // ExpenseAmount g.Sum(t > t.ExpenseAmount) // };//分组求和新添加的费用项目 var query expenseApplyMo…

在屏幕上打印杨辉三角

这就是杨辉三角&#xff0c;也叫贾宪三角。这于我们现在的学习联系最紧密的是2项式乘方展开式的系数规律。如图&#xff0c;在贾宪三角中&#xff0c;第3行的第三个数恰好对应着两数和的平方公式依次下去。 杨辉三角是一个由数字排列成的三角形数表&#xff0c;一般形式如下&am…

jquery 获取 A 标签 超级链接属性

var icon_nav_href1 $("#indexiconnavid>li:nth-child(1) a").attr("href"); //抓取当前url

apache ab 测试 apr_socket_connect(): 由于目标机器积极拒绝 无法连接

遇到这种情况一般是你开的并行数量太多了。。。例如:ab -c 1000 -n 10000 http://localhost/index.html 如此大的请求就会挂掉&#xff0c;不过还是有补救措施的&#xff0c;可以通过增加并发数上限解决这个问题&#xff0c;步骤如下&#xff1a; 1、停止Apache服务&#xff1b…

maven 结合idea入门

reference : http://www.cnblogs.com/ramantic/p/7735323.html转载于:https://www.cnblogs.com/tangchangcai/p/7735690.html

ImageView的属性android:scaleType,即ImageView.setScaleType(ImageView.ScaleType)

1 imageView.setScaleType(ImageView.ScaleType.FIT_XY ); 1 这里我们重点理解ImageView的属性android:scaleType&#xff0c;即ImageView.setScaleType(ImageView.ScaleType)。android:scaleType是控制图片如何resized/moved来匹对ImageView的size。ImageView.ScaleType / an…

CSS如何让DIV的宽度随内容的变化

让div根据内容改变大小 div{ width:auto; display:inline-block !important; display:inline; } https://www.cnblogs.com/limeiky/p/6289307.html

第一幕 基础起步

1、选择版本python2 or python3 话不多说 python3 2、不同操作系统下的安装配置python 2.1、Linux系统一般默认安装有python&#xff0c;打开终端窗口检查是否安装python&#xff0c;在终端输入python --version 或 python3 --version&#xff0c;如果有则会显示python版本&am…

footer置底的几种方式

/* 通过calc()函数让内容区块自动伸缩 */ .my-body{min-height: calc(71.7vh - 80px); } footer{height:50px; } 参考 :https://www.jianshu.com/p/6efe2c76a2dd