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

小园的景色，比想象的绿，绿色世界里溢出的那股泥土味，流过背着阳光的小土丘，一大片嫩绿涌入眼底，一粒粒草叶上滑落的雨滴，一朵朵淡黄的小花含着笑将露滴入另一处世界。

现在大多数的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>

<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 rel="nofollow noopener noreferrer" 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 rel="nofollow noopener noreferrer" 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 rel="nofollow noopener noreferrer" 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() : '';
}

/** * 移除菜单的多余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>

<li><a rel="nofollow noopener noreferrer" href="https://www.wpdaxue.com/">大学首页</a></li> <li><a rel="nofollow noopener noreferrer" href="https://www.wpdaxue.com/news">WordPress资讯</a></li> <li><a rel="nofollow noopener noreferrer" 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大学的首页，输出的代码为：

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>

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

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

以上就是移除 WordPress 菜单输出的多余的CSS选择器id或class。不要憎恨过去，没有它，你无法成为如今这么坚强的人。更多关于移除 WordPress 菜单输出的多余的CSS选择器id或class请关注haodaima.com其它相关文章！

全站频道

大家都在搜索：