WordPress：如何在foreach循环中按2-3模式添加不同CSS类

你的需求完全可行，下面提供两种实现思路：

思路一：PHP循环中根据索引动态添加类 #

通过在foreach循环中引入索引，结合模运算判断元素所处的周期位置，从而动态添加对应的CSS类。

修改后的代码如下：

<?php
$propertyImages = get_field('property_images');
if( $propertyImages ): 
?>
    <div class="container">
        <?php foreach( $propertyImages as $index => $propertyImage ): 
            // 计算当前元素在5个为一组的周期中的位置
            $cycle = $index % 5;
            // 根据位置确定要添加的类
            $gridClass = $cycle < 2 ? 'grid-lg-img' : 'grid-sm-img';
        ?>
            <a class="gallery-item <?php echo esc_attr($gridClass); ?>" href="<?php echo esc_url($propertyImage['url']); ?>">
               <img class="gallery-img" src="<?php echo esc_url($propertyImage['sizes']['medium']); ?>"/>
            </a>
        <?php endforeach; ?>
    </div>
<?php endif; ?>

逻辑说明：

• 每5个元素为一个循环周期（2个大图 + 3个小图）
• 使用$index % 5得到当前元素在周期内的位置（0-4）
• 位置0、1对应添加grid-lg-img，位置2、3、4对应添加grid-sm-img

思路二：纯CSS实现（无需修改PHP代码） #

如果仅需要通过样式区分大小，可以直接利用CSS的:nth-child()选择器匹配元素位置，无需在PHP中额外添加类，实现样式与逻辑分离。

CSS代码示例：

/* 匹配每5个元素中的第1、2个（大图样式） */
.gallery-item:nth-child(5n+1),
.gallery-item:nth-child(5n+2) {
    /* 大图的样式，比如宽度、高度等 */
    width: 48%;
    height: auto;
}

/* 匹配每5个元素中的第3、4、5个（小图样式） */
.gallery-item:nth-child(5n+3),
.gallery-item:nth-child(5n+4),
.gallery-item:nth-child(5n+5) {
    /* 小图的样式 */
    width: 30%;
    height: auto;
}

这种方式的优势是无需改动PHP逻辑，仅通过CSS即可实现布局，适合样式需求单一的场景。

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