WordPress后台的“菜单”选项可以通过拖拽直接形成二级、三级菜单,可如何定义它们的样式,使其在前端完美的显示呢,本文就详细的介绍一下。
首先你需要在 functions.php 中使用 register_nav_menus 函数注册菜单,如本主题注册的几个菜单是:
- <?php
- register_nav_menus( array(
- 'header_menu' => '头部菜单' ,
- 'header_right_menu' => '头部右侧菜单' ,
- 'footmenu1' => '底部菜单1' ,
- 'footmenu2' => '底部菜单2',
- 'footmenu3' => '底部菜单3',
- ) );
- ?>
这样你在后台的“菜单”选项里面就能看到“头部菜单”、“头部右侧菜单”等几个选项了。你可以分别为它们分配一个自建的菜单。
然后,在需要显示它们的地方使用wp_nav_menu 函数进行调用,如本主题调用的头部菜单代码:
- <?php
- if ( has_nav_menu( 'header_menu' ) ) {
- wp_nav_menu( array(
- 'theme_location' => 'header_menu',
- 'menu' => 'header_menu',
- 'depth' => 0,
- 'container' => '',
- 'container_class' => '',
- 'menu_class' => 'nav navbar-nav',
- 'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>',
- 'walker' => new WPMoMo_Bootstrap_Menu() ) );
- }
- ?>
其中的几个参数:
- ‘theme_location’:要显示的菜单,必须是在register_nav_menu() 中注册过的菜单才行。
- ‘menu’:要显示的菜单,可使用id,slug或者名字。
- ‘depth’:显示几级菜单,0表示显示全部。
- ‘menu_class’ :ul 标签 class。
- ‘items_wrap’:默认<ul id=”%1$s” class=”%2$s”>%3$s</ul>,%1$s 指的是 ‘menu_id’参数,%2$s 指的是 ‘menu_class’ 参数,%3$s 指的是显示的菜单列表。
这里简要的介绍了 wp_nav_menu 函数的几个参数,详细的请参考官方文档。
此时,这段函数生成的html代码大概为:
- <ul class="nav navbar-nav">
- <li><a href="">分类 1</a></li>
- <li><a href="">分类 2</a></li>
- <li><a href="">分类 3</a>
- <ul class="sub-menu">
- <li><a href="">分类 3.1</a></li>
- <li><a href="">分类 3.2</a></li>
- <li><a href="">分类 3.3</a></li>
- </ul>
- </li>
- <li><a href="">分类 4</a></li>
- </ul>
可以看到,只用到上面几个函数,只能进行简单的样式定制(只能定义到一级菜单),如果想进行深层次的定制,就需要运用到’walker’参数,该参数接受一个自定义的walker对象,对它进行定制比较复杂,最简单的办法是从 \wp-includes\nav-menu-template.php 中找到默认的Walker_Nav_Menu函数,然后只修改你想改变的地方,比如本主题改变的是二级、三级菜单的类。
改变二级、三级菜单的类:
- <?php
- function start_lvl( &$output, $depth = 0, $args = array() ) {
- if( $depth == 0 ){
- $output .= '<ul class="dropdown-menu">';
- }else{
- $output .= '<ul class="dropdown2">';
- }
- }
- ?>
- <?php
- function end_lvl( &$output, $depth = 0, $args = array() ) {
- if( $depth == 0 ){
- $output .= "</ul>";
- }else{
- $output .= '</ul>';
- }
- }
- ?>
上面的代码将二级菜单设置为<ul class=”dropdown-menu”>,三级菜单设置为<ul class=”dropdown2″>。