专栏首页ytkah删除WordPress菜单wp-nav-menu中li的class或id样式

删除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呢

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 如何将北京时间批量转为Unix时间?用Excel!

      前面我们说过Unix时间戳转换怎样在Excel批量修改,有些人就想如果有特殊需求,那能不能批量将北京时间批量转成unix时间呢?能!用Excel就可以实现!...

    ytkah
  • flashfxp传输代码变形如何解决

      今天前端小美眉问ytkah为什么用flashfxp传输文件后代码都变形了,莫名多了空行,有的甚至堆积在一起了,原先排版很整齐都乱了,如何解决呢?其实这个是f...

    ytkah
  • 帝国cms用户密码忘记怎么修改

    帝国CMS7.2忘记后台密码怎么找回呢?有时候经常会忘记用户密码,我们可以通过修改数据库的值来初始化密码,下面就和ytkah一起来操作吧 1:进入phpmyad...

    ytkah
  • 几种查询方法(lambda Linq Enumerable静态类方式)

    wfaceboss
  • PHP RSS生成器(类库)

    其中Feed.php为核心文件,用以生成RSS,example.php为示例文件,查看示例即可。

    无道
  • 程序员必知的20个Python技巧

    Python是一门流行且应用广泛的通用编程语言,其应用包括数据科学、机器学习、科学计算等领域,以及后端Web开发、移动和桌面应用程序等方面。许多知名的公司都使用...

    AI科技大本营
  • SQL 优化必懂知识点

    单个列唯一键(distict_keys)的数量叫做基数。比如性别列,该列只有男女之分,抛开中性,所以这一列基数就是主键列的基数等于表的总行数。基数的高低影响列的...

    用户4143945
  • 蚂蚁金服首席架构师:开源SQLFlow牛刀初试,实时大数据系统才是未来基石

    这就是蚂蚁金服近日开源首个将SQL应用于AI引擎项目SQLFlow后,业界给出的反应。

    养码场
  • memcpy的函数

    网新恒天2014校园招聘笔试编程题 已知memcpy的函数为: void* memcpy(void *dest , const void* src , s...

    猿人谷
  • MySQL探秘(三):InnoDB的内存结构和特性

    常言说得好,每个成功男人背后都有一个为他默默付出的女人,而对于MySQL来说,这个“人”就是InnoDB存储引擎。  MySQL区别于其他数据库的最为重要的特点...

    用户3128938

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动