如何在 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@companyname.com</a>
    <a class="nav-item nav-link" href="#"><i class="fa fa-phone mr-2"></i>+1-234-567-8910</a>
  </div>
</div>
</nav>

注意，nav-items 被一个带有 navbar-nav 类的 div 包围，该 div 也被一个具有 collapse navbar-collapse 类的父 div 包围。它最外层的父 div 是带有 navbar 类的 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 和锚标签来实现。

我的 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 的做法，那么至少我希望能够将类 .navbar-nav 添加到 ul，将 .nav-item 添加到 li 标签，将 .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

Sarwar Alam 的建议对我有用！ 我将在此处详细回答我的问题，以防其他人遇到与我相同的情况。

1 赞成 Sarwar 的回答。

根据他的建议，我搜索了谷歌并从这个链接中找到了答案： https://techsolutionshere.com/implementing-bootstrap-navwalker-in-wordpress/

1. 我从提供的 GitHub 链接下载了class-wp-bootstrap-navwalker.php 文件。

2. 将文件放在我主题的根目录中。

3. 我在functions.php 文件中添加了以下代码。

if ( ! file_exists( get_template_directory() . '/class-wp-bootstrap-navwalker.php' ) ) {
    // file does not exist... return an error.
    return new WP_Error( 'class-wp-bootstrap-navwalker-missing', __( 'It appears the class-wp-bootstrap-navwalker.php file may be missing.', 'wp-bootstrap-navwalker' ) );
} else {
    // file exists... require it.
    require_once get_template_directory() . '/class-wp-bootstrap-navwalker.php';
}

1. 确保nav_menus 已注册（在functions.php 文件中）。

2. 然后将wp_nav_menu 代码插入我想在网站上放置导航栏菜单的区域。

wp_nav_menu( array(
    'theme_location'  => 'primary',
    'depth'           => 2, // 1 = no dropdowns, 2 = with dropdowns.
    'container'       => 'div',
    'container_class' => 'collapse navbar-collapse',
    'container_id'    => 'bs-example-navbar-collapse-1',
    'menu_class'      => 'navbar-nav mr-auto',
    'fallback_cb'     => 'WP_Bootstrap_Navwalker::fallback',
    'walker'          => new WP_Bootstrap_Navwalker(),
) );

5. 去了Appearance >> Menus 然后查了Menu Settings下我要的Display Location。

维奥拉！现在我的 Bootstrap 4 导航栏菜单正在以 WordPress 的方式工作！

Answer 2

您可以使用 wp bootstrap navwalker 类将 bootstrap navbar 与 wordpress 集成。您可以通过 google 搜索找到该课程。