寻找适配ACF gallery field的WordPress单篇文章页图片轮播插件

方案1：免写JS插件方案（首选） #

推荐使用 Meta Slider 免费版，完全符合你所有需求，不需要编写任何JavaScript代码：

• 支持绑定单篇文章的ACF画廊字段作为轮播图源，不同文章的轮播图片完全独立不会互通
• 后台提供全可视化UI界面，可直接配置轮播切换动画、自动播放速度、控制按钮样式、指示器样式等所有UI参数
• 仅需要在主题的single.php文件中添加固定PHP调用代码，不需要在文章内容里插入短代码，会自动读取当前文章的ACF画廊图片生成轮播
• 免费版功能足够满足常规使用需求，高级版为一次性付费，无订阅制要求

你只需要在single.php需要显示轮播的位置插入以下代码即可：

<?php
// 替换代码中两处「你的ACF画廊字段名」为你实际创建的ACF画廊字段别名
// 替换「轮播ID」为你在Meta Slider后台创建的轮播配置ID
if (function_exists('metaslider') && get_field('你的ACF画廊字段名')) {
    echo metaslider([
        'id' => 轮播ID,
        'source' => 'acf_gallery',
        'acf_field' => '你的ACF画廊字段名',
        'post_id' => get_the_ID()
    ]);
}
?>

方案2：无插件轻量实现方案 #

如果不想额外安装轮播插件，可使用Bootstrap Carousel原生组件实现，仅需要引入Bootstrap基础依赖，不需要编写自定义JavaScript代码，轮播逻辑全由Bootstrap原生处理：

1. 先在主题的functions.php中引入Bootstrap的CSS和JS资源（可下载到主题本地目录引入，避免依赖外部资源）
2. 在single.php需要显示轮播的位置插入以下代码：

<?php
// 替换「你的ACF画廊字段名」为你实际创建的ACF画廊字段别名
$gallery = get_field('你的ACF画廊字段名');
if ($gallery):
    $slide_total = count($gallery);
?>
<div id="postCustomCarousel" class="carousel slide" data-bs-ride="carousel">
  <!-- 轮播指示器 -->
  <div class="carousel-indicators">
    <?php for ($i = 0; $i < $slide_total; $i++): ?>
    <button type="button" data-bs-target="#postCustomCarousel" data-bs-slide-to="<?php echo $i; ?>" <?php echo $i === 0 ? 'class="active"' : ''; ?>></button>
    <?php endfor; ?>
  </div>
  <!-- 轮播图片内容 -->
  <div class="carousel-inner">
    <?php $index = 0; foreach ($gallery as $img_item): ?>
    <div class="carousel-item <?php echo $index === 0 ? 'active' : ''; ?>">
      <img src="<?php echo esc_url($img_item['url']); ?>" class="d-block w-100" alt="<?php echo esc_attr($img_item['alt']); ?>">
    </div>
    <?php $index++; endforeach; ?>
  </div>
  <!-- 前后切换按钮 -->
  <button class="carousel-control-prev" type="button" data-bs-target="#postCustomCarousel" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">上一张</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#postCustomCarousel" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">下一张</span>
  </button>
</div>
<?php endif; ?>

轮播的UI样式可通过自定义CSS修改Bootstrap类样式实现，不需要改动JavaScript代码。

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