删除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"> < ...
随机推荐
- RDA的使用和说明
一.RDA 说明 RDA(RemoteDiagnostic Agent)是oracle用来收集.分析数据库的工具,运行该工具不会改变系统的任何参数,RDA收集的相关数据非常全面,可以简化我们日常监控. ...
- 通过重新上传修改后的docker镜像来在kubeapps上实现k8s上部署的nginx版本更新,回退等
docker操作:制作自定义镜像 # docker下载官方nginx镜像 docker pull nginx # 基于该镜像运行一个容器 docker run -it -d --name nginx_ ...
- MPSoc之Hello World学习笔记
XILINX 新一代 SOC,Zynq UltraScale+ MPSOC 系列性能强悍无比,号称相比ZYNQ 7000系列每瓦性能提升5倍,一直想体验.近期因项目需要,入手了一套米尔的MPSoc开发 ...
- Flink入门 - CoGroup和Join
/* *CoGroup */ final StreamExecutionEnvironment streamExecutionEnvironment = StreamExecutionEnvironm ...
- 电缆公司如何面对企业改革?MES系统打造智能工厂
项目背景 目前,“互联网+电缆”正在成为电缆行业发展的主流,作为中国领先的大型电缆企业江苏亨通电力电缆有限公司(简称“亨通电缆”)积极响应国家提出的“中国制造2025”号召,实施MES工程项目,启用智 ...
- Python illustrating Downhill simplex method for minimizing the user-supplied scalar function的代码
学习过程,把代码过程较好的代码段做个记录,如下的代码段是关于Python illustrating Downhill simplex method for minimizing the user-su ...
- 个人项目—WC
一,Github地址:https://github.com/mushan520/WC.git 二.PSP表格: PSP2.1 Personal Software Process Stages 预估耗 ...
- ECharts大屏可视化【词云,堆积柱状图,折线图,南丁格尔玫瑰图】
一.简介 参考ECharts快速入门:https://www.cnblogs.com/yszd/p/11166048.html 二.代码实现 <!DOCTYPE html> <htm ...
- WebApi中将静态页面作为首页
WebApi中将静态页面作为首页 使用场景 在我的项目中使用Asp.Net WebApi作为后端数据服务,使用Vue作为前端Web,在服务器IIS上部署时需要占用两个端口,一个是80端口,用户在浏览器 ...
- 【RAC】rac环境下的数据库备份与还原
[RAC]rac环境下的数据库备份与还原 一.1 BLOG文档结构图 一.2 前言部分 一.2.1 导读 各位技术爱好者,看完本文后,你可以掌握如下的技能,也可以学到一些其它你所不知道的知识,~ ...