云策 WordPress 开发者社区

主题开发文档

导航菜单

查看官方原文 ↗
💡 云策文档标注

概述

导航菜单是 WordPress 主题中可自定义的菜单，允许用户添加页面、文章、分类和 URL。创建导航菜单需要先注册菜单，然后在主题的适当位置显示。

关键要点

  • 使用 register_nav_menus() 在 functions.php 中注册菜单，定义菜单名称和位置。
  • 使用 wp_nav_menu() 在主题文件中显示菜单，通过 theme_location 参数指定注册的菜单位置。
  • wp_nav_menu() 支持多种参数，如 container_class 用于添加 CSS 类、link_before 和 link_after 用于在菜单项标签前后添加内容。
  • 通过 theme_location 和 fallback_cb 参数控制菜单未找到时的回退行为，避免默认显示其他菜单或页面菜单。

代码示例

// 注册菜单示例
function register_my_menus() {
  register_nav_menus(
    array(
      'header-menu' => __( 'Header Menu' ),
      'extra-menu' => __( 'Extra Menu' )
     )
   );
 }
 add_action( 'init', 'register_my_menus' );

// 显示菜单示例
wp_nav_menu( array( 'theme_location' => 'header-menu' ) );

// 添加 CSS 类示例
wp_nav_menu(
  array(
    'theme_location' => 'extra-menu',
    'container_class' => 'my_extra_menu_class'
  )
);

// 显示额外内容示例
wp_nav_menu(
  array(
    'menu' => 'primary',
    'link_before' => '<span class="screen-reader-text">',
    'link_after' => '</span>',
  )
);

// 定义回调示例
wp_nav_menu(
  array(
    'menu' => 'primary',
    'theme_location' => '__no_such_location',
    'fallback_cb' => false
  )
);
📄 原文内容

Navigation Menus are customizable menus in your theme. They allow users to add Pages, Posts, Categories, and URLs to the menu. To create a navigation menu you’ll need to register it, and then display the menu in the appropriate location in your theme.

Register Menus

In your theme’s functions.php, you need to register your menu(s). This sets the name that will appear at Appearance -> Menus.

First of all, you will use register_nav_menus() to register the menu.

In this example, two locations are added to the “Manage Locations” tab: “Header Menu” and “Extra Menu”.

function register_my_menus() {
  register_nav_menus(
    array(
      'header-menu' => __( 'Header Menu' ),
      'extra-menu' => __( 'Extra Menu' )
     )
   );
 }
 add_action( 'init', 'register_my_menus' );

Display Menus

Once you’ve registered your menus, you need to use wp_nav_menu() to tell your theme where to display them. For example, add the following code to your header.php file to display the header-menu that was registered above.

wp_nav_menu( array( 'theme_location' => 'header-menu' ) );

A full list of parameters can be found in the wp_nav_menu() page in the function reference

Repeat this process for any additional menus you want to display in your theme. Optionally, you can add a container class which allows you to style the menu with CSS.

wp_nav_menu(
  array(
    'theme_location' => 'extra-menu',
    'container_class' => 'my_extra_menu_class'
  )
);

A full list of CSS Classes can be found in the wp_nav_menu() page in the function reference. You can use these to style your menus.

Display Additional Contents

Below is a simplified version of the Twenty Seventeen footer social menu, which displays span elements before and after the menu item label text.

wp_nav_menu(
  array(
    'menu' => 'primary',
    'link_before' => '<span class="screen-reader-text">',
    'link_after' => '</span>',
  )
);

The output will display as…

[html]
<div class="menu-social-container">
<ul id="menu-social">
<li id="menu-item-1">
<a href="http://twitter.com/"><span class="screen-reader-text">Twitter</span>
</li>
</ul>
</div>
[/html]

To display text between the <li> and <a> elements for each menu item, use before and after parameters.

Define Callback

By default, WordPress displays the first non-empty menu when the specified menu or location is not found, or generates a Page menu when there is no custom menu selected. To prevent this, use the theme_location and fallback_cb parameters.

wp_nav_menu(
  array(
    'menu' => 'primary',
    // do not fall back to first non-empty menu
    'theme_location' => '__no_such_location',
    // do not fall back to wp_page_menu()
    'fallback_cb' => false
  )
);