如何在WordPress中让Splidejs从指定目录动态加载所有轮播图片

步骤1：创建轮播图存放目录 #

在你的WordPress站点根目录下的wp-content/uploads/路径中新建splide-carousel文件夹，后续所有轮播图的增删操作直接在这个文件夹里操作即可。

步骤2：替换原有静态HTML代码 #

把你原来写死的Splide HTML部分替换成如下动态输出的代码，这段代码会自动读取splide-carousel目录下的所有图片生成轮播项：

<div id="splide" class="splide">
  <div class="splide__track">
    <ul class="splide__list">
      <?php
      // 定义轮播图存放的本地路径
      $carousel_dir = get_home_path() . 'wp-content/uploads/splide-carousel/';
      // 定义轮播图的访问URL前缀
      $carousel_url = content_url('uploads/splide-carousel/');
      // 过滤允许的图片格式
      $allowed_ext = ['jpg', 'jpeg', 'png', 'gif', 'webp'];
      
      if (is_dir($carousel_dir)) {
        $files = scandir($carousel_dir);
        foreach ($files as $file) {
          $ext = strtolower(pathinfo($file, PATHINFO_EXTENSION));
          // 跳过非图片文件和系统隐藏文件
          if (in_array($ext, $allowed_ext) && !str_starts_with($file, '.')) {
            echo '<li class="splide__slide"><img src="'. esc_url($carousel_url . $file) .'" alt="'. esc_attr(pathinfo($file, PATHINFO_FILENAME)) .'"></li>';
          }
        }
      }
      ?>
    </ul>
  </div>
</div>

如果需要在文章/页面中嵌入轮播，可将上述PHP逻辑封装为短代码，添加到主题functions.php中：

function splide_carousel_shortcode() {
  $carousel_dir = get_home_path() . 'wp-content/uploads/splide-carousel/';
  $carousel_url = content_url('uploads/splide-carousel/');
  $allowed_ext = ['jpg', 'jpeg', 'png', 'gif', 'webp'];
  $html = '<div id="splide" class="splide"><div class="splide__track"><ul class="splide__list">';
  
  if (is_dir($carousel_dir)) {
    $files = scandir($carousel_dir);
    foreach ($files as $file) {
      $ext = strtolower(pathinfo($file, PATHINFO_EXTENSION));
      if (in_array($ext, $allowed_ext) && !str_starts_with($file, '.')) {
        $html .= '<li class="splide__slide"><img src="'. esc_url($carousel_url . $file) .'" alt="'. esc_attr(pathinfo($file, PATHINFO_FILENAME)) .'"></li>';
      }
    }
  }
  $html .= '</ul></div></div>';
  return $html;
}
add_shortcode('splide_carousel', 'splide_carousel_shortcode');

之后在编辑器中输入[splide_carousel]即可调用轮播组件。

步骤3：JS初始化代码保持不变 #

你原来的Splide初始化JS代码不需要做任何修改，只要确保动态生成的轮播项ID还是splide即可，初始化逻辑会自动识别所有动态生成的轮播项。

备选方案：通过WordPress媒体库管理轮播图（无需操作FTP） #

如果你不想手动操作服务器目录，也可以通过媒体库分类实现，更适合普通用户：

• 安装媒体分类插件，给图片附件新增「轮播图」分类
• 用WP_Query查询所有分类为「轮播图」的附件，循环输出轮播项即可，后续在媒体库上传图片时勾选对应分类就能自动加入轮播

注意事项 #

• 确保新建的splide-carousel目录权限为755，保证Web服务器拥有读取权限
• 图片文件名不要使用中文、空格或特殊字符，避免出现加载异常
• 如果需要调整轮播图加载顺序，直接给图片文件名加数字前缀排序即可，比如1-banner.jpg、2-banner.jpg

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