WordPress 的导航菜单：注册菜单位置，显示导航，相关参数，还有激活菜单项

在设计 WordPress 主题的时候需要在主题里的模板文件里显示出我们在 WordPress 的管理后台定制的导航菜单。下面介绍一下流程跟方法。

注册导航菜单的位置

你可以注册多个导航菜单的位置，然后你可以在模板文件中决定什么地方使用什么位置的导航菜单。注册导航菜单位置是在主题的 functions.php 文件里。像下面这样：

function mytheme_setup(){
 
  // 注册菜单
  register_nav_menu( 'primary', __( 'Primary Menu', 'mytheme' ) );

}
add_action( 'after_setup_theme', 'mytheme_setup' );

mytheme_setup() 是我们自己创建的一个函数，函数下面的 add_action( 'after_setup_theme', 'mytheme_setup' ); 这行代码，是把我们自己创建的 mytheme_setup() 这个函数挂载到 after_setup_theme() 这个函数上面，这个函数会在 WordPress 初始化主题的时候调用，调用它的同时，也会调用我们自己的 mytheme_setup() 这个函数。

在 mytheme_setup() 这个函数里，我们使用 register_nav_menu() 来注册了一个导航菜单的位置 ... 这个位置的名字叫 primary ，名字的后面是一个描述，这个描述文件可以显示在 WordPress 的管理后台上，我们把描述文字定义成了可被翻译的字符串，你可以为它创建不同语言的翻译版本。

注 如果在你自已的主题中应用这段代码，需要把这里所有出现的 mytheme 修改成你自己的主题的名称。

在管理后台创建菜单

在主题中注册了导航菜单的位置，然后打开 WordPress 管理后台，外观 - 菜单，在这里你可以创建一个菜单。然后在 主题位置 这里，你可以看到你注册的菜单位置，这里应该会显示一个 Primary Menu。点击下拉菜单，选择你想在这个位置上显示的菜单，然后 保存。

在主题的模板文件中显示导航菜单

目前在我们注册的导航菜单位置上已经指定了一个菜单，如果你想在主题模板文件中显示这个位置上的导航菜单，可以使用 wp_nav_menu() ，看起来像这样：

<?php wp_nav_menu( array(
  'theme_location'     =>     'primary',
  ) );
 ?>
 

我们设置了一下 wp_nav_menu() 的 theme_location 参数，参数的值为 primary，意思就是，我们在这里要显示在 primary 这个位置上的导航菜单。 现在，在 WordPress 的某些页面中就应该可以显示出这个导航菜单了，剩下的事儿就是为这个导航菜单添加一些自定义的样式。

wp_nav_menu() 输出的导航菜单代码演示

代码：

<ul>
  <li id="menu-item-422" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-422"><a href="http://fenikso:8888/">首页</a></li>
  <li id="menu-item-56" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-56"><a href="http://fenikso:8888/?cat=3">真实婚礼</a>
    <ul class="sub-menu">
      <li id="menu-item-57" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-57"><a href="http://fenikso:8888/?cat=4">后院婚礼</a></li>
      <li id="menu-item-58" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-58"><a href="http://fenikso:8888/?cat=8">海滩婚礼</a></li>
      <li id="menu-item-59" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-59"><a href="http://fenikso:8888/?cat=7">绿色婚礼</a></li>
    </ul>
  </li>
</ul>

视图：

• 首页
• 真实婚礼
  • 后院婚礼
  • 海滩婚礼
  • 绿色婚礼

激活菜单项

WordPress 会在当前页面的菜单项上添加一个 .current-menu-item 类，如果当前页面是某个菜单项的子菜单，那么在这个父菜单项上会添加一个 .current-menu-ancestor 类。你可以根据这两个类在样式表里添加样式，让用户很容易区分出当前所在的位置属于哪个菜单项。

在激活菜单项上添加自定义的 CSS 类

我们可以在主题的 functions.php 文件里创建一个函数，用来改变添加到菜单项上的 css 类。可以使用下面的代码：

/*
 * 给激活的导航菜单添加 .active
 */
function mytheme_nav_menu_css_class( $classes ) {
     if ( in_array('current-menu-item', $classes ) OR in_array( 'current-menu-ancestor', $classes ) )
          $classes[]     =     'active';
     return $classes;
}
add_filter( 'nav_menu_css_class', 'mytheme_nav_menu_css_class' );

上面这段代码的意思是，查找菜单项里是否有 .current-menu-item 或 .current-menu-ancestor ，如果有，那么在这个菜单项上再添加一个 .active 类。 add_filter( 'nav_menu_css_class', 'mytheme_nav_menu_css_class' ); 这行代码是把我们自己创建的函数挂载到 nab_menu_css_class() 这个函数上，它应该是为菜单项添加 css 类的函数，当 WordPress 执行这个函数的时候，同时也会执行我们自已创建的 mytheme_nav_menu_css_class() 这个函数。

注 在自己的主题中使用这段代码，要把 mytheme 替换成你自己的主题的名称。