WordPress ACF Repeater字段实现随机图片定时轮播的方法

原有代码错误说明 #

• 变量名不匹配：你将Repeater字段返回值存入了$rows，后续array_rand调用时却使用了未定义的$random_images变量
• 参数传递错误：array_rand返回的是数组的索引值，你直接将索引值传入wp_get_attachment_image_src，而非对应索引下的图片ID
• 功能逻辑缺失：仅在PHP侧读取单张随机图无法实现前端自动切换效果，需要将所有图片资源传递到前端通过JS实现定时切换

前置配置确认 #

确保你的random_images Repeater下的5个图片子字段，返回格式设置为「图片ID」，如果返回的是数组/URL需要对应调整代码逻辑

完整实现代码 #

1. PHP 模板代码（写入你的主题模板文件中） #

if (get_row_layout() == 'random_images') {
    // 获取Repeater所有行数据
    $repeater_data = get_sub_field('random_images');
    // 如果你用的是顶级Repeater（没有嵌套在灵活内容内），删除上面一行判断，替换为下面这行代码：
    // $repeater_data = get_field('random_images');
    $image_list = [];

    if ($repeater_data) {
        foreach ($repeater_data as $item) {
            // 此处替换为你自己设置的5个图片子字段的字段名
            $img_ids = [
                $item['random_photo_one'],
                $item['random_photo_two'],
                $item['random_photo_three'],
                $item['random_photo_four'],
                $item['random_photo_five']
            ];
            foreach ($img_ids as $img_id) {
                if ($img_id) {
                    $img_url = wp_get_attachment_image_url($img_id, 'full');
                    $img_alt = get_post_meta($img_id, '_wp_attachment_image_alt', true);
                    $image_list[] = [
                        'url' => $img_url,
                        'alt' => $img_alt ?: '随机展示图片'
                    ];
                }
            }
        }
    }

    if (!empty($image_list)) :
?>
<!-- 前端渲染的图片容器 -->
<div class="random-image-wrap">
    <img id="random-switch-img" 
         src="<?php echo esc_url($image_list[array_rand($image_list)]['url']); ?>" 
         alt="<?php echo esc_attr($image_list[array_rand($image_list)]['alt']); ?>"
         data-images="<?php echo esc_attr(json_encode($image_list)); ?>">
</div>
<!-- 切换逻辑JS -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    const imgEl = document.getElementById('random-switch-img');
    const allImages = JSON.parse(imgEl.dataset.images);
    const switchInterval = 3000; // 切换间隔，单位毫秒，3000即3秒，可自行修改
    let lastIndex = -1;

    setInterval(function() {
        // 避免连续两次展示同一张图
        let randomIndex;
        do {
            randomIndex = Math.floor(Math.random() * allImages.length);
        } while (randomIndex === lastIndex && allImages.length > 1);
        
        lastIndex = randomIndex;
        imgEl.src = allImages[randomIndex].url;
        imgEl.alt = allImages[randomIndex].alt;
    }, switchInterval);
});
</script>
<?php
    endif;
}

2. 可选样式补充（可添加到主题的CSS文件中） #

如果需要图片尺寸统一、切换更自然，可以加如下样式：

.random-image-wrap img {
    width: 100%;
    height: 400px; /* 按需求调整高度 */
    object-fit: cover;
    transition: opacity 0.3s ease;
}

内容的提问来源于stack exchange，提问作者Josef Lundström