移除 WordPress 菜單輸出的多餘的CSS選擇器id或class

現在大多數的WordPress主題都使用 wp_nav_menu() 來添加菜單，這個函數默認會輸出很多CSS選擇器，比如下面的代碼：

1
2
3

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

<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 ：

1
2
3
4
5
6
7
8
9
10

/**
 * 移除菜單的多餘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() : '';
}

/**
* 移除菜單的多餘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() : ”;
}

輸出效果如下，夠精簡瞭吧：

1
2
3

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

<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-ancestorcurrent-menu-ancestorcurrent-menu-itemcurrent-menu-parent

所以我們隻要不過濾它們即可，可以參考下面的代碼：

如果你想保留更多CSS類，可以修改以下代碼的第 9 行的數組內容。

1
2
3
4
5
6
7
8
9
10

/**
 * 移除菜單的多餘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')) : '';
}

/**
* 移除菜單的多餘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大學的首頁，輸出的代碼為：

1
2
3

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

<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" ，對這個類添加樣式即可。