Home > Article > Backend Development > Introduction to the use of related PHP functions for custom menus in WordPress development, wordpressphp_PHP tutorial
function meaning
wp_nav_menu ()
Custom menu display function
register_nav_menu ()
Custom menu registration function – singular
register_nav_menus ()
Custom menu registration function – plural (a very painful plural form)
The following examples use the plural form of register_nav_menus () to avoid confusion.
Use location
register_nav_menus ()
In the function.php file, it is used to register the code call name and background display name of the custom menu in the background.
wp_nav_menu ()
Theme anywhere you want to call your custom menu.
How to use
Register 4 menus Correction: 3 menus (sleepy, always make mistakes.)
register_nav_menus( array( 'nav1' => 'n1', //nav1 为菜单名称(调用的时候用) //n1 为显示名称 , 后台选菜单的时候用 'nav2' => 'n2', 'nav3' => 'n3' ));
Then go to your backend => Appearance => Menu and look inside,
Basically you get it,
If you don’t understand,
Then take another look, hehe~
Add the following code to the theme where you want to display custom navigation.
//调用 nav1 的菜单 <?php wp_nav_menu( array( 'theme_location' => 'nav1' ) ); ?> //调用 nav2 的菜单 <?php wp_nav_menu( array( 'theme_location' => 'nav2' ) ); ?>
Then you can go to the backend to add a menu, (the name is preferably a name or Chinese. Correction: preferably English.)
You can set what is displayed and what is not displayed in this menu, and you can even set the hierarchical content of the navigation, which is very convenient.
Filter out useless CLASS values in custom menus
In the output of WordPress’s custom menu, each sub-element in the menu has a long class value. Although there is nothing unusual in appearance, it does make people feel uncomfortable when looking at the code. , in fact, there are many ways to filter out these class values. Today we will talk about removing the classes we don’t want by mounting a filter.
In WordPress 3.5.0 and later versions, the friendly link function will be canceled and implemented with a custom menu function. This is a story later.
When we output a custom menu, in order to give us better control over the custom style, WordPress will output multiple class values for the sub-elements of our menu by default, like the following.
<li id="menu-item-19" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-19">
How to filter it to make our web page source code concise and easy to read?
Add
to your functions.phpfunction filter_nav_menu_css_class ($classes){ //想要通过的class值 $do_class_name = array('current-menu-item'); $outPut = array_intersect($do_class_name,$classes); array_filter( $classes ); return $outPut; }; add_filter('nav_menu_css_class','filter_nav_menu_css_class');
The value of current-menu-item is retained here mainly to identify the current page.
Actually,
There are other ways to filter the output class value,
For example, control the Walker_Nav_Menu class to precisely control the output of the custom menu,
But because it is more troublesome, I won’t mention it here. In fact, the Walker_Nav_Menu class can complete more functions we need.
Summary – Things to note
Custom menu is a functional concept introduced only after WordPress 3.0. It is somewhat similar to the previous widgets, but the custom menu is more inclined to navigation purposes. However, due to the slow Chinese translation and spread of the new function, and the Bloggers who like to mess around with this function as long as the theme is formed generally won't bother with navigation, so everyone still doesn't understand it, and there are even situations where wrong tutorials are flying all over the place. Here I hope some bloggers will use it when publishing blog posts. Don't focus on reprinting. Even if you reprint some of the main functions, please test them in detail to avoid misleading newcomers.
Note:
If there is no menu set for the custom navigation in the background settings, then wp will automatically add all pages as navigation to the navigation without setting the menu. This is a painful default, so if we don’t want to display this navigation , you'd better set an empty menu the day after tomorrow, and then add this menu to the navigation you don't want to display, so that the custom navigation will not be displayed.