如何在WordPress中结合Javascript与ACF实现图片随机切换功能

现有代码问题说明 #

1. PHP部分get_sub_field仅返回字段值，未添加echo输出，导致图片地址无法正常渲染到页面
2. img标签语法存在错误，src属性多写了多余的单引号，且标签未闭合
3. JS逻辑硬编码了本地图片路径，完全没有关联到ACF选择的图片地址
4. 随机逻辑冗余，无需额外闭包生成随机数，直接对ACF输出的图片数组做随机处理即可

修正后的代码（单张头部图片随机切换） #

首先确认你ACF的ra_photo_one到ra_photo_five字段返回格式设置为图片URL，再使用以下代码：

<?php
if (get_row_layout() == 'random_images') {
    // 收集所有已上传的有效图片地址，自动过滤空值
    $banner_imgs = [];
    if (get_sub_field('ra_photo_one')) $banner_imgs[] = get_sub_field('ra_photo_one');
    if (get_sub_field('ra_photo_two')) $banner_imgs[] = get_sub_field('ra_photo_two');
    if (get_sub_field('ra_photo_three')) $banner_imgs[] = get_sub_field('ra_photo_three');
    if (get_sub_field('ra_photo_four')) $banner_imgs[] = get_sub_field('ra_photo_four');
    if (get_sub_field('ra_photo_five')) $banner_imgs[] = get_sub_field('ra_photo_five');
    // 仅当存在至少一张图片时渲染内容
    if (!empty($banner_imgs)) :
?>
<section id="header-banner">
    <img src="<?php echo esc_url($banner_imgs[0]); ?>" alt="头部Banner">
</section>
<script>
// 读取PHP输出的ACF图片数组
const bannerImages = <?php echo json_encode($banner_imgs); ?>;
let lastShowIndex = -1;

function switchRandomBanner() {
    let randomIndex;
    // 避免连续两次展示同一张图片
    do {
        randomIndex = Math.floor(Math.random() * bannerImages.length);
    } while (randomIndex === lastShowIndex && bannerImages.length > 1);
    lastShowIndex = randomIndex;
    document.querySelector('#header-banner img').src = bannerImages[randomIndex];
}

// 每3秒切换一次，调整数值即可修改切换间隔，单位为毫秒
setInterval(switchRandomBanner, 3000);
</script>
<?php 
    endif;
}
?>

可选：画廊多图随机打乱排序 #

如果你需要的是多张图片组成的画廊区域每隔几秒随机打乱排列顺序，可使用以下代码：

<?php
if (get_row_layout() == 'random_images') {
    $gallery_imgs = [];
    if (get_sub_field('ra_photo_one')) $gallery_imgs[] = get_sub_field('ra_photo_one');
    if (get_sub_field('ra_photo_two')) $gallery_imgs[] = get_sub_field('ra_photo_two');
    if (get_sub_field('ra_photo_three')) $gallery_imgs[] = get_sub_field('ra_photo_three');
    if (get_sub_field('ra_photo_four')) $gallery_imgs[] = get_sub_field('ra_photo_four');
    if (get_sub_field('ra_photo_five')) $gallery_imgs[] = get_sub_field('ra_photo_five');
    if (!empty($gallery_imgs)) :
?>
<section id="gallery">
    <?php foreach($gallery_imgs as $img_url): ?>
    <img src="<?php echo esc_url($img_url); ?>" alt="画廊图片">
    <?php endforeach; ?>
</section>
<script>
const galleryImages = <?php echo json_encode($gallery_imgs); ?>;
const galleryWrap = document.querySelector('#gallery');

function shuffleGallery() {
    // 打乱图片数组顺序
    const shuffledImgs = [...galleryImages].sort(() => Math.random() - 0.5);
    // 清空容器后重新插入打乱后的图片
    galleryWrap.innerHTML = '';
    shuffledImgs.forEach(url => {
        const img = document.createElement('img');
        img.src = url;
        img.alt = '画廊图片';
        galleryWrap.appendChild(img);
    })
}

// 每5秒打乱一次顺序
setInterval(shuffleGallery, 5000);
</script>
<?php 
    endif;
}
?>

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