WordPress自带菜单功能实现多级菜单及自定义样式

WordPress自带菜单功能实现多级菜单及自定义样式

A^- A⁺

MoMo2015.4.21 菜单 菜单 2921 次浏览 6

WordPress后台的“菜单”选项可以通过拖拽直接形成二级、三级菜单，可如何定义它们的样式，使其在前端完美的显示呢，本文就详细的介绍一下。

首先你需要在 functions.php 中使用 register_nav_menus 函数注册菜单，如本主题注册的几个菜单是：

1. php
2. register_nav_menus( array(
3. 'header_menu' => '头部菜单' ,
4. 'header_right_menu' => '头部右侧菜单' ,
5. 'footmenu1' => '底部菜单1' ,
6. 'footmenu2' => '底部菜单2',
7. 'footmenu3' => '底部菜单3',
8. ) );
9. ?>

这样你在后台的“菜单”选项里面就能看到“头部菜单”、“头部右侧菜单”等几个选项了。你可以分别为它们分配一个自建的菜单。

然后，在需要显示它们的地方使用wp_nav_menu 函数进行调用，如本主题调用的头部菜单代码：

1. php
2. if ( has_nav_menu( 'header_menu' ) ) {
3. wp_nav_menu( array(
4. 'theme_location' => 'header_menu',
5. 'menu'              => 'header_menu',
6. 'depth'             => 0,
7. 'container'         => '',
8. 'container_class'   => '',
9. 'menu_class'        => 'nav navbar-nav',
10. 'items_wrap'        => '
    %3$s
    ',
11. 'walker' => new WPMoMo_Bootstrap_Menu() ) );
12. }
13. ?>

其中的几个参数：

• ‘theme_location’：要显示的菜单，必须是在register_nav_menu() 中注册过的菜单才行。
• ‘menu’：要显示的菜单，可使用id，slug或者名字。
• ‘depth’：显示几级菜单，0表示显示全部。
• ‘menu_class’ ：ul 标签 class。
• ‘items_wrap’：默认
  %3$s
  ，%1$s 指的是 ‘menu_id’参数，%2$s 指的是 ‘menu_class’ 参数，%3$s 指的是显示的菜单列表。

这里简要的介绍了 wp_nav_menu 函数的几个参数，详细的请参考官方文档。

此时，这段函数生成的html代码大概为：

1. class="nav navbar-nav">
3. href="">分类 1
5. href="">分类 2
7. href="">分类 3
8. class="sub-menu">
10. href="">分类 3.1
12. href="">分类 3.2
14. href="">分类 3.3
18. href="">分类 4

可以看到，只用到上面几个函数，只能进行简单的样式定制（只能定义到一级菜单），如果想进行深层次的定制，就需要运用到’walker’参数，该参数接受一个自定义的walker对象，对它进行定制比较复杂，最简单的办法是从 \wp-includes\nav-menu-template.php 中找到默认的Walker_Nav_Menu函数，然后只修改你想改变的地方，比如本主题改变的是二级、三级菜单的类。

改变二级、三级菜单的类:

1. php
2. function start_lvl( &$output, $depth = 0, $args = array() ) {
3. if( $depth == 0 ){
4. $output .= '
   ';
   • }else{
   • $output .= '
     ';
     • }
     • }
     • ?>

1. php
2. function end_lvl( &$output, $depth = 0, $args = array() ) {
3. if( $depth == 0 ){
4. $output .= "";
5. }else{
6. $output .= '';
7. }
8. }
9. ?>

上面的代码将二级菜单设置为

，三级菜单设置为
。