如何用Bootstrap制作WordPress主题（3）-菜单的处理

提前阅读：

WordPress主题制作之菜单

在使用wp_nav_menu设置菜单显示项，对于二级菜单的类名（默认sub-menu）无法修改。在这种情况下可以利用Walker来设置。

实际上，wp_nav_menu()函数默认调用了一个核心提供的对象，即“Walker_ Nav_Menu”。

这里重新写了一个类，比如起名wp_bootstrap_navwalker()，继承“Walker_ Nav_Menu”并重新编写。以便构造合适的多级菜单。

通过代码：‘walker’ => new wp_bootstrap_navwalker() 调用该对象。实现对二级菜单类名的修改。

案例，原始代码如下（还没有调用wordpress代码）：

  <!-- Navigation -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top">
      <div class="container">
        <a class="navbar-brand" href="#">Start Bootstrap</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item active">
              <a class="nav-link" href="#">Home
                <span class="sr-only">(current)</span>
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">About</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Services</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Contact</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

实现步骤如下：

第一步、准备类：

如下类是我们在一直支持bootstrap的主题中找到的，

文件名：class-wp-bootstrap-navwalker.php

类：understrap_WP_Bootstrap_Navwalker()

class Understrap_WP_Bootstrap_Navwalker extends Walker_Nav_Menu

其他来源：

https://github.com/wp-bootstrap/wp-bootstrap-navwalker

第二步：在functions.php导入bootstrap菜单样式

include_once(‘inc/wp_bootstrap_navwalker.php’);

第三步：显示

<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top">
<div class="container">
<a class="navbar-brand" href="#">Start Bootstrap</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- The WordPress Menu goes here -->
<?php

wp_nav_menu(
array(
'theme_location' => 'menu-1',
'container_class' => 'collapse navbar-collapse',
'container_id' => 'navbarNavDropdown',
'menu_class' => 'navbar-nav ml-auto',
'fallback_cb' => '',
'menu_id' => 'main-menu',
'depth' => 2,
'walker' => new Understrap_WP_Bootstrap_Navwalker(),
)
);

?>	
</div>
</nav>

对应HTML

<!-- Navigation -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top">
        <div class="container">
            <a class="navbar-brand" href="#">Start Bootstrap</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
            </button>
            <!-- The WordPress Menu goes here -->
            <div id="navbarNavDropdown" class="collapse navbar-collapse">
                <ul id="main-menu" class="navbar-nav ml-auto">
                    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-1121" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1121 nav-item"><a title="Home" href="#" class="nav-link">Home</a></li>
                    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-1122" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1122 nav-item"><a title="About" href="#" class="nav-link">About</a></li>
　　　　　　　　　　　　　　　　<ul class="dropdown-menu" aria-labelledby="menu-item-dropdown-1122" role="menu">
　　　　　　　　　　　　　　　　　　<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-1125" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1125 nav-item"><a title="sub-about" href="#" class="dropdown-item">sub-about</a></li>
　　　　　　　　　　　　　　　　</ul>

                    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-1123" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1123 nav-item"><a title="Services" href="#" class="nav-link">Services</a></li>

                    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-1124" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1124 nav-item"><a title="Contact" href="#" class="nav-link">Contact</a></li>
                </ul>
            </div>    
        </div>
    </nav>

如何用Bootstrap制作WordPress主题（3）-菜单的处理

猜你喜欢