WordPress中引入的Bootstrap JavaScript失效，轮播组件无法运行如何解决？

1. functions.php 加载逻辑修复 #

当前存在4个核心问题：

• 加载顺序完全倒置：先加载自定义JS，后加载popper、Bootstrap JS，自定义脚本执行时依赖项还未加载完成
• 重复加载脚本：已经注册了app-js句柄，又用my_custom_script重复加载同一份app.js，属于冗余操作
• 未声明依赖项：Bootstrap JS依赖popper、jQuery，自定义JS依赖jQuery和Bootstrap JS，未声明依赖会导致执行报错
• 未引入Bootstrap核心CSS：轮播的基础样式不存在，也会导致功能表现异常
• 你问的「是否需要先注册再执行enqueue」：不需要强制先注册，直接enqueue时声明所有参数即可，注册步骤仅在多场景复用脚本、条件加载时才有必要

修复后的完整代码：

function maxprofessional_scripts() {
    // 加载样式
    wp_enqueue_style( 'bootstrap-css', 'https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css', array(), '5.1.3' );
    wp_enqueue_style( 'maxprofessional-style', get_stylesheet_uri(), array(), _S_VERSION );
    wp_enqueue_style( 'maxprofessional-main', get_template_directory_uri() . '/css/main.css' );
    wp_enqueue_style( 'bootstrap-icons', 'https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css' );

    wp_style_add_data( 'maxprofessional-style', 'rtl', 'replace' );
    
    // 加载脚本，按依赖顺序加载，全部指定到页脚加载
    wp_enqueue_script( 'bootstrap-popper', 'https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js', array(), '2.10.2', true );
    wp_enqueue_script( 'bootstrap-jdelivery', 'https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js', array('bootstrap-popper', 'jquery'), '5.1.3', true );
    // 自定义脚本声明依赖，确保依赖加载完成后再执行
    wp_enqueue_script( 'my_custom_script', get_template_directory_uri() . '/app.js', array('jquery', 'bootstrap-jdelivery'), '1.0', true );
    
    wp_enqueue_script( 'maxprofessional-navigation', get_template_directory_uri() . '/js/navigation.js', array(), _S_VERSION, true );

    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
        wp_enqueue_script( 'comment-reply' );
    }
}
add_action( 'wp_enqueue_scripts', 'maxprofessional_scripts' );

2. 轮播HTML代码修复 #

你当前用的是Bootstrap 3的轮播语法，但引入的是Bootstrap 5.1.3版本，类名和属性规则完全不兼容，需要修改以下内容：

• 轮播项类名从item改为carousel-item
• 控制按钮的data-slide属性改为Bootstrap 5要求的data-bs-slide
• Bootstrap 5已移除glyphicon图标，替换为你已经引入的bootstrap-icons对应图标
• 新增data-bs-ride="carousel"属性，开启轮播自动初始化

修复后的完整代码：

<div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="carousel slide multi-item-carousel" id="theCarousel" data-bs-ride="carousel">
          <div class="carousel-inner">
            <div class="carousel-item active">
              <div class="col-xs-4"><a href="#1"><img src="http://placehold.it/300/f44336/000000" class="img-responsive"></a></div>
            </div>
            <div class="carousel-item">
              <div class="col-xs-4"><a href="#1"><img src="http://placehold.it/300/e91e63/000000" class="img-responsive"></a></div>
            </div>
            <div class="carousel-item">
              <div class="col-xs-4"><a href="#1"><img src="http://placehold.it/300/9c27b0/000000" class="img-responsive"></a></div>
            </div>
            <div class="carousel-item">
              <div class="col-xs-4"><a href="#1"><img src="http://placehold.it/300/673ab7/000000" class="img-responsive"></a></div>
            </div>
            <div class="carousel-item">
              <div class="col-xs-4"><a href="#1"><img src="http://placehold.it/300/4caf50/000000" class="img-responsive"></a></div>
            </div>
            <div class="carousel-item">
              <div class="col-xs-4"><a href="#1"><img src="http://placehold.it/300/8bc34a/000000" class="img-responsive"></a></div>
            </div>
            <div class="carousel-item">
              <div class="col-xs-4"><a href="#1"><img src="http://placehold.it/300/8bc34a/000000" class="img-responsive"></a></div>
            </div>
          </div>
          <a class="left carousel-control" href="#theCarousel" data-bs-slide="prev"><i class="bi bi-chevron-left"></i></a>
          <a class="right carousel-control" href="#theCarousel" data-bs-slide="next"><i class="bi bi-chevron-right"></i></a>
        </div>
      </div>
    </div>
  </div>

3. 自定义JS代码修复 #

WordPress默认jQuery运行在noConflict模式下，直接使用$会报未定义错误，需要用兼容写法包裹，同时确保DOM加载完成后再执行代码：

jQuery(document).ready(function($){
    $('.multi-item-carousel .carousel-item').each(function(){
      var next = $(this).next();
      if (!next.length) {
        next = $(this).siblings(':first');
      }
      next.children(':first-child').clone().appendTo($(this));
      
      if (next.next().length>0) {
        next.next().children(':first-child').clone().appendTo($(this));
      } else {
        $(this).siblings(':first').children(':first-child').clone().appendTo($(this));
      }
    });
});

内容的提问来源于stack exchange，提问作者HZ Devs