如何给WordPress主题菜单的li中添加Class？

—

by

缘由

昨天一天把自己网站的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

参考

Comments

Leave a Reply Cancel reply