前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >删除 WordPress 导航菜单的多余 CSS 选择器(id或class)

删除 WordPress 导航菜单的多余 CSS 选择器(id或class)

作者头像
Jeff
发布2018-01-19 15:22:57
1.6K0
发布2018-01-19 15:22:57
举报
文章被收录于专栏:DeveWork

在默认情况下,WordPress 的导航菜单会输出很多如menu-itemmenu-item-type-taxonomymenu-item-object-category等加上 id 组成的CSS 选择器,无疑,对于一些人来说,这些选择器导致整个html 格式变得难看,看着碍眼的东西最好是将它去掉,之前Jeff 也曾有过一篇类似的文章《删除 WordPress 导航菜单的多余 CSS 选择器》,今天则介绍个通过添加过滤器来删除 WordPress 导航菜单的多余 CSS 选择器(id或class)的新方法。

如本站 DeveWork.com 的导航菜单的相关CSS 代码如下:

删除 WordPress 导航菜单的多余 CSS 选择器(id或class)
删除 WordPress 导航菜单的多余 CSS 选择器(id或class)
删除 WordPress 导航菜单的多余 CSS 选择器(id或class)
删除 WordPress 导航菜单的多余 CSS 选择器(id或class)

要删除 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')) : ''; }

代码来源:英文原文,感谢原作者。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2013/07/18,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档