欢迎访问晨星博客!

  • 清理WordPress导航菜单多余id和class

    文章目录
    1. 清理菜单多余css代码
    2. 代码使用说明

    使用Wordpress程序建站少不了用到官方提供的菜单功能,对于一个爱折腾的WEB前段爱好者来说那不可控的css选择器着实看着头疼,如下面的这段使用默认菜单功能生成的代码前段html代码当中出现了多个idclass选择器,但是这些我们比一定全都能用到,于是就产生了一系列的多余代码:

    1. <li id=“menu-item-120” class=“menu-item menu-item-type-taxonomy menu-item-object-category menu-item-120”><a href=“http://chenxingweb.com/wp_book/wordpressnoob/”>新手教程</a></li>
    2.     <li id=“menu-item-121” class=“menu-item menu-item-type-taxonomy menu-item-object-category menu-item-121”><a href=“http://chenxingweb.com/wp_book/wp_kuozhan/”>扩展教程</a></li>
    3.     <li id=“menu-item-122” class=“menu-item menu-item-type-taxonomy menu-item-object-category menu-item-122”><a href=“http://chenxingweb.com/wp_book/wp_jicheng/”>问题集锦</a></li>

    上面这段代码就是用默认的菜单功能生成其中我只用到了menu-itemid="menu-item-120" class="menu-item-type-taxonomy menu-item-object-category menu-item-120"这些都是没用的,今天我就把去除多余css选择的的代码分享给大家,代码非常简单利用wordpress的过滤器来删除这些没有的代码。

    清理菜单多余css代码

    1. add_filter(‘nav_menu_css_class’, ‘my_css_attributes_filter’, 100, 1);
    2. add_filter(‘nav_menu_item_id’, ‘my_css_attributes_filter’, 100, 1);
    3. add_filter(‘page_css_class’, ‘my_css_attributes_filter’, 100, 1);
    4. function my_css_attributes_filter($var) {
    5.     return is_array($var) ? array() : ;
    6. }

    代码使用说明

    直接复制代码粘贴到主题的functions.php文件中即可,如果要保留部分选择器可以用下面的代码替换上面代码中4、5、6这3行即可代码如下:

    1. function my_css_attributes_filter($var) {
    2.   return is_array($var) ? array_intersect($vararray(‘menu-item’)) : ;
    3. }

    通过上面的代码就把我使用的menu-item这个选择器保留了下来,前台生成的html代码就是 class="menu-item",一般来说,在WordPress 导航菜单中我们经常使用的选择器有(menu-item、 current-menu-item、 current-post-parent、 current-menu-parent)这几个那么我们可以把这几个标签都保留下来,上面我们只给出了保留单个标签的代码,如果要保留多个css选择器就要使用下面这段代码同样的操作方法替换上面代码的4、5、6这3行代码如下:

    1. function my_css_attributes_filter($var) {
    2.    return is_array($var) ? array_intersect($vararray(‘menu-item’,’current-menu-item’,’current-post-parent’,’current-menu-parent’)) : ;
    3. }

    注意:代码中提到的class选择器只是参考自我自己的博客,请根据各位自己的网站情况适当修改后使用。如果你想学习更多的Wordpress优化技巧可以查看我的上一篇文章《WordPress优化提速必做的6种操作代码篇》通过这篇文章中提供的修改方案相信可以让你的博客提速!

    声明:原创文章请勿转载,如需转载请注明出处!

    • 共 2 条评论

    请登陆后再发表您的观点吧!

    最新评论

    1. Mr. Sandman

      不错

    2. 美声一梦

      很好,刚好用上正在优化自己的博客呢,谢谢博主!!

    账号登陆

    快捷登陆