WordPress 移除菜单多余CSS选择器class和id

WordPress主题制作中，常常利用wp_nav_menu()函数输出菜单，这个函数会调出很多不需要的class和id，在火狐浏览器中用firebug查看html，代码如下所示，有很多多余的CSS选择器，这会拖慢的网站的加载速度，影响用户体验。当然，我们也可以利用代码删除这些CSS选择器，优化WordPress菜单。

<ul class="nav navbar-nav navbar-right">
    <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home"><a href="https://lerm.net" title="Home">首页</a></li>
    <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-ancestor current-menu-parent menu-item-has-children dropdown"><a href="https://lerm.net" title="Home">分类目录</a></li>
    <li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="https://lerm.net" title="Home">附庸风雅</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://lerm.net" title="Home">资源分享</a></li>
</ul>

打开主题根目录下的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选择器，输出的代码非常简洁，如果需要保留其中的某一些选择器，比如当前菜单的css选择器’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')) : '';
}

这样一来WordPress菜单就非常简洁明了，如下所示：

<ul class="nav navbar-nav navbar-right">
    <li class="menu-item"><a href="https://lerm.net" title="Home">首页</a></li>
    <li class="menu-item dropdown"><a href="https://lerm.net" title="Home">分类目录</a></li>
    <li class="menu-item"><a href="https://lerm.net" title="Home">附庸风雅</a></li>
    <li class="menu-item"><a href="https://lerm.net" title="Home">资源分享</a></li>
</ul>