如何在WordPress中插入Bootstrap 4菜单？

Question

我正在尝试设置Bootstrap 4导航栏菜单，但无法使其按我想要的方式工作。

新的Bootstrap 4导航栏菜单代码如下所示。

<nav class="navbar navbar-expand-lg navbar-dark bg-success">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
  <div class="navbar-nav mr-auto">
    <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
    <a class="nav-item nav-link" href="#our-company">Our Company</a>
    <a class="nav-item nav-link" href="#our-products">Products</a>
  </div>
  <div class="navbar-nav">
    <a class="nav-item nav-link" href="#"><i class="fa fa-envelope mr-2"></i>[email protected]</a>
    <a class="nav-item nav-link" href="#"><i class="fa fa-phone mr-2"></i>[phone]</a>
  </div>
</div>
</nav>

[请注意，导航项由具有类别navbar-nav的div包围，该div也由具有崩溃类别navbar-collapse的父div包围。它的最外面的父div是带有导航栏类的nav。

另一方面，WordPress显示菜单的方式看起来像这样。

<div class="menu-main-menu-container">
  <ul id="menu-main-menu" class="menu">
    <li id="menu-item-11" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-11">
      <a href="#">Home</a>
    </li>
    <li id="menu-item-12" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-12">
      <a href="#our-company">Our Company</a>
    </li>
    <li id="menu-item-13" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-13">
      <a href="#our-products">Our Products</a>
    </li>
  </ul>
</div>

WordPress使用ul和li执行菜单。而Bootstrap是通过div和anchor标签实现的。

我的WordPress菜单编码方式如下：

<?php
  wp_nav_menu([
    'theme_location'  => 'primary',
    'container'       => 'div',
    'container_id'    => '',
    'container_class' => 'collapse navbar-collapse',
    'menu_class'      => 'navbar-nav mr-auto',
  ]);
?>

现在，当菜单生成时，它在网站上看起来像这样。

<div class="navbar-nav mr-auto">
  <ul>
    <li class="page_item page-item-7 current_page_item">
      <a href="http://localhost/envirodyn/" aria-current="page">Home</a>
    </li>
  </ul>
</div>

如果这是WordPress的工作方式，那么至少我希望能够向ul添加类.navbar-nav，向li标签添加.nav-item，向锚标签添加.nav-link。

那样，看起来像这样

<ul class="navbar-nav">
  <li class="nav-item">
    <a class="nav-link">Menu 1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link">Menu 2</a>
  </li>
</ul>

Answer 1

您可以使用wp bootstrap navwalker将Bootstrap导航栏与wordpress集成在一起>