使用 WordPress 程序建站少不了用到官方提供的菜单功能，对于一个爱折腾的 WEB 前段爱好者来说那不可控的 css 选择器着实看着头疼，如下面的这段使用默认菜单功能生成的代码前段 HTML 代码当中出现了多个 id 和 class 选择器，但是这些我们比一定全都能用到，于是就产生了一系列的多余代码。

在讲删除 WordPress 导航菜单多余 ID 和 Class 之前，我们先了解下 WordPress 增加模板菜单方法，在 functions.php 文件加上以下代码：

1. if(function_exists('register_nav_menus')){

2. register_nav_menus(

3. array(

4. 'header-menu' => __( '菜单名字A' ),

5. 'footer-menu' => __( '菜单名字B' ),

6. 'sider-menu' => __('菜单名字C')

7. )

8. );

9. }

最简单的调用方式，前台加上下面代码：

1. <?php wp_nav_menu(); ?>

也可以对这个菜单进行更多的控制，代码如下：

1. <?php wp_nav_menu(

2. array(

3. 'theme_location' => '' //指定显示的导航名，如果没有设置，则显示第一个

4. 'menu' => 'header-menu',

5. 'container' => 'nav', //最外层容器标签名

6. 'container_class' => 'primary', //最外层容器class名

7. 'container_id' => '',//最外层容器id值

8. 'menu_class' => 'sf-menu', //ul标签class

9. 'menu_id' => 'topnav',//ul标签id

10. 'echo' => true,//是否打印，默认是true，如果想将导航的代码作为赋值使用，可设置为false

11. 'fallback_cb' => 'wp_page_menu',//备用的导航菜单函数，用于没有在后台设置导航时调用

12. 'before' => '',//显示在导航a标签之前

13. 'after' => '',//显示在导航a标签之后

14. 'link_before' => '',//显示在导航链接名之后

15. 'link_after' => '',//显示在导航链接名之前

16. 'items_wrap' => '<ul id="%1$s">%3$s</ul>',

17. 'depth' => 0,////显示的菜单层数，默认0，0是显示所有层

18. 'walker' => ''// //调用一个对象定义显示导航菜单 )); 

19. ?>

在使用 wp_nav_menu() 添加菜单，会输出很多 CSS 选择器，比如下面的代码：

1. <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="/">WPMAKER</a></li>

2. <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>

3. <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>

上面这段代码就是用默认的菜单功能生成其中我只用到了 menu-item 像 id=”menu-item-13″ class=”menu-item menu-item-type-taxonomy menu-item-object-category menu-item-13″这些都是没用的，今天我就把去除多余 css 选择的的代码分享给大家，代码非常简单利用 wordpress 的过滤器来删除这些没有的代码，可以将下面的代码添加到主题的 functions.php，移除所有的 css 选择器：

1. /**

2.  * 移除菜单的多余CSS选择器

3.  */

4. add_filter('nav_menu_css_class', 'my_css_attributes_filter', 100, 1);

5. add_filter('nav_menu_item_id', 'my_css_attributes_filter', 100, 1);

6. add_filter('page_css_class', 'my_css_attributes_filter', 100, 1);

7. function my_css_attributes_filter($var) {

8. 	return is_array($var) ? array() : '';

9. }

输出效果如下，够精简了吧：

1. <li><a href="/">WPMAKER</a></li>

2. <li><a href="/news">WordPress资讯</a></li>

3. <li><a href="/themes">WordPress主题</a></li>

不过，你可能要考虑到定义当前菜单的某些样式，比如高亮显示当前菜单，那你就需要保留一些 CSS 选择器，才能定义当前菜单。常用的当前菜单的选择器有以下 4 个：

• current-post-ancestor
• current-menu-ancestor
• current-menu-item
• current-menu-parent

所以我们只要不过滤它们即可，可以参考下面的代码：如果你想保留更多 CSS 类，可以修改以下代码的第 9 行的数组内容：

1. /**

2.  * 移除菜单的多余CSS选择器

3.  */

4. add_filter('nav_menu_css_class', 'my_css_attributes_filter', 100, 1);

5. add_filter('nav_menu_item_id', 'my_css_attributes_filter', 100, 1);

6. add_filter('page_css_class', 'my_css_attributes_filter', 100, 1);

7. function my_css_attributes_filter($var) {

8. 	return is_array($var) ? array_intersect($var, array('current-menu-item','current-post-ancestor','current-menu-ancestor','current-menu-parent')) : '';

9. }

这样一来，在 WordPress 导航菜单中我们经常使用的选择器有（menu-item、 current-menu-item、 current-post-parent、 current-menu-parent）这几个那么我们可以把这几个标签都保留下来如果当前访问的是 WPMAKER 的首页，输出的代码为：

1. <li class="current-menu-item"><a href="/">WPMAKER</a></li>

2. <li><a href="/news">WordPress资讯</a></li>

3. <li><a href="/themes">WordPress主题</a></li>

保留了 class=“current-menu-item” ，对这个类添加样式即可。