现在大多数的WordPress主题都使用 wp_nav_menu() 来添加菜单,这个函数默认会输出很多CSS选择器,比如下面的代码:
<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.wpdaxue.com/">大学首页</a></li><li id="menu-item-13" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-13"><a href="https://www.wpdaxue.com/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="https://www.wpdaxue.com/themes">WordPress主题</a></li>
看着就有些头疼,如果你想移除所有的css选择器,可以将下面的代码添加到主题的 functions.php :
/** * 移除菜单的多余CSS选择器 * From https://www.wpdaxue.com/remove-wordpress-nav-classes.html */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.wpdaxue.com/">大学首页</a></li><li><a href="https://www.wpdaxue.com/news">WordPress资讯</a></li><li><a href="https://www.wpdaxue.com/themes">WordPress主题</a></li>
不过,你可能要考虑到定义当前菜单的某些样式,比如高亮显示当前菜单,那你就需要保留一些CSS选择器,才能定义当前菜单。常用的当前菜单的选择器有以下4个:
- current-post-ancestor
- current-menu-ancestor
- current-menu-item
- current-menu-parent
所以我们只要不过滤它们即可,可以参考下面的代码:
如果你想保留更多CSS类,可以修改以下代码的第 9 行的数组内容。
/** * 移除菜单的多余CSS选择器 * From https://www.wpdaxue.com/remove-wordpress-nav-classes.html */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')) : '';}
这样一来,如果当前访问的是WordPress大学的首页,输出的代码为:
<li class="current-menu-item"><a href="https://www.wpdaxue.com/">大学首页</a></li><li><a href="https://www.wpdaxue.com/news">WordPress资讯</a></li><li><a href="https://www.wpdaxue.com/themes">WordPress主题</a></li>
保留了 ,对这个类添加样式即可。
Tag:
选择