现在大多数的WordPress主题都使用 wp_nav_menu() 来添加菜单，这个函数默认会输出很多CSS选择器，比如下面的代码：
|
|
|
|
<span style="color: #009900;"><<span style="color: #000000; font-weight: bold;">li</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"menu-item-6"</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-6"</span>><<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"https://www.wpdaxue.com/"</span>></span>大学首页<span style="color: #009900;"><<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>><<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>></span> <span style="color: #009900;"><<span style="color: #000000; font-weight: bold;">li</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"menu-item-13"</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"menu-item menu-item-type-taxonomy menu-item-object-category menu-item-13"</span>><<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"https://www.wpdaxue.com/news"</span>></span>WordPress资讯<span style="color: #009900;"><<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>><<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>></span> <span style="color: #009900;"><<span style="color: #000000; font-weight: bold;">li</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"menu-item-8"</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"menu-item menu-item-type-taxonomy menu-item-object-category menu-item-8"</span>><<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"https://www.wpdaxue.com/themes"</span>></span>WordPress主题<span style="color: #009900;"><<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>><<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>></span> |
|
<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 ：
|
|
|
|
<span style="color: #009933; font-style: italic;">/** * 移除菜单的多余CSS选择器 * From https://www.wpdaxue.com/remove-wordpress-nav-classes.html */</span> add_filter<span style="color: #009900;">(</span><span style="color: #0000ff;">'nav_menu_css_class'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'my_css_attributes_filter'</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">100</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">1</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span> add_filter<span style="color: #009900;">(</span><span style="color: #0000ff;">'nav_menu_item_id'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'my_css_attributes_filter'</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">100</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">1</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span> add_filter<span style="color: #009900;">(</span><span style="color: #0000ff;">'page_css_class'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'my_css_attributes_filter'</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">100</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">1</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">function</span> my_css_attributes_filter<span style="color: #009900;">(</span><span style="color: #000088;">$var</span><span style="color: #009900;">)</span> <span style="color: #009900;">{</span> <span style="color: #b1b100;">return</span> <span style="color: #990000;">is_array</span><span style="color: #009900;">(</span><span style="color: #000088;">$var</span><span style="color: #009900;">)</span> ? <span style="color: #990000;">array</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span> <span style="color: #339933;">:</span> <span style="color: #0000ff;">''</span><span style="color: #339933;">;</span> <span style="color: #009900;">}</span> |
|
/**
* 移除菜单的多余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() : ”;
}
输出效果如下，够精简了吧：
|
|
|
|
<span style="color: #009900;"><<span style="color: #000000; font-weight: bold;">li</span>><<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"https://www.wpdaxue.com/"</span>></span>大学首页<span style="color: #009900;"><<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>><<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>></span> <span style="color: #009900;"><<span style="color: #000000; font-weight: bold;">li</span>><<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"https://www.wpdaxue.com/news"</span>></span>WordPress资讯<span style="color: #009900;"><<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>><<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>></span> <span style="color: #009900;"><<span style="color: #000000; font-weight: bold;">li</span>><<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"https://www.wpdaxue.com/themes"</span>></span>WordPress主题<span style="color: #009900;"><<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>><<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>></span> |
|
<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 行的数组内容。
|
|
|
|
<span style="color: #009933; font-style: italic;">/** * 移除菜单的多余CSS选择器 * From https://www.wpdaxue.com/remove-wordpress-nav-classes.html */</span> add_filter<span style="color: #009900;">(</span><span style="color: #0000ff;">'nav_menu_css_class'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'my_css_attributes_filter'</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">100</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">1</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span> add_filter<span style="color: #009900;">(</span><span style="color: #0000ff;">'nav_menu_item_id'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'my_css_attributes_filter'</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">100</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">1</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span> add_filter<span style="color: #009900;">(</span><span style="color: #0000ff;">'page_css_class'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'my_css_attributes_filter'</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">100</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">1</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">function</span> my_css_attributes_filter<span style="color: #009900;">(</span><span style="color: #000088;">$var</span><span style="color: #009900;">)</span> <span style="color: #009900;">{</span> <span style="color: #b1b100;">return</span> <span style="color: #990000;">is_array</span><span style="color: #009900;">(</span><span style="color: #000088;">$var</span><span style="color: #009900;">)</span> ? <span style="color: #990000;">array_intersect</span><span style="color: #009900;">(</span><span style="color: #000088;">$var</span><span style="color: #339933;">,</span> <span style="color: #990000;">array</span><span style="color: #009900;">(</span><span style="color: #0000ff;">'current-menu-item'</span><span style="color: #339933;">,</span><span style="color: #0000ff;">'current-post-ancestor'</span><span style="color: #339933;">,</span><span style="color: #0000ff;">'current-menu-ancestor'</span><span style="color: #339933;">,</span><span style="color: #0000ff;">'current-menu-parent'</span><span style="color: #009900;">)</span><span style="color: #009900;">)</span> <span style="color: #339933;">:</span> <span style="color: #0000ff;">''</span><span style="color: #339933;">;</span> <span style="color: #009900;">}</span> |
|
/**
* 移除菜单的多余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大学的首页，输出的代码为：
|
|
|
|
<span style="color: #009900;"><<span style="color: #000000; font-weight: bold;">li</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"current-menu-item"</span>><<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"https://www.wpdaxue.com/"</span>></span>大学首页<span style="color: #009900;"><<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>><<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>></span> <span style="color: #009900;"><<span style="color: #000000; font-weight: bold;">li</span>><<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"https://www.wpdaxue.com/news"</span>></span>WordPress资讯<span style="color: #009900;"><<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>><<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>></span> <span style="color: #009900;"><<span style="color: #000000; font-weight: bold;">li</span>><<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"https://www.wpdaxue.com/themes"</span>></span>WordPress主题<span style="color: #009900;"><<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>><<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>></span> |
|
<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>
保留了 class="current-menu-item" ，对这个类添加样式即可。
赏 如果本文对你有帮助，请打赏作者，鼓励我们继续写作！
请先 ！