删除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"> < ...
随机推荐
- asp.net core使用水晶报表问题
背景 最近项目上遇到一个需求,要后台通过定时任务把水晶报表生成pdf文件,然后邮件发送给相关人. 技术实现思路 选用ASP.NET Core框架(基于2.2版本),通过IHostedS ...
- 分页Model
<?php namespace Admin\Model; use Think\Model; class PageModel extends Model{ /* *此函数分页函数.传入表名和当前页 ...
- [转帖]rename(Perl语言版本) 详解
rename(Perl语言版本) 详解 2019-03-19 22:51:23 wayne17 阅读数 464更多 分类专栏: Ubuntu之路 版权声明:本文为博主原创文章,遵循CC 4.0 B ...
- 【实战经验】--Xilinx--IPcore--PLL生成
用途: PLL用于产生自己想要的时钟,可以倍频有可以分频,通常倍频. 生成: 1.打开ISE—— Project —— New source,选择IP(CORE Generator & Arc ...
- PB 修改datawindow 的背景色
1.修改标题行的背景色 rgb(235, 235, 235) 2.修改选择行的背景色(即选择行高亮) if(currentrow() = getrow(), rgb(235,235,235), rgb ...
- POI2015 WYC
也许更好的阅读体验 \(\mathcal{Description}\) 给定一张n个点m条边的带权有向图,每条边的边权只可能是1,2,3中的一种.将所有可能的路径按路径长度排序,请输出第k小的路径的长 ...
- react-router的BrowserHistory 和 HashHistory 的区别,如何解决使用BrowserHistory 引起的访问路径问题
一,使用createBrowserHistory 和 createHashHistory 的 区别体现 1. 使用createBrowserHistory () // 使用createBrowserH ...
- 【1】【leetcode-72 动态规划】 编辑距离
(没思路,很典型,重要) 给定两个单词 word1 和 word2,计算出将 word1 转换成 word2 所使用的最少操作数 . 你可以对一个单词进行如下三种操作: 插入一个字符 删除一个字符 替 ...
- 阿里巴巴 Java 开发手册 (七) 控制语句
1. [强制]在一个 switch 块内,每个 case 要么通过 break/return 等来终止,要么注释说明程 序将继续执行到哪一个 case 为止:在一个 switch 块内,都必须包含一个 ...
- websocket-shap 函数Broadcast的使用方法
Broadcast:在websocket-shap函数的定义是:向WebSocket服务中的每个客户端发送数据,类似于广播的效果 如果要使用异步发送,可使用BroadcastAsync函数. 在源码中 ...