删除WordPress菜单wp-nav-menu中li的class或id样式
我们都知道wordpress已经集成了一些通用的css样式,比如wp-nav-menu菜单会有很多的class,不想看到那么多的选择器,想要清净的世界要如何操作呢?随ytkah一起来看看
<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.cnblogs.com/ytkah">首页</a></li>
<li id="menu-item-13" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-13"><a href="/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="/themes">WordPress主题</a></li>
将下面的代码添加到主题的 functions.php就可以实现效果
/**
* 移除菜单的多余CSS选择器
*/
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() : '';
}
输出效果如下,是不是很干净?
<li><a href="https://www.cnblogs.com/ytkah">首页</a></li>
<li><a href="/news">WordPress资讯</a></li>
<li><a href="/themes">WordPress主题</a></li>
But!!!有些网友说想保留一些CSS选择器,比如高亮显示当前菜单,那又要怎么操作呢?只要不过滤它们即可,常见的当前菜单的选择器有以下4个:current-post-ancestor, current-menu-ancestor, current-menu-item, current-menu-parent,只要将这些class加入array中就可以
/**
* 移除菜单的多余CSS选择器
*/
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')) : '';
}
输出效果如下
<li class="current-menu-item"><a href="https://www.cnblogs.com/ytkah">首页</a></li>
<li><a href="/news">WordPress资讯</a></li>
<li><a href="/themes">WordPress主题</a></li>
不会那么复杂吧?
上面这个方法只能定义li,如果想定义ul怎么操作呢?你一定会喜欢这篇文章:如何定义wordpress菜单wp-nav-menu中的ul呢
删除WordPress菜单wp-nav-menu中li的class或id样式的更多相关文章
- Wordpress菜单函数wp_nav_menu各参数详解及示例
Wordpress菜单函数wp_nav_menu各参数详解及示例 注册菜单 首先要注册菜单,将以下函数添加至function.php函数里 register_nav_menus(array( ...
- 鼠标经过导航中li时,一个彩色模块跟着鼠标移动
1.鼠标经过导航中li时,一个活动的li跟随鼠标移动,最终移动到鼠标的停留的位置.(如需鼠标离开后让活动的li回到初始位置,则用jq hover事件,当鼠标离开时,给活动的li设置left是0) 2. ...
- 菜单设计器(Menu Designer)及其B/S,C/S双重实现(B/S开源)
ERP/MIS开发 菜单设计器(Menu Designer)及其B/S,C/S双重实现(B/S开源) 一直从事ERP/MIS的开发工作,今天来展现一下菜单设计器的设计,及其用途,并对B/S部分代码 ...
- 菜单之一:Menu基础内容
参考<疯狂android讲义>2.10节P168 1.重要接口 Android菜单相关的重要接口共有以下四个: 其中Menu为普通菜单,SubMenu包含子项,ContextMenu当长时 ...
- 跟我一起学extjs5(13--运行菜单命令在tabPanel中显示模块)
跟我一起学extjs5(13--运行菜单命令在tabPanel中显示模块) 上面设计好了一个模块的主界面,以下通过菜单命令的运行来把这个模块增加到主界面其中. 在MainModule. ...
- 自定义鼠标右键(层叠式菜单:cascading menu)
Author:KillerLegend From:http://www.cnblogs.com/killerlegend/p/3575391.html Date:Tuesday, February 1 ...
- 菜单之一:Menu基础内容 分类: H1_ANDROID 2013-11-03 00:23 906人阅读 评论(0) 收藏
参考<疯狂android讲义>2.10节P168 1.重要接口 Android菜单相关的重要接口共有以下四个: 其中Menu为普通菜单,SubMenu包含子项,ContextMenu当长时 ...
- WPF 4 Ribbon 开发 之 应用程序菜单(Application Menu)
原文:WPF 4 Ribbon 开发 之 应用程序菜单(Application Menu) 在上一篇中我们完成了快捷工具栏的开发,本篇将讲解应用程序菜单开发的相关内容.如下图所示,点击程序窗 ...
- IE6/IE7中li底部4px空隙的Bug
当li的子元素中有浮动(float)时,IE6/IE7中<li>元素的下面会产生4px空隙的bug. 代码如下: <ul class="list"> < ...
随机推荐
- LeetCode 1071. 字符串的最大公因子(Greatest Common Divisor of Strings) 45
1071. 字符串的最大公因子 1071. Greatest Common Divisor of Strings 题目描述 对于字符串 S 和 T,只有在 S = T + ... + T(T 与自身连 ...
- [Windows] - 在 Windows Server 2019 找不到无线网卡 之解决
硬件:Intel® Dual Band Wireless-AC 3165系统:Windows Server 2019 问题:新系统安装完成后,无法找到无线网卡 尝试:适用于 Windows Serve ...
- Feign调用时读取超时(Read timed out executing GET)解决
解决方式(很多人比较关注,所以放在最前面): 因为Feign调用默认的超时时间为一分钟,一分钟接口不能返回就会抛出异常,所以在服务端的yml文件中增加如下配置即可解决: # feign调用超时时间配置 ...
- 重置 Bootstrap modal 模态框数据
利用 Bootstrap modal 模态框弹层添加或编辑数据,第二次弹出模态框时总是记住上一次的数据值,stackoverflow 上找到个比较好的方法,就是利用 jQuery 的 clone 方法 ...
- 2019-07-02 python流程控制
今天的知识点包括:if / while / for 为什么要有if判断:判断指的是判断事物的对错,真假,想让计算机像人一样去工作.思考,那么计算机也应该有判断事物的对错的能力,那么就要用到if判断语句 ...
- C语言基础知识---认识C语言
2019.11.09 秋风 晴 最近一直在搞一套LoRa算法.总算有点效果了.心感慰藉(可能用错词语.但是也不管了) 初学者如何理解C语言? 无需刻板理解,笔者常用一个这样的例子助学生理解:法国人和法 ...
- Http、RESTful、RPC、MQ、Socket 概念与区别
若要转载本文,请务必声明出处:https://www.cnblogs.com/zhongyuanzhao000/p/11700815.html 1. 关于HTTP: HTTP,即超文本传输协议,是一个 ...
- .net core中的Session以及HttpContext对象使用小结
session用于识别用户并保持用户信息,就是一个会话 ,在浏览器不关闭的前提下,可以保存用户的信息,比如登录的保存用户信息从一个网页跳转到另一个网页,你的用户信息就可以用session. .net ...
- .net core webapi通过中间件获取请求和响应内容
本文主要根据中间件来实现对.net core webapi中产生的请求和响应数据进行获取并存入日志文件中: 这里不详细介绍日志文件的使用.你可以自己接入NLog,log4net,Exceptionle ...
- 关于Html中的title属性内容换行,以及Bootstrap的tooltip的使用
1.HTML中的title属性的内容换行: 鼠标经过悬停于对象时提示内容(title属性内容)换行排版方法,html title 换行方法总结. html的title属性默认是显示一行的.如何换行呢? ...