zoukankan      html  css  js  c++  java
  • 删除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呢

  • 相关阅读:
    (零 ) 天猫精灵接入Home Assistant-总说明
    (二 -2) 天猫精灵接入Home Assistant-自动发现Mqtt设备
    (二 -1) 天猫精灵接入Home Assistant-控制Mqtt设备
    如何在关闭ssh连接的情况下,让程序继续运行?
    hass连接设备
    (一 ) 天猫精灵接入Home Assistant-服务器搭建
    (一) 天猫精灵接入Home Assistant- hass对接天猫精灵
    (3)HomeAssistant 连接MQTT
    (2)HomeAssistant 参数配置
    (1)HomeAssistant 安装开始
  • 原文地址:https://www.cnblogs.com/ytkah/p/11193207.html
Copyright © 2011-2022 走看看