Use wordpress station program ultimately used menu functions official, for the love of a toss of the preceding WEB lovers that uncontrollable css selectors really looked headache, as this use the following html menu function preceding the default code generated Code which appeared in more than id and class selectors, but these are all we can to a certain ratio, and thus a series of redundant code.
Speaking before deleting superfluous WordPress navigation menu ID and Class, we first look at increasing the WordPress menu template method, in functions.php file with the following code:
-
if(function_exists('register_nav_menus')){ -
register_nav_menus( -
array( -
'header-MENU' => __ ( 'menu name A' ) , -
'footer-MENU' => __ ( 'menu name B' ) , -
'Sider-MENU' => __ ( 'menu name C' ) -
) -
); -
}
The easiest way to call the front desk to add the following codes:
-
<?php wp_nav_menu(); ?>
It may be performed more control on this menu, as follows:
-
<?php wp_nav_menu( -
array( -
'theme_location' => '' // name specified navigation display, if not set, a first display -
'menu' => 'header-menu', -
'Container' => 'NAV' , // outermost container tag name -
'container_class' => 'Primary' , // class name outermost container -
'container_id is' => '' , // outermost container id value -
'menu_class' => 'sf-menu', //ul标签class -
'menu_id' => 'the topnav' , // UL tag id -
'echo' => to true , // whether the printing, the default is true, if you want to use the navigation code an assignment may be set to false -
'fallback_cb' => 'wp_page_menu' , // backup navigation menu functions not called in the background to set the navigation -
'before' => '' , // display a navigation tag before -
'After' => '' , // the navigation display after a tag -
'link_before' => '' , // name displayed after the navigation links -
'link_after' => '' , // name displayed before the navigation links -
'items_wrap' => '<ul id="%1$s">%3$s</ul>', -
'depth' => 0 , the menu display //// layers, the default is to display all layers 0,0 -
'Walker' => '' // // call the object definition display a navigation menu)); -
?>
Wp_nav_menu using () adding menu, many CSS selector outputs, such as the following code:
-
<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="/">WPMAKER</a></li> -
<li id="menu-item-13" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-13"><a href="/news">WordPress资讯</a></li> -
<li id="menu-item-8" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-8"><a href="/themes">WordPress主题</a></li>
The above code is generated with the default menu functions which I only used the menu-item like id = "menu-item-13" class = "menu-item menu-item-type-taxonomy menu-item-object-category menu -item-13 "these are useless, and today I put the code to remove the excess css selected to share to you, the code is very simple to remove these wordpress code does not use a filter, you can add the following code to the topic the functions.php, removing all css selectors:
-
/** -
* Removed redundant menu CSS selectors -
*/ -
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() : ''; -
}
Output results are as follows, streamlined enough of it:
-
<li><a href="/">WPMAKER</a></li> -
<li><a href="/news">WordPress资讯</a></li> -
<li><a href="/themes">WordPress主题</a></li>
However, you may want to consider the current menu to define certain styles, such as highlight the current menu, then you need to keep some CSS selectors to define the current menu. Common current menu selector has the following four:
- current-post-ancestor
- current-menu-ancestor
- current-menu-item
- current-menu-parent
-
/** -
* Removed redundant menu CSS selectors -
*/ -
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')) : ''; -
}
As a result, the navigation menu in WordPress we often use the selectors have (menu-item, current-menu-item, current-post-parent, current-menu-parent) these so we can put a few labels are retained if the current access is the code WPMAKER home page, the output is:
-
<li class="current-menu-item"><a href="/">WPMAKER</a></li> -
<li><a href="/news">WordPress资讯</a></li> -
<li><a href="/themes">WordPress主题</a></li>
Retains class = "current-menu-item", add style to this class.