WordPress Lightbox异常求助：首屏加载页面而非图片及foreach报错

一、修复foreach无效参数错误 #

你的代码中$gallery = get_field('images')[0];存在逻辑问题：

• 如果ACF的images字段是图库类型，get_field('images')直接返回图片对象数组，而非包含images子数组的结构。此时取[0]得到的是单张图片对象，没有['images']键，必然导致foreach循环报错。

修正代码（图库字段场景） #

<?php 
// 直接获取完整图库数组，无需取[0]
$gallery_images = get_field('images'); 
?>
<?php if ($gallery_images) : ?>
   <a href="#" class="gallery_trigger btn btn-primary" data-toggle="lightbox" data-gallery="gallery-<?php the_ID(); ?>">Gallery</a>
   <div class="hidden gallery">
        <?php foreach ($gallery_images as $image) : ?>    
               <a href="<?php echo esc_url($image['url'])  ?>" class="noo-lightbox-item" data-gallery="gallery-<?php the_ID(); ?>">
                <img src="<?php echo isset($image['sizes']['thumbnail']) ? esc_url($image['sizes']['thumbnail']) : esc_url($image['url']); ?>" alt="<?php echo isset($image['alt']) ? $image['alt'] : ''; ?>"/>
                  </a>
        <?php endforeach; ?>
   </div>
<?php endif; ?>

修正代码（重复字段组场景） #

如果images是包含图库的重复字段组，调整为：

<?php 
$gallery_groups = get_field('images');
// 确保取到有效组及内部的图库数组
$gallery_images = !empty($gallery_groups[0]['images']) ? $gallery_groups[0]['images'] : [];
?>
<?php if ($gallery_images) : ?>
   <!-- 后续结构同上方代码 -->
<?php endif; ?>

二、修复Lightbox加载当前页面的问题 #

核心原因 #

触发按钮的href="#"会触发浏览器默认锚点跳转，部分Lightbox插件会误将该锚点链接识别为加载内容；同时hidden类导致的display:none可能让插件初始化时忽略容器内的图片链接。

修复步骤 #

1. 阻止按钮默认跳转行为
   添加JavaScript代码，避免点击按钮时的锚点跳转：

document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.gallery_trigger').forEach(trigger => {
        trigger.addEventListener('click', function(e) {
            e.preventDefault();
            // 手动触发对应图库的第一张图片
            const galleryId = this.getAttribute('data-gallery');
            const firstItem = document.querySelector(`a[data-gallery="${galleryId}"].noo-lightbox-item`);
            firstItem && firstItem.click();
        });
    });
});

2. 替换隐藏容器样式
   放弃hidden类，改用视觉隐藏但仍可被DOM扫描的样式，避免插件忽略元素：

.gallery.hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

同时将HTML中的class="hidden gallery"改为class="gallery hidden"。

3. 确认Lightbox初始化逻辑
   如果使用第三方Lightbox插件，需确保插件在DOM加载完成后初始化，且支持扫描隐藏元素内的链接。若插件提供手动初始化方法，可在上述JS代码中补充初始化逻辑（参考插件官方文档）。

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