为WordPress菜单项添加Class属性

如果在WordPress的外观设置中自定义的menu,菜单的class都是自动生成的,恰巧需要添加一个特定的样式,这样好在CSS中修饰怎么办?最近遇到了这个问题,原来WordPress还有一项隐藏的功能。

1、进入外观->菜设置页面,然后点击页面右上角的“显示选项”

为WordPress菜单项添加Class属性

2、在下拉出的面板上勾选“CSS类”

为WordPress菜单项添加Class属性

3、看到了吗,下面多出了一个CSS类的输入框,输入自己的CSS Class属性值,然后保存菜单,Class就添加到相应的菜单项目了

为WordPress菜单项添加Class属性

初次之外,还可以在主题内的function.php添加filter的方法,下面就是将菜单项名称为“首页”的项多添加“Home”的Class属性值。当然在if内添加WordPress的conditional tags,如is_home()、is_user_logged_in()等等:

add_filter('nav_menu_css_class' , 'special_nav_class' , 10 , 2);
function special_nav_class($classes, $item){
     if(item->title == '首页'){
             $classes[] = 'Home';
     }
     return $classes;
}

本文采用CC BY-NC-ND协议进行许可,传播时请保留链接:http://huangzhiqun.com/skill/add-class2wordpress-menu-item.html

3,742 次阅读
  1. 目前还没有评论

发表评论

× 一 = 八

注意: 评论者允许使用'@user空格'的方式将自己的评论通知另外评论者。例如, ABC是本文的评论者之一,则使用'@ABC '(不包括单引号)将会自动将您的评论发送给ABC。使用'@all ',将会将评论发送给之前所有其它评论者。请务必注意user必须和评论者名相匹配(大小写一致)。

疑惑 调皮 伤心 抠鼻 惊讶 微笑 脸红 坏笑 惊讶 发呆 撇嘴 酷 阴险 咒骂 愤怒 白眼 鼓掌 得意 汗 打呵欠 大哭 憨笑

评论