How to create a theme navigation menu in WordPress? The following article will share with you several methods of making WordPress theme navigation menu. I hope it will be helpful to you!
In the production of WordPress themes, the production of navigation menus is a key point. The HTML code of the navigation menu has been written. How to dynamically call it in the WordPress theme? This article will introduce you to several methods of writing PHP code to dynamically implement navigation. This article will only focus on the development of dynamic code and will not teach you how to write HTML, CSS and Javascript to implement a gorgeous navigation menu.
Versions after WordPress 3.0 begin to support custom dynamic menus. The so-called dynamic menus allow users to decide which items to use. Add the item to the navigation menu, enter themanagement background of WordPress - Appearance - Menucolumn, and create your own menu by dragging the corresponding column. This is a happy thing for both WordPress theme developers and users. To implement a custom menu, the function you need to use iswp_nav_menu(). Passing some parameters to this function can output the custom menu. Let’s briefly talk about how to use this function.
First, add the following menu registration code between the in functions.php in the theme directory, so that you can use the wp_nav_menu function in the theme file ：
// This theme uses wp_nav_menu() in one location. register_nav_menus();
Then we call wp_nav_menu() on the theme’s navigation bar to output the navigation menu HTML code:
'mymenu', 'depth' => 1) ); ?>
The above code The format of the output HTML code is as follows:
The li items listed here are the columns you added inBackstage-Appearance-Menu, if you are not in the background yet Add a menu and the navigation bar will list all pages. In addition, wp_nav_menu will add a class to each li. Different classes mark the attributes of this menu item. For example, if an article page is currently opened,Category Ais the category to which this article belongs, thenThe li where category Ais located will look like the following code:
If it is on the home page, then the li of the menu item on the home page may look like this:
You can know their functions from the names of these classes. By adding css attributes to these classes, you can achieve the purpose of highlighting the current navigation menu, such as defining the current menu link in red:
.current-post-ancestor a, .current-menu-parent a, .current-menu-item a, .current_page_item a { color: red; }
Okay, calling the custom menu of WordPress 3.0 is so simple. wp_nav_menu also has many parameters, such as custom ul node, id and class parameters of the ul parent node, etc.
Before WordPress 3.0, most WordPress themes used pages as navigation bars, and you could only add pages in the navigation. Doesn't seem free enough. When I first started using WordPress 2.7, I was worried about this problem. Finally, I looked through the documentation, checked some information, and realized adding categories in the navigation. For details, please see the article I wrote before:WordPress categories as navigation bar. And highlight
The two methods mentioned above are all implemented using WordPress’s own functions. The HTML codes they input are also limited, using the form of ul li to build the menu list: such as:
If the front-end code of the theme is not written by you, and the navigation The code of the column is very confusing. This is not the WordPress standard ul navigation bar form above, such as the following code:
Rewrite the front-end code? I don’t think anyone is willing to do this, so what should we do? Also, what if the navigation bar does not use categories and pages, and does not allow the use of custom menus? In actual applications, we will also encounter various and strange requirements. We will continue to explore this issue in the next issue!
Recommended learning: "WordPress Tutorial"
The above is the detailed content of How to create a theme navigation menu in WordPress (1). For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
