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

在默认情况下,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),则需要在主题的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')) : ''; }

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏机器学习从入门到成神

image的srcset属性

介绍 响应式页面中经常用到根据屏幕密度设置不同的图片。这个时候肯定会用到image标签的srcset属性。srcset属性用于设置不同屏幕密度下,imag...

21310
来自专栏一“技”之长

标签之美十——用户交互元素 原

任何一个网页都会提供用户交互的功能,包括账号密码的提交,留言板等用户信息的的获取。

9130
来自专栏LeeCen

UIScrollView控件实现图片轮播

12010
来自专栏知道一点点

bootstrap快速入门笔记(七)-表格,表单

2,条纹表格:通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式。

27330
来自专栏向治洪

React-Native组件之 TabBarIOS和TabBarIOS.Item

TabBarIOS 组件简介 目前的APP内,大部分都是选项与选项之间切换,比如:微信、微博、QQ空间…,在iOS中,我们可以通过TabItem类进行实现,那么...

355100
来自专栏www.96php.cn

[ecshop教程]怎样给ecshop商品图片添加水印

在ecshop商店设置——显示设置 1、选择水印图片 2、选择水印在图片中的位置 3、设置水印透明度。0为完全透明,100为完全不透明 ? 在商品管理...

38250
来自专栏闻道于事

第二天0605下午——超链接<a>与图片<img>

今天下午学习了超链接<a>标签和图片<img>标签,以下面代码为例: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...

36880
来自专栏码农阿宇

HTML基础加强

1. 什么是浏览器:解释和执行HTML源码的工具。 2. 什么是静态页面,什么样的页面是动态页面? 静态页面:htm,html(直接读取) 动态网页:asp...

365100
来自专栏别先生

HTML入门的简单学习

1:HTML简介     1.1:HTML(Haper Text Markup language):超文本标记语言     超文本就是指页面内可以包含图片,链接...

562100
来自专栏杨龙飞前端

checkbox的常见问题

23950

扫码关注云+社区

领取腾讯云代金券