性价比最高的香港ASP、PHP主机提供商
做网站,就上凡科建站

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

Loading
0
Comodo SLL证书促销 - 免费ssl证书申请_ssl证书购买_ev ssl证书_https证书购买 - GDCA_数安时代

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

1
2
3
<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 :

1
2
3
4
5
6
7
8
9
10
/**
 * 移除菜单的多余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() : '';
}

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

1
2
3
<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 行的数组内容。

1
2
3
4
5
6
7
8
9
10
/**
 * 移除菜单的多余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大学的首页,输出的代码为:

1
2
3
<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" ,对这个类添加样式即可。

支付宝扫码打赏 微信打赏

如果文章对你有帮助,欢迎点击上方按钮打赏作者

MetInfo | 最适合企业网站建设的cms系统

关于 倡萌

一个疯狂的 WordPress 爱好者,喜欢折腾 WordPress 主题,分享 WordPress 资源。如果你也喜欢 WordPress,欢迎和我一起交流!

精彩推荐

让主题显示 WordPress 后台添加的ICP备案号

让主题显示 WordPress 后台添加的ICP备案号

8个 WordPress 文章系列专题插件的简单测评

8个 WordPress 文章系列专题插件的简单测评

16 条评论

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

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

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

      自己修改下代码即可

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

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

      自己修改代码即可

发表评论