将wordpress菜单添加到引导程序

将WordPress菜单添加到Bootstrap导航栏是一个常见的需求，可以通过以下步骤实现：

基础概念

WordPress菜单：WordPress允许用户创建和管理网站导航菜单。
Bootstrap导航栏：Bootstrap是一个流行的前端框架，提供了响应式的导航栏组件。

类型与应用场景

类型：主要分为顶部导航栏和侧边导航栏。
应用场景：适用于各种类型的网站，如博客、企业官网、电商网站等。

实现步骤

以下是将WordPress菜单添加到Bootstrap导航栏的详细步骤：

1. 创建WordPress菜单

首先，在WordPress后台创建一个新的菜单：

进入 外观 -> 菜单。
点击 创建新菜单，输入菜单名称并保存。
添加需要的菜单项，然后保存菜单。

2. 编辑主题文件

在你的WordPress主题的 header.php 文件中添加以下代码：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">网站名称</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <?php
      wp_nav_menu(array(
        'theme_location' => 'primary', // 使用你在WordPress后台设置的菜单位置
        'menu_class' => 'navbar-nav',
        'container' => false,
        'fallback_cb' => '__return_false'
      ));
    ?>
  </div>
</nav>

3. 确保Bootstrap已加载

确保你的主题已经加载了Bootstrap的CSS和JS文件。可以在 functions.php 中添加以下代码：

function enqueue_bootstrap() {
  wp_enqueue_style('bootstrap-css', 'https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css');
  wp_enqueue_script('jquery', 'https://code.jquery.com/jquery-3.5.1.slim.min.js', array(), null, true);
  wp_enqueue_script('popper-js', 'https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js', array(), null, true);
  wp_enqueue_script('bootstrap-js', 'https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js', array(), null, true);
}
add_action('wp_enqueue_scripts', 'enqueue_bootstrap');