清理WordPress导航菜单多余id和class

小牛爱奋斗 | 2016/1/26 17:23

文章目录

清理菜单多余css代码
代码使用说明

使用Wordpress程序建站少不了用到官方提供的菜单功能，对于一个爱折腾的WEB前段爱好者来说那不可控的css选择器着实看着头疼，如下面的这段使用默认菜单功能生成的代码前段html代码当中出现了多个id和class选择器，但是这些我们比一定全都能用到，于是就产生了一系列的多余代码：

<li id=“menu-item-120” class=“menu-item menu-item-type-taxonomy menu-item-object-category menu-item-120”><a href=“http://chenxingweb.com/wp_book/wordpressnoob/”>新手教程</a></li>
<li id=“menu-item-121” class=“menu-item menu-item-type-taxonomy menu-item-object-category menu-item-121”><a href=“http://chenxingweb.com/wp_book/wp_kuozhan/”>扩展教程</a></li>
<li id=“menu-item-122” class=“menu-item menu-item-type-taxonomy menu-item-object-category menu-item-122”><a href=“http://chenxingweb.com/wp_book/wp_jicheng/”>问题集锦</a></li>

上面这段代码就是用默认的菜单功能生成其中我只用到了menu-item 像id="menu-item-120" class="menu-item-type-taxonomy menu-item-object-category menu-item-120"这些都是没用的，今天我就把去除多余css选择的的代码分享给大家，代码非常简单利用wordpress的过滤器来删除这些没有的代码。

清理菜单多余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() : ”;
}

代码使用说明

直接复制代码粘贴到主题的functions.php文件中即可，如果要保留部分选择器可以用下面的代码替换上面代码中4、5、6这3行即可代码如下：

function my_css_attributes_filter($var) {
return is_array($var) ? array_intersect($var, array(‘menu-item’)) : ”;
}

通过上面的代码就把我使用的menu-item这个选择器保留了下来，前台生成的html代码就是 class="menu-item"，一般来说，在WordPress 导航菜单中我们经常使用的选择器有（menu-item、 current-menu-item、 current-post-parent、 current-menu-parent）这几个那么我们可以把这几个标签都保留下来，上面我们只给出了保留单个标签的代码，如果要保留多个css选择器就要使用下面这段代码同样的操作方法替换上面代码的4、5、6这3行代码如下：

function my_css_attributes_filter($var) {
return is_array($var) ? array_intersect($var, array(‘menu-item’,’current-menu-item’,’current-post-parent’,’current-menu-parent’)) : ”;
}