相信应该还是有很多 WordPress 主题都使用的 wp_nav_menu()这个函数来添加菜单,这个函数默认会输出很多 CSS 选择器,比如下面的代码:
1 2 3 | <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://zhangzifan.com.com/">首页</a></li> <li id="menu-item-13" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-13"><a href="https://zhangzifan.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="https://zhangzifan.com/network">网络营销</a></li> |
当然大家购买我们的主题已经在很早就已经做了相应的优化,大家不必担心。
如果你想移除所有的 css 选择器,可以将下面的代码添加到主题的 functions.php :
1 2 3 4 5 6 7 8 9 10 | /** * 移除菜单的多余 CSS 选择器 * From https://zhangzifan.com/remove-wordpress-nav-class-and-id.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="https://zhangzifan.com.com/">首页</a></li> <li><a href="https://zhangzifan.com/seo">SEO 优化</a></li> <li><a href="https://zhangzifan.com/network">网络营销</a></li> |
那么子凡作为一个追求极致的人来说,在追求简单快捷的时候,也不能缺少一些细节的优化与完美的效果,比如高亮显示当前菜单,那你就需要保留一些 CSS 选择器,才能定义当前菜单。常用的当前菜单的选择器有 4 个:current-post-ancestor,current-menu-ancestor,current-menu-item,current-menu-parent
所以我们还需要过滤它们即可,可以参考下面的代码:
1 2 3 4 5 6 7 8 9 10 | /** * 移除菜单的多余 CSS 选择器 * From https://zhangzifan.com/remove-wordpress-nav-class-and-id.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')) : ''; } |
如果你想保留更多 CSS 类,可以修改以下代码的第 9 行的数组内容。
这样一来,如果当前访问的是泪雪博客的首页,输出的代码就是:
1 2 3 | <li class="current-menu-item"><a href="https://zhangzifan.com.com/">首页</a></li> <li><a href="https://zhangzifan.com/seo">SEO 优化</a></li> <li><a href="https://zhangzifan.com/network">网络营销</a></li> |
这样我们就可以为当前的链接做单独的样式啦!有没有觉得非常的不错呢?
更多关于WordPress优化及疑问可以添加QQ群:255308000
除非注明,否则均为泪雪博客原创文章,禁止任何形式转载
本文链接:https://zhangzifan.com/remove-wordpress-nav-class-and-id.html
留言评论