wordpress自定义菜单去除冗余的class和id选择器

  • 2020-11-19 20:12:41
  • 57 次阅读
  • 稿源:天马行空

在用wordpress程序建站时,大多数是使用wp后台提供的菜单功能来制作网页导航。但是在默认的情况下,wordpress制作出来的导航菜单会产生很多冗余的class和id选择器。

wordpress自定义菜单去除冗余的class和id选择器

<li id=“menu-item-88” class=“menu-item menu-item-type-taxonomy menu-item-object-category menu-item-88”><a href=https://www.maxing128.com/frontend”>前端</a></li>
    <li id=“menu-item-89” class=“menu-item menu-item-type-taxonomy menu-item-object-category menu-item-89”><a href=“https://www.maxing128.com/html"”>html</a></li>
    <li id=“menu-item-90” class=“menu-item menu-item-type-taxonomy menu-item-object-category menu-item-90”><a href=“https://www.maxing128.com/css”>css</a></li>
    <li id=“menu-item-91” class=“menu-item menu-item-type-taxonomy menu-item-object-category menu-item-91”><a href=“https://www.maxing128.com/js”>js</a></li>
    <li id=“menu-item-92” class=“menu-item menu-item-type-taxonomy menu-item-object-category menu-item-92”><a href=“https://www.maxing128.com/program”>程序</a></li>

上面的代码就是wordress菜单功能产生的网页导航,但是我们想让导航简洁一些,如果只用class选择器中menu-item项,那真是太好不过了。对于id=“menu-item-88”,还有class=“ menu-item-type-taxonomy menu-item-object-category menu-item-88”>都是多余的了。那怎么我们才能做到把多余css选择器去掉呢?很简单就利用wordpress的过滤器来删除这些没有的代码。具体方法如下:

1.不保留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() : ”;
}

2.只保留class=”menu-item”

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(‘menu-item’)) : ”;
}

通过把2上面的代码放在functions.php文件中后,网页前台就可以只保留class=”menu-item”选择器。若想在导航中保留多个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(‘menu-item’,’current-menu-item’,’current-post-parent’,’current-menu-parent’)) : ”;
}
喜欢 2

文章评论 (0)

表情

大眼 可爱 大笑 坏笑 害羞 发怒 折磨 快哭了 大哭 白眼 晕 流汗 困 腼腆 惊讶 憨笑 色 得意 骷髅 囧 睡觉 眨眼 亲亲 疑问 闭嘴 难过 淡定 抗议 鄙视 猪头