wp_nav_menu() 函数改造（2） – 去掉WordPress菜单中多余的CSS选择器id或class

WordPress建站过程中，我们通常使用 wp_nav_menu() 函数来输出菜单，但是默认的输出中有很多多余的 CSS选择器id或class，效果如下：

<li id="menu-item-7" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-2 current_page_item menu-item-7">
	<a href="https://www.91wordpress.com">首页</a>
</li>
<li id="menu-item-22" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-22">
	<a href="https://www.91wordpress.com/about-us">关于我们</a>
</li>

</li>

</li>

下面介绍一下去掉WordPress菜单中多余的CSS选择器id或class的方法，将下面的代码添加到主题的 functions.php 文件中：

//移除菜单的多余CSS选择器
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选择器

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.91wordpress.com">首页</a>
</li>
<li>
	<a href="https://www.91wordpress.com/about-us">关于我们</a>
</li>

<li>

</li>

<li>

</li>

看起来有点太精简了吧？！现在问题来了，如果我想要定义当前菜单的某些样式，比如高亮显示当前菜单？那该怎么办啊？

解决办法是我们需要保留一些CSS选择器。

常用的当前菜单的选择器有以下4个：

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

我们只要不过滤它们即可，可以参考下面的代码：

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

//移除菜单的多余CSS选择器
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')) : '';
}

//移除菜单的多余CSS选择器

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')) : '';

}

修改过后，当你访问网站首页时，输出的菜单结构如下：

<li class="current-menu-item">
	<a href="https://www.91wordpress.com">首页</a>
</li>
<li>
	<a href="https://www.91wordpress.com/about-us">关于我们</a>
</li>

</li>

<li>

</li>

这样一来，我们就可以位当前菜单样式定义特殊的样式了。

大功告成，上一篇文章中，我们已经讲解了如何禁止WordPress菜单输出 div 和 ul 标签。