删除WordPress菜单wp-nav-menu中li的class或id样式
我们都知道wordpress已经集成了一些通用的css样式,比如wp-nav-menu菜单会有很多的class,不想看到那么多的选择器,想要清净的世界要如何操作呢?随ytkah一起来看看
1 2 3 | < 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就可以实现效果
1 2 3 4 5 6 7 8 9 | /** * 移除菜单的多余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 () : '' ; } |
输出效果如下,是不是很干净?
1 2 3 | < 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中就可以
1 2 3 4 5 6 7 8 9 | /** * 移除菜单的多余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' )) : '' ; } |
输出效果如下
1 2 3 | < 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
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源!
· 周边上新:园子的第一款马克杯温暖上架
2015-07-16 微信支付越来越国际化 支持外国护照绑卡