wordpress自定义导航菜单如何使用?

一、在wordpress模板中添加注册菜单代码。

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

register_nav_menus(array(
'PrimaryMenu'=>'导航',
'friendlinks'=>'友情链接',
'footer_nav'=>'页脚导航'));
add_theme_support('nav_menus');

‘PrimaryMenu’=>’导航’

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

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

二、在wordpress网站后台创建菜单。

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

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

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

三、在wordpress模板中引用菜单。

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

<?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) );
?>

输出结果为:

< 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="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >首页</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="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >一级导航</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="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >二级导航</a></li>
< li id="menu-item-30" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-30">< a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >二级导航1</a></li>
< li id="menu-item-31" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-31">< a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >二级导航2</a></li>
</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
));
?>

输出结果:

< 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="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >首页</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="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >一级导航</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="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >二级导航</a></li>
</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
));
?>

输出结果:

< 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="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >首页</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="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >一级导航</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="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >二级导航</a></li>
</ul></li>
</ul>
</div>

menu参数的使用:

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

然后如下设置:

<?php
wp_nav_menu( array(
'theme_location'=>'PrimaryMenu',
'menu' => 'nav1', //期望显示的菜单(输入名称或菜单id)
'depth' => 0
));
?>

输出结果:

< 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="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >示例页面</a></li>
</ul>
</div>

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

插入文本参数的使用:

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

<?php
wp_nav_menu( array(
'theme_location'=>'PrimaryMenu',
'before' => '1', //链接前文本
'after' => '2', //链接后文本
'link_before' => '3', //链接文本前
'link_after' => '4',//链接文本后
'depth' => 0
));
?>

示例输出如下:

< 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="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >3首页4</a>2</li>
………………

当然,不止是文本,也可以输出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:菜单内容
*/
?>

输出结果:

< 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="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >首页</a></li>
………………
</ul>
</div>

去除ul标签:

<?php
wp_nav_menu( array(
'theme_location'=>'PrimaryMenu',
'items_wrap' => '%3$s',
'depth' => 0
));
?>

输出结果:

< 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="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >首页</a></li>
…………
</div>

关于其他参数,像depth这个参数,默认0就行了。

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

去除或保留菜单多余类名,将以下代码添加至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。

 

原文:https://wanlimm.com/77202007099045.html

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有M币奖励和额外收入!

模板下载吧 WP技术 wordpress自定义导航菜单如何使用? https://www.mbxzb.com/blog/file/wordpress/24383.html

从明天起,做一个幸福的人,喂马、劈柴、周游世界…

常见问题
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承
查看详情
  • 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用
查看详情

相关文章

评论
暂无评论
点击按钮快速添加回复内容: 支持 高兴 激动 给力 加油 苦寻 生气 回帖 路过 威武 友军 顶贴
官方客服团队

为您解决烦忧 - 24小时在线 专业服务