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="http://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="http://lerm.net" title="Home">分类目录</a></li>
    <li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="http://lerm.net" title="Home">附庸风雅</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://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')) : '';
}
注:若在后台CSS 类(可选)(如下图)中添加了css选择器,那么也需要添加到上面的这段代码中,否则也会被过滤。

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

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

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

 

发表评论