导航菜单

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

注册菜单

在您的主题 functions.php 文件中，需要注册您的菜单(s)。这将设置将在 外观 -> 菜单中显示的名称。

首先，您将使用register_nav_menus()来注册菜单。

在此示例中，“管理位置”选项卡添加了两个位置：“页眉菜单”和“额外菜单”。

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()来告诉主题在哪里显示它们。例如，将以下代码添加到您的header.php文件中以显示上面注册的 header-menu。

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

完整的参数列表可以在函数参考中的wp_nav_menu()页面中找到

对您的主题中要显示的每个额外菜单重复此过程。可选地，您可以添加一个容器类，以便使用 CSS 样式化菜单。

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

CSS 类的完整列表可以在函数参考中的wp_nav_menu()页面中找到。您可以使用这些类来样式化您的菜单。

显示附加内容

下面是 Twenty Seventeen 页脚社交菜单的简化版本，它在菜单项标签文本之前和之后显示span元素。

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

输出将显示为…

[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]

要在每个菜单项的<li>和<a>元素之间显示文本，请使用before和after参数。

定义回调函数

默认情况下，当找不到指定的菜单或位置时，WordPress 会显示第一个非空菜单，或者在没有选择自定义菜单时生成一个页面菜单。要防止这种情况发生，请使用theme_location和fallback_cb参数。

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
  )
);