相信应该还是有很多 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://zhangzifan.com.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://zhangzifan.com/seo">SEO 优化</a></li>
<li id="menu-item-8" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-8"><a href="https://zhangzifan.com/network">网络营销</a></li>

当然大家购买我们的主题已经在很早就已经做了相应的优化,大家不必担心。

如果你想移除所有的 css 选择器,可以将下面的代码添加到主题的 functions.php

1
2
3
4
5
6
7
8
9
10
/**
 * 移除菜单的多余 CSS 选择器
 * From https://zhangzifan.com/remove-wordpress-nav-class-and-id.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://zhangzifan.com.com/">首页</a></li>
<li><a href="https://zhangzifan.com/seo">SEO 优化</a></li>
<li><a href="https://zhangzifan.com/network">网络营销</a></li>

那么子凡作为一个追求极致的人来说,在追求简单快捷的时候,也不能缺少一些细节的优化与完美的效果,比如高亮显示当前菜单,那你就需要保留一些 CSS 选择器,才能定义当前菜单。常用的当前菜单的选择器有 4 个:current-post-ancestor,current-menu-ancestor,current-menu-item,current-menu-parent

所以我们还需要过滤它们即可,可以参考下面的代码:

1
2
3
4
5
6
7
8
9
10
/**
 * 移除菜单的多余 CSS 选择器
 * From https://zhangzifan.com/remove-wordpress-nav-class-and-id.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 类,可以修改以下代码的第 9 行的数组内容。

这样一来,如果当前访问的是泪雪博客的首页,输出的代码就是:

1
2
3
<li class="current-menu-item"><a href="https://zhangzifan.com.com/">首页</a></li>
<li><a href="https://zhangzifan.com/seo">SEO 优化</a></li>
<li><a href="https://zhangzifan.com/network">网络营销</a></li>

这样我们就可以为当前的链接做单独的样式啦!有没有觉得非常的不错呢?

除非注明,否则均为泪雪博客原创文章,禁止任何形式转载

本文链接:https://zhangzifan.com/remove-wordpress-nav-class-and-id.html

发表评论

登录 后参与评论