接外包,有相关需求的可以联系我:Telegram | Email

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

该文章创建(更新)于09/20/2020,请注意文章的时效性!

缘由

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

参考


要不赞赏一下?

微信
支付宝
PayPal
Bitcoin

版权声明 | Copyright

除非特别说明,本博客所有作品均采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可。转载请注明转自-
https://www.emperinter.info/2020/09/20/how-to-add-class-to-li-of-wordpress-theme-menu/


要不聊聊?

我相信你准备留下的内容是经过思考的!【勾选防爬虫,未勾选无法留言】

*

*



微信公众号

优惠码

阿里云国际版20美元
Vultr10美元
搬瓦工 | Bandwagon应该有折扣吧?
域名 | namesiloemperinter(1美元)