移除 WordPress 菜单默认的多余的 CSS 选择器 id 或 class
发布于
by
相信应该还是有很多 WordPress 主题都使用的 wp_nav_menu()这个函数来添加菜单，这个函数默…
相信应该还是有很多 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优化、
本文收集自互联网，转载请注明来源。
如有侵权，请联系 wper_net@163.com 删除。
猜你喜欢GUESS YOU LIKE
还没有任何评论，赶紧来占个楼吧！