WordPress主题中Swiper JS无法运行，求排查解决方法

以下是针对你代码中问题的逐一修正步骤：

1. 修正选择器不匹配问题 #

你的HTML里Swiper容器的类是.swiper.tree，但JS初始化时用的是.slide，导致无法找到目标元素。将选择器改为对应容器的类：

var swiper = new Swiper(".swiper.tree", {
  // 原有配置项保留
});

2. 调整JS文件加载顺序与依赖 #

当前main.js在Swiper JS之前加载，初始化时Swiper对象还未定义。同时WordPress自带jQuery，无需手动引入避免冲突。修正functions.php中的脚本加载代码：

add_action('wp_enqueue_scripts', function(){
    // 加载样式
    wp_enqueue_style('swiper-bundle-css', get_template_directory_uri().'/place/css/swiper-bundle.min.css');
    wp_enqueue_style('custom-style', get_stylesheet_uri());

    // 先加载Swiper，再加载main.js并声明依赖关系，同时设置在页脚加载
    wp_enqueue_script('swiper-bundle-js', get_template_directory_uri().'/place/js/swiper-bundle.min.js', [], '8.4.2', true);
    wp_enqueue_script('main-js', get_template_directory_uri().'/assets/js/main.js', ['swiper-bundle-js'], '1.1', true);
});

3. 移除main.js中的多余标签 #

main.js是纯JS文件，不需要包裹<script>标签，直接保留初始化代码即可：

document.addEventListener('DOMContentLoaded', function() {
  var swiper = new Swiper(".swiper.tree", {
    slidesPerView: 1,
    spaceBetween: 10,
    autoplay: {
      delay: 54566,
      disableOnInteraction: false,
    },
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
    breakpoints: {
      280: { slidesPerView: 1, spaceBetween: 10 },
      390: { slidesPerView: 1, spaceBetween: 10 },
      485: { slidesPerView: 2, spaceBetween: 15 },
      510: { slidesPerView: 2, spaceBetween: 10 },
      640: { slidesPerView: 2, spaceBetween: 20 },
      768: { slidesPerView: 3, spaceBetween: 15 },
      1024: { slidesPerView: 4, spaceBetween: 20 },
    },
  });
});

4. 补充导航按钮元素（若需使用） #

JS中配置了导航按钮，但HTML里未添加对应元素，需补充：

<div class="swiper tree">
  <div class="swiper-wrapper">
    <div class="swiper-slide slide_1">slide 1</div>
    <div class="swiper-slide slide_1">slide 2</div>
    <div class="swiper-slide slide_1">slide 3</div>
  </div>
  <!-- 添加导航按钮 -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

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