对于wordpress主题来说
wp的菜单是必不可少的
可以用于制作导航栏
也可以做侧边栏、页脚导航等等
只要熟练掌握
就能利用wp菜单做成想要的东西
话不多说
现在先讲一下菜单的创建
首先要开启导航菜单功能
下面是一个例子
/*
register_nav_menu( $location, $description )
函数功能:开启导航菜单功能
@参数 string $location, 导航菜单的位置
@参数 string $description, 导航菜单的描述
开启多个位置的导航菜单,只需要重复调用此函数即可
*/
register_nav_menu('header-menu', '导航');//注册一个菜单
如上述代码
就是创建一个别名为‘header-menu’,名称为导航的菜单
那么如果要创建多个菜单的话
参考下面代码
register_nav_menu(array(
'header_menu'=>'头部导航',
'footer_menu'=>'页脚导航'
) );
这只是注册菜单的代码
那么我们要怎么在主题内开启呢?
需要用到钩子
将以下代码放进主题的function.php文件即可
functionregister_my_menus() {
register_nav_menus(array(
'header-menu'=>'头部导航',
'footer-menu'=>‘页脚导航',
'sidebar-menu'=>'侧边导航'
));
}
add_action('init', 'register_my_menus');
代码内的菜单名与别名根据实际需要来起
当然照我所写代码也可
具体怎么使用稍后会讲
然后在wp后台菜单处显示如下
至于怎么设置菜单,具体见下面wordpress大学的教程
https://www.wpdaxue.com/wordpress-nav-menus.html
菜单创建好了
要怎么引用呢?
我们只需在需要放菜单的地方
放如下代码
wp_nav_menu(array(
'theme_location'=>'header-menu',
'depth'=>'1',
) );
很显然,theme_location的参数为创建的导航别名
depth代表导航级数
例如上面这段代码表示调用别名为header-menu的一级导航
相关参数还有很多
完整代码如下
wp_nav_menu(array(
'theme_location'=> '',
'menu'=> '',
'container'=>'div',
'container_class'=> '',
'container_id'=> '',
'menu_class'=>'menu',
'menu_id'=> '',
'echo'=> true,
'fallback_cb'=>'wp_page_menu',
'before'=> '',
'after'=> '',
'link_before'=> '',
'link_after'=> '',
'items_wrap'=>'%3$s',
'depth'=> 0,
'walker'=> ''
) );
实际使用我们并不会用到这么多参数
根据实际需要来调整即可
theme_location导航别名
menu期望显示的菜单
container_idul父节点id值
container_classul父节点class值
menu_classul节点class值
menu_idul节点id值
before菜单链接前的文本
after菜单链接后的文本
link_before每个菜单链接文本前的文本
link_after每个菜单链接文本后的文本
depth菜单深度
containerfalse 时去除div标签
items_wrap值为 '%3$s' 去ul保持li不变
更多相关的内容
参考官方对菜单函数的说明
https://developer.wordpress.org/reference/functions/wp_nav_menu/
下面是一些实例
如果只用最简单的代码
输出的结构是这样的
(方便起见,不写类名)
如果我们要更改输出的结构
像外层div
只需 'container' => false 即可
如果要去除外层ul
那么可以这样写
if(function_exists('wp_nav_menu')) {
wp_nav_menu(array('container'=> false,'items_wrap'=>'%3$s','theme_location'=>'main-menu'));
}
那么输出的结构就只是
当然,实际上输出的菜单
会带有很多css选择器id或class
但这也可以改
//移除菜单的多余CSS选择器
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);
functionmy_css_attributes_filter($var) {
returnis_array($var) ? array() : '';
}
将以上代码放入function.php文件
就能移除所有的css选择器id或class
但并不是都移除就是最好的
有些css选择器对我们是很有帮助的
这里先给出默认菜单输出的结构
可以看到,生成的class名太多了
但图中红线划中的地方
在某些情况下对我们是很有帮助的
例如通过点击导航栏某个栏目
跳转到这个栏目的页面时
导航栏此栏目位置高亮
观察导航栏结构
我们会发现
该栏目会有一个类名
current-menu-item
那么事情就简单了
我们只需要写css样式即可
这里就不过多叙述
如果不太理解
可以自己尝试并自己观察
回到正题
移除多余css选择器,但有些选择器不想移除
我们可以这样写
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);
functionmy_css_attributes_filter($var) {
returnis_array($var) ?array_intersect($var,array('current-menu-item','current-post-ancestor','current-menu-ancestor','current-menu-parent')) : '';
}
不想移除的css选择器
自己根据需要加上即可
接着再来讲一个多级菜单
一般来说
我们最多只需要二级菜单
我们只需把depth改为2即可
但如果要三级菜单以上呢
可不是简简单单那改个depth就行了
构造三级菜单
我们需要对菜单进行定制
需要使用walker参数
该参数接受一个自定义的walker对象
这个比较复杂
最简便的方法就是修改
\wp-includes\nav-menu-template.php中默认的Walker_Nav_Menu函数
functionstart_lvl(&$output,$depth=,$args=array()){
if($depth==){
$output.='';
}else{
$output.='';
}
}
functionend_lvl(&$output,$depth=,$args=array()){
if($depth==){
$output.="";
}else{
$output.='';
}
}
按上面改的话
就是会生成二级菜单类名为sub-menu,三级菜单类名为third-menu的菜单
四级菜单?应该没有这么奇葩的要求吧
如果真有,就得再改造一番了
如果想自定义walker函数
自己定制菜单
只要有能力,完全可以
下面给一个用wp菜单实现输出bootstrap菜单结构的教程
http://www.ashuwp.com/courses/highgrade/610.html
可以参考一下
那么以上就是关于wordpress菜单几乎所有的教程了
这是我通过长时间的积累
以及这期间搜集的教程
整理出这个wp菜单教程
希望能对大家有所帮助
本文来自企鹅号 - 逝去的Space媒体
如有侵权,请联系 cloudcommunity@tencent.com 删除。
本文来自企鹅号 - 逝去的Space媒体
如有侵权,请联系 cloudcommunity@tencent.com 删除。