外贸独立站的底层设计密码WordPress 成品站模板
当前位置:首页>WordPress建站>基础教程>移除 WordPress 菜单输出的多余的CSS选择器id或class

移除 WordPress 菜单输出的多余的CSS选择器id或class

现在大多数的WordPress主题都使用 wp_nav_menu() 来添加菜单,这个函数默认会输出很多CSS选择器,比如下面的代码:

<li id="menu-item-6" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-6"><a href="https://www.wpdaxue.com/">大学首页</a></li>
<li id="menu-item-13" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-13"><a href="https://www.wpdaxue.com/news">WordPress资讯</a></li>
<li id="menu-item-8" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-8"><a href="https://www.wpdaxue.com/themes">WordPress主题</a></li>

看着就有些头疼,如果你想移除所有的css选择器,可以将下面的代码添加到主题的 functions.php :

/**
 * 移除菜单的多余CSS选择器
 * From https://www.wpdaxue.com/remove-wordpress-nav-classes.html
 */
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);
function my_css_attributes_filter($var) {
	return is_array($var) ? array() : '';
}

输出效果如下,够精简了吧:

<li><a href="https://www.wpdaxue.com/">大学首页</a></li>
<li><a href="https://www.wpdaxue.com/news">WordPress资讯</a></li>
<li><a href="https://www.wpdaxue.com/themes">WordPress主题</a></li>

不过,你可能要考虑到定义当前菜单的某些样式,比如高亮显示当前菜单,那你就需要保留一些CSS选择器,才能定义当前菜单。常用的当前菜单的选择器有以下4个:

  • current-post-ancestor
  • current-menu-ancestor
  • current-menu-item
  • current-menu-parent

所以我们只要不过滤它们即可,可以参考下面的代码:

如果你想保留更多CSS类,可以修改以下代码的第 9 行的数组内容。

/**
 * 移除菜单的多余CSS选择器
 * From https://www.wpdaxue.com/remove-wordpress-nav-classes.html
 */
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);
function my_css_attributes_filter($var) {
	return is_array($var) ? array_intersect($var, array('current-menu-item','current-post-ancestor','current-menu-ancestor','current-menu-parent')) : '';
}

这样一来,如果当前访问的是WordPress大学的首页,输出的代码为:

<li class="current-menu-item"><a href="https://www.wpdaxue.com/">大学首页</a></li>
<li><a href="https://www.wpdaxue.com/news">WordPress资讯</a></li>
<li><a href="https://www.wpdaxue.com/themes">WordPress主题</a></li>

保留了 class="current-menu-item" ,对这个类添加样式即可。

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

给TA打赏
共{{data.count}}人
人已打赏
欢迎关注WordPress大学公众号 WPDAXUE
基础教程

WordPress待办事项插件:Cleverness To-Do List

2013-7-9 8:30:00

基础教程

如何修改WordPress自带标签云小工具的显示参数

2013-7-10 7:56:00

17 条回复 A文章作者 M管理员
  1. 逆海而行

    挖坟,问下怎么保留menu-item-1、menu-item-2 这种带分类ID的class

  2. 以前wordpress 设置菜单的时候可以自己添加CSS类可选,现在点击菜单的显示选项没有反应,这个是BUG还是什么原因啊。

  3. 这样把后台自定义也都删掉了。不知道怎么添加上自定义类!

    • 请注意看倒数第二段代码的第9行,你可以保留一些你需要的class,比如 ‘current-menu-item’,’current-post-ancestor’,’current-menu-ancestor’,’current-menu-parent’

      自己修改下代码即可

  4. 我现在把样式都移除了,请问怎么添加一个class

    • 请注意看倒数第二段代码的第9行,你可以保留一些你需要的class,比如 ‘current-menu-item’,’current-post-ancestor’,’current-menu-ancestor’,’current-menu-parent’

      自己修改代码即可

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索