PHP如何实现Bootstrap4轮播空图片字段不渲染显示

解决方案 #

你当前代码的问题是直接遍历repeater字段files时，没有校验子字段image是否为空就直接渲染轮播项和对应的指示器，同时两次独立遍历have_rows('files')也无法同步过滤空项。

可以先一次性筛选出所有存在有效图片的轮播项，再基于筛选后的结果渲染轮播结构，这样既可以避免空轮播项生成，也能保证指示器和轮播项的序号一一对应。

修改后的完整代码如下：

<?php 
$valid_slides = [];
// 先筛选所有有效轮播项
if( have_rows('files') ):
    while ( have_rows('files') ) : the_row();
        $image = get_sub_field('image');
        // 仅当图片字段不为空时加入有效列表
        if(trim($image)) {
            $valid_slides[] = $image;
        }
    endwhile;
endif;

// 只有存在有效轮播项时才渲染整个轮播结构
if(!empty($valid_slides)):
?>
    <div class="carousel_bg">
        <div class="container">
            <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                <!-- Indicators -->
                <ol class="carousel-indicators">
                    <?php foreach($valid_slides as $index => $image): ?>
                        <li data-target="#carousel-example-generic" data-slide-to="<?php echo $index ?>" class="<?php echo $index === 0 ? 'active' : '' ?>"></li>
                    <?php endforeach; ?>
                </ol>
                <!-- Wrapper for slides -->
                <div class="carousel-inner" role="listbox">
                    <?php foreach($valid_slides as $index => $image): ?>
                        <div class="carousel-item <?php echo $index === 0 ? 'active' : '' ?> screen08">
                            <div class="container">
                                <img src="<?php echo get_template_directory_uri(); ?>/files/images/<?php echo $image; ?>" class="img-fluid is-slider-item" />
                            </div>
                        </div><!-- /item -->
                    <?php endforeach; ?>
                </div>
            </div>
        </div>
    </div><!-- /row -->
<?php endif; ?>

逻辑说明 #

• 先遍历一次repeater字段，把非空的图片字段存入$valid_slides数组，从根源过滤无效项
• 仅当存在有效项时才渲染轮播的完整结构，避免空轮播容器显示
• 用数组遍历代替两次have_rows循环，保证指示器的序号和轮播项完全对应，不会出现指示器和轮播项不匹配的问题
• 判断时用trim($image)避免全空格的无效值也被渲染

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