您所在的位置: 首页 > 健宇学院 > 网站技术 > 移除 WordPress 菜单输出的多余的CSS选择器id或class

移除 WordPress 菜单输出的多余的CSS选择器id或class

现在大多数的WordPress主题都使用 wp_nav_menu() 来添加菜单,这个函数默认会输出很多CSS选择器,比如下面的代码:


1
2
<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="http://www.jianyu87.com/">健宇工作室</a></li>
<li id="menu-item-13" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-13"><a href="http://www.jianyu87.com/seo">SEO推广</a></li> <li id="menu-item-8" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-8"><a href="http://www.jianyu87.com/">WordPress主题</a></li>

看着就有些头疼,如果你想移除所有的css选择器,可以将下面的代码添加到主题的 functions.php :


1
2
3
4
5
6
7
8
9
10
/**
 * 移除菜单的多余CSS选择器
 * From http://www.jianyu87.com/2013071950.html
 */

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() : '';
}

输出效果如下,够精简了吧:


1
2
3
<li><a href="http://www.jianyu87.com/">健宇工作室</a></li>
<li><a href="http://www.jianyu87.com/seo">SEO推广</a></li>
<li><a href="http://www.jianyu87.com/">WordPress主题</a></li>

不过,你可能要考虑到定义当前菜单的某些样式,比如高亮显示当前菜单,那你就需要保留一些CSS选择器,才能定义当前菜单。常用的当前菜单的选择器有以下4个:

  • current-post-ancestor
  • current-menu-ancestor
  • current-menu-item
  • current-menu-parent

所以我们只要不过滤它们即可,可以参考下面的代码:

如果你想保留更多CSS类,可以修改以下代码的第 9 行的数组内容。


1
2
3
4
5
6
7
8
9
10
/**
 * 移除菜单的多余CSS选择器
 * From http://www.jianyu87.com/2013071950.html
 */

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')) : '';
}

这样一来,输出的代码为:


1
2
3
<li class="current-menu-item"><a href="http://www.jianyu87.com/">健宇工作室</a></li>
<li><a href="http://www.jianyu87.com/seo">SEO推广</a></li>
<li><a href="http://www.jianyu87.com/">WordPress主题</a></li>

保留了class=”current-menu-item” ,对这个类添加样式即可。

请尊重我们的辛苦付出,未经允许,请不要转载 健宇工作室 的文章,鄙视各种无耻的采集行为!

健宇工作室分享区  YY教学频道号:63565426

相关日志:

目前有 1 条留言 其中:访客:1 条, 博主:0 条

  1. 学Wordpress : 2014年09月06日13:54:40  -9楼 @回复 回复

    请教大侠,上面的CSS调用怎样修改twentytwelve为ABC或去除

给我留言

10 + 68 = 两数相加后,请输入答案