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://jiloc: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://jiloc: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://jiloc: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://jiloc: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://jiloc: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 替换成你自己的主题的名称。

腾讯云限时秒杀【点击购买】

搬瓦工,CN2高速线路,1GB带宽,电信联通优化KVM,延迟低,速度快,建站稳定,搬瓦工BandwagonHost VPS优惠码BWH26FXH3HIQ,支持<支付宝> 【点击购买】!

Vultr$3.5日本节点,512M内存/500G流量/1G带宽,电信联通优化,延迟低,速度快【点击购买】!

阿里云香港、新加坡VPS/1核/1G/25G SSD/1T流量/30M带宽/年付¥288【点击购买】