移除 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.abcziyuan.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://www.abcziyuan.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://www.abcziyuan.com/network">网络营销</a></li>

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

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

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

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

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

开通VIP会员
分享到: 生成海报
免责声明1. 本站所有资源来源于用户上传和网络,均不允许转载,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 如发现会员转载本站资源文章,本站有权封禁会员账号!
4. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
5. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
6. 如有链接无法下载、失效或广告,请联系管理员处理!
7. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
8. 如遇到加密压缩包,默认解压密码为"www.abcziyuan.com",如遇到无法解压的请联系管理员!
开通VIP会员
切换注册

登录

忘记密码 ?

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活