导航菜单 - 主题开发手册

导航菜单是主题中可定制的菜单，它们允许用户在菜单中添加页面、文章、类别和URL。要创建一个导航菜单，你需要注册它，然后在你的主题中的适当位置显示该菜单。

注册菜单

你需要在主题的 functions.php 中注册菜单，这将设置在外观->菜单中出现的名称。

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

在本例中，有两个位置被添加到 "管理位置" 选项卡。“Header Menu” 和 “Extra Menu”。

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页脚社交菜单，它在菜单项目label文本前后显示span元素。

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

输出显示如：

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

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

定义回调

默认情况下，当没有找到指定的菜单或位置时，WordPress会显示第一个非空的菜单，或者在没有选择自定义菜单时生成一个Page菜单。为了防止这种情况，请使用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
  )
);