如何筛选无background-image的div？解决WordPress滑块空幻灯片显示问题

处理思路 #

直接判断对应幻灯片的图片字段是否有值，仅当存在有效图片URL时才渲染该幻灯片的HTML结构，从根源避免空幻灯片出现。

代码实现示例 #

场景1：固定4个独立图片字段

假设你用ACF创建了4个独立的图片字段，针对第四张幻灯片做判断：

<?php
// 获取第四张图片字段数据
$slide_4_image = get_field('slide_4_image');
// 仅当图片存在时输出幻灯片
if ($slide_4_image) :
?>
<div class="slide" style="background-image: url('<?php echo esc_url($slide_4_image['url']); ?>')">
    <!-- 幻灯片内部内容 -->
</div>
<?php endif; ?>

场景2：可重复图片字段（更推荐）

如果是用可重复字段组来管理幻灯片图片，直接循环遍历有值的图片，自动适配任意数量的幻灯片：

<?php
// 获取所有幻灯片图片数组
$project_slides = get_field('project_slides');
if ($project_slides) :
    foreach ($project_slides as $single_slide) :
?>
<div class="slide" style="background-image: url('<?php echo esc_url($single_slide['url']); ?>')">
    <!-- 幻灯片内部内容 -->
</div>
<?php
    endforeach;
endif;
?>

补充说明 #

• 第一种写法适合你当前固定4个字段的场景，精准控制第四张的显示；
• 第二种循环写法更灵活，不管项目有2张、3张还是4张图片，都会只渲染有图片的幻灯片，后续维护也更省心，建议优先采用。

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