WordPress主题开发 — 导航菜单

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

注册菜单

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

首先，你将使用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文件中，以显示上面注册的标题菜单。

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

注意：可以在函数引用的wp_nav_menu()页面中找到CSS类的完整列表。 您可以使用这些来设计菜单。

显示其他内容

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

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>元素之间显示文本，请在参数之前和之后使用。

定义回调

默认情况下，当没有找到指定的菜单或位置时，WordPress显示第一个非空菜单，或者当没有选择自定义菜单时，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
  )
);