删除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"> < ...
随机推荐
- window 关机
schtasks /create /tn "关机" /tr "shutdown /s" /sc once /st 20:30
- 如何Dockerize您的端到端验收测试
本文作为使用Selenium Docker映像以及CodeceptJS和Express服务器的“操作方法”指南. 其中,我们将涵盖: 什么是E2E验收测试? 为什么要使用Docker? 松散耦合的测试 ...
- day09——初识函数
day09 函数的定义 # len() s = 'alexdsb' count = 0 for i in s: count += 1 print(count) s = [1,2,23,3,4,5,6] ...
- NOI2019:Stay at Home
7.16 NOI D1 从同步赛开始更起好了 先看了一圈题目,发现T1非常可做,二次函数因为对称轴在\(x < 0\)的地方所以有跟一次函数类似的单调性,搞个单调队列维护一下似乎就可以了.大力码 ...
- Linq实现分组后取最大(小)值
var beatles = (new[] { new { inst = "张三" , age="50" }, new { inst = "张三&quo ...
- 01、MySQL_简介
数据库概念 数据库(Database)是按照数据结构来组织.存储和管理数据的建立在计算机存储设备上的仓库. 数据库:存储数据的仓库 数据库分类 网络数据库 网络数据库是指把数据库技术引入到计算机网络系 ...
- win10设置锁屏密码
1.点击右下角窗口键 2.选择点击设置 3.点击账户 4.点击登录选项 5.点击密码,添加密码 6.设置密码 7.使用快捷键“窗口键+l”锁屏,就会提示你输入密码
- vue侦听器 基础4
侦听器 使用方式:设置需要侦听的data里的属性名就可以了 new Vue({ el:"#app", data:{ count:0 }, watchers:{ count(){ / ...
- react学习记录(二)
JSX 在render中return标签的部分可以插入字符串,数字,数组 class Welcome extends React.Component { render(){ return ( < ...
- swiper-动态更改数据后轮播点击或拖动失效
出现的问题: 1.swiper不能自动切换(设置了autoplay). 2.数据不匹配(需要加载的数据以改变,但是swiper里面的数据出现错误). 3.数据匹配过后,永远切换不到第一条数据. 4.根 ...