我们都知道wordpress已经集成了一些通用的css样式，比如wp-nav-menu菜单会有很多的class，不想看到那么多的选择器，想要清净的世界要如何操作呢？随ytkah一起来看看
<li id=”menu-item-6″ class=”menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-6″><a href=”https://www.cnblogs.com/ytkah”>首页</a></li>
<li id=”menu-item-13″ class=”menu-item menu-item-type-taxonomy menu-item-object-category menu-item-13″><a href=”/news”>WordPress资讯</a></li>
<li id=”menu-item-8″ class=”menu-item menu-item-type-taxonomy menu-item-object-category menu-item-8″><a href=”/themes”>WordPress主题</a></li>
将下面的代码添加到主题的 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() : ”;
}
输出效果如下，是不是很干净？
<li><a href=”https://www.cnblogs.com/ytkah”>首页</a></li>
<li><a href=”/news”>WordPress资讯</a></li>
<li><a href=”/themes”>WordPress主题</a></li>
But！！！有些网友说想保留一些CSS选择器，比如高亮显示当前菜单，那又要怎么操作呢？只要不过滤它们即可，常见的当前菜单的选择器有以下4个：current-post-ancestor， current-menu-ancestor， current-menu-item， current-menu-parent，只要将这些class加入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_intersect($var, array(‘current-menu-item’,’current-post-ancestor’,’current-menu-ancestor’,’current-menu-parent’)) : ”;
}
输出效果如下
<li class=”current-menu-item”><a href=”https://www.cnblogs.com/ytkah”>首页</a></li>
<li><a href=”/news”>WordPress资讯</a></li>
<li><a href=”/themes”>WordPress主题</a></li>
不会那么复杂吧？