Wordpress主题交流群:565616228 进群记得看公告!

清理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种操作代码篇》通过这篇文章中提供的修改方案相信可以让你的博客提速!

来源:本文由晨星博客原创撰写,欢迎分享本文,转载请保留出处和链接!
评论广告

1条评论

  • 美声一梦  回复

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

昵称*

邮箱*

网址