WordPress主题开发：PHP循环每3项包裹div标签问题

嘿，我仔细看了你的代码，问题出在闭合外层div的判断逻辑上——你现在的条件写反了，导致每篇非第一个的文章都会触发一次div闭合，自然就出现标签混乱的情况了。

问题分析 #

你原来的代码里，在输出文章后用了if ( $i % 3 != 0 ) :来闭合div，这意味着除了第1、4、7...篇文章外，每篇文章都会闭合一次div，这完全不符合“每3篇包裹一个div”的需求。正确的逻辑应该是：每输出3篇文章后，才闭合当前的div。

修正后的代码 #

<?php if ( have_posts() ) : $i = 0; while ( have_posts() ) : the_post(); ?>
    <?php 
    // 每3篇文章的第一篇前，打开新的包裹div
    if ( $i % 3 == 0) : ?>
        <div class="articles-loop clearfix">
    <?php endif; ?>

    <article itemtype="https://schema.org/CreativeWork" <?php post_class(); ?>>
        <header class="entry-header">
            <h2 class="entry-title" itemprop="headline">
                <a href="<?php the_permalink(); ?>" class="entry-title-link" rel="bookmark"><?php the_title(); ?></a>
            </h2>
        </header>
        <div class="entry-content">
            <?php if ( has_post_thumbnail() ) : ?>
                <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
                    <?php the_post_thumbnail('generic-grid-archive-featured'); ?>
                </a>
            <?php endif; ?>
            <?php if ( has_excerpt() ): ?>
                <p><?php $excerpt = excerpt(23); echo strip_tags($excerpt); ?></p>
            <?php else : ?>
                <p><?php $content = content(23); echo strip_tags($content); ?></p>
            <?php endif; ?>
        </div>
        <!-- 注释掉的footer部分保持不变 -->
        <!-- <footer class="entry-footer">
            <div class="entry-meta clearfix">
                <p class="read-more"><a href="<?php /*the_permalink(); */?>">Continue Reading</a></p>
                <p class="author">Published by: <?php /*$author = get_the_author(); echo $author; */?></p>
            </div>
        </footer> -->
    </article>

    <?php 
    // 每3篇文章的最后一篇后，闭合包裹div
    // $i从0开始计数，第3篇对应的$i是2，所以用$i%3 ==2 或者 ($i+1)%3 ==0 都可以
    if ( $i % 3 == 2 ) : ?>
        </div>
    <?php endif; ?>

    <?php $i++; endwhile; ?>

    <?php 
    // 循环结束后，检查是否有未闭合的div（当总文章数不是3的倍数时）
    if ( $i % 3 != 0 ) : ?>
        </div>
    <?php endif; ?>

<?php else: ?>
    <p><?php esc_html_e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>

关键逻辑说明 #

1. 打开div的时机：当$i %3 ==0时（也就是第1、4、7...篇文章前），创建新的包裹div，这个逻辑你原来的是对的。
2. 闭合div的时机：当$i %3 ==2时（对应第3、6、9...篇文章后），闭合当前的div——因为$i从0开始计数，第3篇文章的$i值是2，刚好满足模3余2的条件。
3. 循环收尾处理：如果总文章数不是3的倍数（比如4篇、5篇），循环结束后剩下的1或2篇文章所在的div还没闭合，这时候用$i%3 !=0来判断并闭合，确保标签完整。

这样修改后，就能实现你想要的“每3篇文章包裹在一个articles-loop div里”的效果啦。

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