WordPress WP_Query使用计数器按1-3-2-3-2分组输出文章至不同DIV

你需要的1篇、3篇、2篇、3篇、2篇共11篇文章的分组布局，直接在循环中加计数器判断分组边界即可，不需要修改原有查询参数，分页逻辑也不会受影响。

核心实现逻辑 #

• 循环启动前预定义分组规则数组，值为每组需要展示的文章数，顺序和你要求的分组顺序一致
• 初始化两个计数器：一个标记当前分组索引，一个统计当前分组内已输出的文章数
• 每轮循环开始时判断是否为新分组的第一篇文章，是则输出当前分组DIV的开标签
• 输出原有文章卡片结构后，判断当前分组文章数是否达到阈值，达到则输出分组DIV的闭标签，同时切换到下一个分组，重置组内计数器

完整可直接使用的代码 #

<section class="blog-wrapper">
    <div class="container">
        <div class="blog-inner">

            <?php
            $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
            $args = array(
                'paged' => $paged,
                'post_type' => 'post',
                'category__in' => wp_get_post_categories(get_the_ID()),
                'post__not_in' => array(get_the_ID()),
                'posts_per_page' => 11,
                'orderby' => 'date',
            );


            $related_query = new WP_Query($args);
            ?>

            <?php if ($related_query->have_posts()) { ?>

                <div class="posts-grid">
                    <?php
                    // 初始化分组配置与计数器
                    $group_rules = array(1, 3, 2, 3, 2); // 分组规则：按顺序对应每组文章数
                    $current_group_index = 0; // 当前分组序号索引
                    $current_group_post_count = 0; // 当前分组已输出文章数

                    while ($related_query->have_posts()) : $related_query->the_post();
                        // 新分组第一篇，输出分组开标签
                        if ($current_group_post_count === 0) {
                            printf('<div class="post-group group-%d">', $current_group_index + 1);
                        }
                    ?>

                        <div class="grid-item">

                            <a class="item-thumbnail" href="<?php the_permalink(); ?>"><?php the_post_thumbnail('post-thumb-small'); ?></a>

                            <p class="item-post-date"><?php echo get_the_date('l jS F, Y'); ?></p>

                            <h4 class="item-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4>

                            <p class="item-excerpt"><?php the_excerpt(); ?></p>

                            <a class="more-link link-with-arrow" href="<?php the_permalink(); ?>"><?php _e('READ MORE', 'amendment-cycles'); ?></a> <i class="icon-angle-right"></i>

                        </div>

                    <?php
                        $current_group_post_count++;
                        // 当前分组文章数达到规则阈值，闭合分组标签，切换到下一组
                        if ($current_group_post_count === $group_rules[$current_group_index]) {
                            echo '</div>';
                            $current_group_index++;
                            $current_group_post_count = 0;
                        }
                    endwhile;

                    // 兜底闭合：如果最后一组文章数不足规则数量，补全闭标签，避免HTML结构错误
                    if ($current_group_post_count > 0) {
                        echo '</div>';
                    }
                    ?>

                </div>

                <?php wp_reset_postdata(); ?>

            <?php } ?>

            <div class="blog-pagination">
                <ul>
                    <li><?php previous_posts_link('&laquo; PREV', $related_query->max_num_pages) ?></li>
                    <li><?php next_posts_link('NEXT &raquo;', $related_query->max_num_pages) ?></li>
                </ul>
            </div>

        </div>
    </div>
</section>

样式适配提示 #

• 每个分组自动生成带序号的类名，从.group-1到.group-5分别对应5个分组容器，你可以直接针对不同组写CSS控制列数、间距等布局样式
• 原有文章卡片.grid-item的结构完全未改动，之前写好的卡片样式不需要调整
• 如果后续要调整分组规则，直接修改$group_rules数组内的数值即可，循环逻辑不需要改动

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