---
title: "删除 WordPress 导航菜单的多余 CSS 选择器（id或class）"
url: "https://yjyj.net/learn/wordpress-learn/5891.html"
author: "小 虾 (生猛大蝦编辑部)"
published_at: "2017-11-05T09:03:10+08:00"
updated_at: "2017-11-05T09:03:10+08:00"
categories: "WordPress 学习"
tags: "class, id, wordpress导航, WordPress开发, 服务器安全"
summary: "这篇文章专门解决 WordPress 导航菜单默认输出一堆多余 id 和 class，导致 HTML 冗余、结构难看的问题。文中给出可直接放进 functions.php 的过滤代码，并演示如何只保留 current-menu-item 等必要状态类，兼顾页面整洁与菜单高亮效果，适合想精简主题输出的站长实操。"
source: "生猛大蝦 (https://yjyj.net)"
---

# 删除 WordPress 导航菜单的多余 CSS 选择器（id或class）

> 来源：[生猛大蝦 (yjyj.net)](https://yjyj.net/learn/wordpress-learn/5891.html) · 作者：小 虾 · 发布时间：2017-11-05

## 30 秒核心看点 (TL;DR)

- 用 functions.php 的过滤器，能直接删掉 WordPress 菜单里多余的 id 和 class。
- 如果还要保留当前菜单高亮，可只留下 current-menu-item 等状态类。
- 支持一次保留多个选择器，既精简 HTML，又不影响导航样式效果。

在默认情况下，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

## 延伸问答与排错指南 (FAQ)

### 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。这样既方便写样式，也不会把菜单结构弄得太臃肿。

---
更多 Linux 运维、WordPress 性能优化、前端工程化、Shopify 独立站与极客折腾指南：[生猛大蝦全站文章归档 (https://yjyj.net/archive)](https://yjyj.net/archive)