How to create a theme navigation menu in WordPress (1)

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.

The production of WP 3.0 custom 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 the management background of WordPress - Appearance - Menu column, 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 is wp_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:

<?php 
    // 列出顶部导航菜单，菜单名称为mymenu，只列出一级菜单
    wp_nav_menu( array( &#39;menu&#39; => &#39;mymenu&#39;, &#39;depth&#39; => 1) );
?>

The above code The format of the output HTML code is as follows:

<div class="menu-menu-container">
    <ul class="menu" id="menu-menu">
        <li class="..." id="menu-item-1"><a href="...">首页</a></li>
        <li class="..." id="menu-item-2"><a href="...">分类A</a></li>
        ...
    </ul>
</div>

The li items listed here are the columns you added in Backstage-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 A is the category to which this article belongs, then The li where category A is located will look like the following code:

<li class="menu-item menu-item-type-taxonomy current-post-ancestor current-menu-parent current-post-parent menu-item-5" id="menu-item-2"><a href="...">分类A</a></li>

If it is on the home page, then the li of the menu item on the home page may look like this:

<li class="menu-item menu-item-type-custom current-menu-item current_page_item menu-item-home menu-item-4" id="menu-item-1"><a href="..">首页</a></li>

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.

Use categories and pages as navigation bars

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

Production of unconventional navigation bar

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:

<ul>
    <li class="..">...</li>
    <li class="..">...</li>
</ul>

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:

<dl>
    <dt><strong>标题</strong></dt>
    <dd><a target="_blank" title="#" href="#">菜单A</a></dd>
    <dd><a target="_blank" title="#" href="#">菜单B</a></dd>
</dl>

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!