WordPress首页文章列表：循环外每3篇后自动添加class实现方法

嘿，这个需求咱们可以通过一个简单的计数器来实现分组渲染，刚好能匹配你要的第一个容器用music-info、后续容器加two类的要求。我帮你调整了代码，直接就能用：

<?php
// 调整参数，获取所有需要展示的文章（这里用-1表示全部，你也可以改成具体数量）
$args = array( 'post_type'=>'product', 'posts_per_page'=>-1 ); 
$query = new WP_Query($args);

// 定义每组文章数量，这里是3篇
$posts_per_group = 3;
// 初始化计数器
$counter = 0;

// 先输出第一个容器（不带two类）
echo '<div class="music-info">';

if($query->have_posts()) : 
    while($query->have_posts()) : $query->the_post(); 
        $counter++;
?>
        <div class="col-md-4 music-grids">
            <figure class="effect-bubba">
                <?php if(has_post_thumbnail()) { the_post_thumbnail(); } ?>
                <figcaption>
                    <a href="<?php echo get_post_permalink(); ?>"><h4><?php the_title(); ?></h4></a>
                    <?php the_excerpt(); ?>
                </figcaption>
            </figure>
        </div>
<?php
        // 判断是否到了每组的最后一篇，并且不是最后一组
        if($counter % $posts_per_group == 0 && $counter != $query->post_count) {
            // 闭合当前容器，然后输出带two类的新容器
            echo '</div><div class="music-info two">';
        }
    endwhile;
    // 闭合最后一个容器
    echo '</div>';
    wp_reset_postdata();
endif;
?>

关键逻辑说明： #

• 首先调整posts_per_page为-1（或者你需要的总文章数），这样能获取所有要展示的文章，方便分组。
• 用$counter变量记录当前输出的文章序号，每输出一篇就递增。
• 当计数器是3的倍数，并且不是最后一篇文章时，就闭合当前的music-info容器，同时打开一个带two类的新容器。
• 循环结束后记得闭合最后一个容器，并且调用wp_reset_postdata()恢复全局文章数据。

这样就能自动实现第一个容器是music-info，之后每3篇文章生成一个music-info two的容器啦～

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