如何移除WordPress循环中生成的多余空div？

这个问题我太熟悉啦！你的代码逻辑里，循环结束后固定输出了一个.col-md-6的闭合标签，但当文章总数刚好是3的倍数时，循环的最后一次迭代已经关闭了当前的col并新开了一个空的，这就导致最后多出来一个没有内容的空div。

问题根源分析 #

看你的代码逻辑：

• 一开始就打开了一个.col-md-6容器
• 每3篇文章时，输出文章后关闭当前col，再新开一个.col-md-6
• 循环结束后，又强制输出了</div><!-- .col md 6 -->

当文章总数是3的倍数（比如你设置的6篇），第6篇文章处理时，会执行</div>然后新开一个.col-md-6，但循环到此结束，后面的闭合标签就把这个空的col给闭合了，于是就出现了无用的空div。

方案一：最小修改原代码 #

直接在循环结束后的闭合标签前加判断，只有当文章总数不是3的倍数时才输出闭合标签——因为如果是3的倍数，最后一次循环已经完成了col的关闭：

$loop_args = array( 
    'post_type' => 'post', 
    'post_status' => 'publish', 
    'posts_per_page' => 6 
); 
$loop = new WP_Query( $loop_args ); 

if( $loop->have_posts() ): ?>
    <div class="row">
        <?php $count = 0; ?>
        <div class="col-md-6">
            <?php while( $loop->have_posts() ) : $loop->the_post(); $count++; ?>
                <?php if( $count % 3 == 0 ): ?>
                    <article class="post-content"><?php the_title();?></article>
                    </div><!-- .col md 6 -->
                    <div class="col-md-6">
                <?php else: ?>
                    <article class="post-content"><?php the_title();?></article>
                <?php endif; // end modulus ?>
            <?php endwhile; // end while loop ?>
            
            <!-- 只有当最后一组不足3篇时，才闭合当前col -->
            <?php if( $count % 3 != 0 ): ?>
                </div><!-- .col md 6 -->
            <?php endif; ?>
        </div><!-- .row -->
<?php endif; wp_reset_postdata(); ?>

方案二：重构容器控制逻辑（更健壮） #

如果想让代码逻辑更清晰，避免这类标签不匹配的问题，可以把col的开启/关闭完全放到循环内部控制：

$loop_args = array( 
    'post_type' => 'post', 
    'post_status' => 'publish', 
    'posts_per_page' => 6 
); 
$loop = new WP_Query( $loop_args ); 

if( $loop->have_posts() ): ?>
    <div class="row">
        <?php 
        $count = 0;
        $is_col_open = false;
        
        while( $loop->have_posts() ) : $loop->the_post(); 
            $count++;
            
            // 每3篇的开头（第1、4、7...篇），开启新的col
            if( $count % 3 == 1 ) {
                // 如果之前有未闭合的col，先关闭
                if( $is_col_open ) {
                    echo '</div><!-- .col md 6 -->';
                }
                echo '<div class="col-md-6">';
                $is_col_open = true;
            }
        ?>
            <article class="post-content"><?php the_title();?></article>
        <?php endwhile; // end while loop ?>
        
        <!-- 循环结束后，闭合最后一个未关闭的col -->
        <?php if( $is_col_open ): ?>
            </div><!-- .col md 6 -->
        <?php endif; ?>
    </div><!-- .row -->
<?php endif; 
wp_reset_postdata(); 

这个方案完全由计数控制col的开启和关闭，不管文章总数是多少，都不会出现多余的空标签，逻辑更健壮。

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