文章目录[隐藏]
缘由
昨天一天把自己网站的Boostrap等数据完全取消，自己编辑CSS来实现，同时不在主题中引用任何JS，自己实现菜单能够响应式布局，采用了在移动端菜单可左右滑动的CSS！但在设置主题里面的li的class给卡住了！给出的函数默认只能更改ul的id和class，更改可通过Walker定制！我这里不讲！最后会提供链接！
方法
最简单的
我是后来浏览源码发现的（如下），WordPress会有默认的class：menu-item,如果在某当前页面则会由：current-menu-item,有个页面跳转也是有默认！其它可以具体去查询查询！我主题的CSS如下！
.menu-item {
margin: 5px;
padding: 5px;
display: inline-block;
font-size: 15px;
font-weight:bolder;
color:cadetblue;
}
.current-menu-item{
border-radius: 5px;
font-size: 15px;
display: inline-block;
color:snow;
background-color:skyblue;
}
更改functions.php
这个也要用到 wp_nav_menu()
- functions.php
function add_additional_class_on_li($classes, $item, $args) {
if(isset($args->add_li_class)) {
$classes[] = $args->add_li_class;
}
return $classes;
}
add_filter('nav_menu_css_class', 'add_additional_class_on_li', 1, 3);
- 调用之地
注意把add_li_class的参数改成你写的！
$args = array(
'container' => '',
'theme_location'=> 'your-theme-loc',
'depth' => 1,
'fallback_cb' => false,
'add_li_class' => 'your-class-name1 your-class-name-2'
);
wp_nav_menu($args);
wp_nav_menu()使用
我这里放两张图，具体请跳转 圖解 WordPress 的 wp_nav_menu 及利用 Walker 客製化 Navbar Menu
