如何为WordPress循环案例元素添加每3组重复的唯一ID用于CSS样式？

要实现每3个元素重复1-3的唯一标识（用于CSS定制颜色），我们可以通过计数器+模运算的方式轻松搞定，不管未来改成每页9篇还是更多，这个逻辑都能正常工作。

修改后的完整代码 #

<div class="row"> 
    <?php 
    $args = array( 
        'post_type' => 'cases', 
        'posts_per_page' => 3, 
        'offset' => 2 // 补充引号避免PHP警告
    ); 
    $the_query1 = new WP_Query( $args ); 
    // 初始化计数器，追踪当前元素位置
    $counter = 1;
    if ( $the_query1->have_posts() ): 
        while ( $the_query1->have_posts() ): $the_query1->the_post(); 
            // 生成1-3循环的序号
            $item_sequence = ($counter - 1) % 3 + 1;
    ?> 
    <div class="col-sm-4"> 
        <div class="case-container"> 
            <!-- 保留基础class的同时，添加带序号的class用于样式定制 -->
            <div class="case-info-triple case-info-triple-<?php echo $item_sequence; ?>"> 
                <h4 id="case-title"><?php the_title(); ?></h4> 
                <p id="case-type"><?php the_field('case_type') ?></p> 
                <p id="case-desc"><?php $caseteaser = get_field('case_content', false, false); echo substr($caseteaser, 0, 200); ?></p> 
                <img src="Diensten - zeo9-arrow.png" /><a href="<?php the_field('case_url') ?>">Bekijk deze case</a> 
            </div> 
        </div> 
    </div> 
    <?php 
            // 每循环一次计数器+1
            $counter++;
        endwhile; 
        wp_reset_postdata();
    endif;
    ?> 
</div>

关键逻辑解释 #

• 计数器初始化：在循环前定义$counter = 1，用来记录当前是第几个元素。
• 模运算生成循环序号：($counter - 1) % 3 + 1的作用是让序号始终在1-3之间循环：
  • 第1个元素：(1-1)%3+1 = 1
  • 第2个元素：(2-1)%3+1 = 2
  • 第3个元素：(3-1)%3+1 = 3
  • 第4个元素：(4-1)%3+1 = 1，以此类推
• 双class设计：保留case-info-triple用于通用样式，新增case-info-triple-1/2/3用于每个位置的专属颜色定制，兼顾灵活性和针对性。

CSS样式示例 #

现在你可以针对每个序号的元素定制颜色了：

/* 通用基础样式 */
.case-info-triple {
    padding: 1.2rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
}

/* 第一个位置的元素样式 */
.case-info-triple-1 {
    background-color: #fff3f3;
    color: #c53030;
    border-left: 4px solid #c53030;
}

/* 第二个位置的元素样式 */
.case-info-triple-2 {
    background-color: #f0fff4;
    color: #2f855a;
    border-left: 4px solid #2f855a;
}

/* 第三个位置的元素样式 */
.case-info-triple-3 {
    background-color: #f7fafc;
    color: #2b6cb0;
    border-left: 4px solid #2b6cb0;
}

小提示 #

原代码中的offset => 2缺少引号，建议改成'offset' => 2，避免PHP抛出未定义常量的警告。

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