您的位置 首页 建站百科

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

WordPress后台的“菜单”选项可以通过拖拽直接形成二级、三级菜单,可如何定义它们的样式,使其在前端完美的…

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’        => ‘<ul id=”%1$s” class=”%2$s”>%3$s</ul>’,
  11. ‘walker’ => new WPMoMo_Bootstrap_Menu() ) );
  12. }
  13. ?>

其中的几个参数:

  • ‘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代码大概为:

  1. <ul class=”nav navbar-nav”>
  2. <li><a href=””>分类 1</a></li>
  3. <li><a href=””>分类 2</a></li>
  4. <li><a href=””>分类 3</a>
  5. <ul class=”sub-menu”>
  6. <li><a href=””>分类 3.1</a></li>
  7. <li><a href=””>分类 3.2</a></li>
  8. <li><a href=””>分类 3.3</a></li>
  9. </ul>
  10. </li>
  11. <li><a href=””>分类 4</a></li>
  12. </ul>

可以看到,只用到上面几个函数,只能进行简单的样式定制(只能定义到一级菜单),如果想进行深层次的定制,就需要运用到’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 .= ‘<ul class=”dropdown-menu”>’;
  5. }else{
  6. $output .= ‘<ul class=”dropdown2″>’;
  7. }
  8. }
  9. ?>

  1. <?php
  2. function end_lvl( &$output, $depth = 0, $args = array() ) {
  3. if( $depth == 0 ){
  4. $output .= “</ul>”;
  5. }else{
  6. $output .= ‘</ul>’;
  7. }
  8. }
  9. ?>

上面的代码将二级菜单设置为<ul class=”dropdown-menu”>,三级菜单设置为<ul class=”dropdown2″>。

本文来自网络,不代表USYOUNG企业建站百科网立场,转载请注明出处:http://www.usyoung.com/37.html

作者: USYOUNG

USYOUNG致力于长沙企业互联网服务,服务内容涵盖网站建设,网站代运营,LOGO设计等。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

联系我们

联系我们

13266745780

在线咨询: QQ交谈

邮箱: 1444646479@qq.com

工作时间:周一至周五,9:00-17:30,节假日休息

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部