area data-settings="dblclick" readonly ><li id="menu-item-6" ><a href="http://www.inhv/">测速网首页</a></li><li id="menu-item-13" ><a href="http://www.inhv/wordpress-jian-zhan">WordPress建站</a></li><li id="menu-item-8" ><a href="http://www.inhv/wordpress-zi-xun-zhu-ti">WordPress主题</a></li>area>123<li id="menu-item-6" ><a href="http://www.inhv/">测速网首页</a></li><li id="menu-item-13" ><a href="http://www.inhv/wordpress-jian-zhan">WordPress建站</a></li><li id="menu-item-8" ><a href="http://www.inhv/wordpress-zi-xun-zhu-ti">WordPress主题</a></li>
在wordpress主题菜单调用中,程序通常会默认生成类似上面的累赘css属性样式;但通常我们在wordpress主题的制作开发过程中是用不到的这样繁杂的属性的;我们可以通过优化函数将默认的这样css选择器去除性。方法如下
在主题的functions.php文件件添加如下函数:
area data-settings="dblclick" readonly >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')) : '';}area>123456789add_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')) : '';}
代码的第 9 行的数组内容保留了 class=”current-menu-item”等四个样式 ,让你可以自由定义当前菜单的高亮样式
最终呈现的代码如下;
area data-settings="dblclick" readonly ><li ><a href="http://www.inhv/">测速网首页</a></li><li><a href="http://www.inhv/wordpress-jian-zhan">WordPress建站</a></li><li><a href="http://www.inhv/wordpress-zi-xun-zhu-ti">WordPress主题</a></li>area>123<li ><a href="http://www.inhv/">测速网首页</a></li><li><a href="http://www.inhv/wordpress-jian-zhan">WordPress建站</a></li><li><a href="http://www.inhv/wordpress-zi-xun-zhu-ti">WordPress主题</a></li>