在默认情况下,WordPress 的导航菜单会输出很多如 menu-item、menu-item-type-taxonomy、menu-item-object-category 等加上 id 组成的CSS 选择器,无疑,对于一些人来说,这些选择器导致整个html 格式变得难看,看着碍眼的东西最好是将它去掉。
要删除 WordPress 导航菜单的多余 CSS 选择器(id或class),则需要在主题的functions.php 文件下加入以下代码:
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 选择器(id或class)都会被删除,如果为了某些CSS 效果(如鼠标焦点高亮)需要保留一些 CSS 选择器的,可以将第 4 行以下代码改为:
function my_css_attributes_filter($var) {
return is_array($var) ? array_intersect($var, array('current-menu-item')) : '';
}
上面的代码是保留了current-menu-item 这个选择器,对应的html 代码就是 class=”current-menu-item”,一般来说,在WordPress 导航菜单中可以保留以下选择器:current-post-ancestor
current-menu-ancestor
current-menu-item
current-menu-parent
如果要保留多个的CSS 选择器则可以这么写(从第 4 行开始):
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')) : '';
}
感谢:https://devework.com/remove-excess-wordpress-navigatio-css-selector-2.html
http://stackoverflow.com/questions/5222140/remove-li-class-id-for-menu-items-and-pages-list
WordPress 导航菜单怎么去掉多余 class?
把过滤代码加到主题的 functions.php 里,分别处理 nav_menu_css_class、nav_menu_item_id 和 page_css_class。函数返回空数组或空字符串后,菜单输出就不会再带那些默认的冗余 class 和 id 了。
删除菜单选择器后还能保留高亮吗?
可以。把过滤函数改成只保留 current-menu-item,或者同时保留 current-post-ancestor、current-menu-ancestor、current-menu-parent 等状态类,就能在精简 HTML 的同时维持当前页高亮效果。
哪些菜单 class 建议保留?
通常建议保留与当前页面状态相关的 class,比如 current-menu-item、current-post-ancestor、current-menu-ancestor、current-menu-parent。这样既方便写样式,也不会把菜单结构弄得太臃肿。







发表回复