wordpress自定义菜单去除冗余的class和id选择器

在用wordpress程序建站时，大多数是使用wp后台提供的菜单功能来制作网页导航。但是在默认的情况下，wordpress制作出来的导航菜单会产生很多冗余的class和id选择器。

<li id=“menu-item-88” class=“menu-item menu-item-type-taxonomy menu-item-object-category menu-item-88”><a href=https://www.maxing128.com/frontend”>前端</a></li>
    <li id=“menu-item-89” class=“menu-item menu-item-type-taxonomy menu-item-object-category menu-item-89”><a href=“https://www.maxing128.com/html"”>html</a></li>
    <li id=“menu-item-90” class=“menu-item menu-item-type-taxonomy menu-item-object-category menu-item-90”><a href=“https://www.maxing128.com/css”>css</a></li>
    <li id=“menu-item-91” class=“menu-item menu-item-type-taxonomy menu-item-object-category menu-item-91”><a href=“https://www.maxing128.com/js”>js</a></li>
    <li id=“menu-item-92” class=“menu-item menu-item-type-taxonomy menu-item-object-category menu-item-92”><a href=“https://www.maxing128.com/program”>程序</a></li>

上面的代码就是wordress菜单功能产生的网页导航，但是我们想让导航简洁一些，如果只用class选择器中menu-item项，那真是太好不过了。对于id=“menu-item-88”，还有class=“ menu-item-type-taxonomy menu-item-object-category menu-item-88”>都是多余的了。那怎么我们才能做到把多余css选择器去掉呢？很简单就利用wordpress的过滤器来删除这些没有的代码。具体方法如下：

1.不保留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() : ”;
}

2.只保留class=”menu-item”

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(‘menu-item’)) : ”;
}

通过把2上面的代码放在functions.php文件中后，网页前台就可以只保留class=”menu-item”选择器。若想在导航中保留多个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(‘menu-item’,’current-menu-item’,’current-post-parent’,’current-menu-parent’)) : ”;
}