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

  • 相关阅读:
    Eval与DataBinder.Eval的区别
    ETL增量抽取方式
    SPSS Clementines 预测分析模型啤酒+尿片故事的实现机理(转载)
    【转载】SPSS Clementine 数据挖掘入门3
    SSIS 包配置的过程
    SPSS Clementine 数据挖掘入门2(转载)
    SPSS19.0实战之聚类分析(转载)
    SPSS Clementine 数据挖掘入门1(转载)
    【转】ASP网站源代码修改方法
    【转】【转】一个一年工作经验的java工程师从工作初到今天的所有收藏的学习java的网站(有些很经典
  • 原文地址:https://www.cnblogs.com/ytkah/p/11193207.html
Copyright © 2020-2023  润新知