删除 WordPress 导航菜单的多余 CSS 选择器（id或class）
删除 WordPress 导航菜单的多余 CSS 选择器（id或class）
在默认情况下，WordPress 的导航菜单会输出很多如menu-item、menu-item-type-taxonomy、menu-item-object-category等加上 id 组成的CSS 选择器，无疑，对于一些人来说，这些选择器导致整个html 格式变得难看，看着碍眼的东西最好是将它去掉，之前Jeff 也曾有过一篇类似的文章《删除 WordPress 导航菜单的多余 CSS 选择器》，今天则介绍个通过添加过滤器来删除 WordPress 导航菜单的多余 CSS 选择器（id或class）的新方法。
如本站 DeveWork.com 的导航菜单的相关CSS 代码如下：
要删除 WordPress 导航菜单的多余 CSS 选择器（id或class），则需要在主题的functions.php 文件下加入以下代码：
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() : ''; } |
|---|
上面是所有的CSS 选择器（id或class）都会被删除，如果为了某些CSS 效果（如鼠标焦点高亮）需要保留一些 CSS 选择器的，可以将第 4 行以下代码改为：
function my_css_attributes_filter($var) { return is_array($var) ? array_intersect($var, array('current-menu-item')) : ''; } |
|---|
上面的代码是保留了current-menu-item 这个选择器，对应的html 代码就是 class="current-menu-item"，一般来说，在WordPress 导航菜单中可以保留以下选择器：
current-post-ancestor current-menu-ancestor current-menu-item current-menu-parent |
|---|
如果要保留多个的CSS 选择器则可以这么写（从第 4 行开始）：
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')) : ''; } |
|---|
代码来源：英文原文，感谢原作者。
腾讯云开发者
