Wordpress 在循环中每三项之后添加div？

我正在使用一个WP网站，在我的模板中，我运行的循环如下：

<!-- START LOOP -->
                <?php while ( have_posts() ) : the_post(); ?>

                    <div class="row" style="margin:15px 0;">
                        <div class="twelve columns">
                            <div class="four columns">
                                <a href="<?php the_permalink(); ?>">
                                    <?php 
                                        if ( has_post_thumbnail() ) {
                                            the_post_thumbnail( 'medium' );
                                        } else {
                                            echo 'No Preview Available'; 
                                        } 
                                    ?>
                                </a>
                            </div>
                            <div class="eight columns">

                                <h3><a href="<?php the_permalink(); ?>"><?php the_title() ?></a></h3>
                                <p><?php the_excerpt() ?></p>
                                <p><a href="<?php echo esc_html( get_post_meta( get_the_ID(), 'portfolio_website', true ) ); ?>" target="_blank"><?php echo esc_html( get_post_meta( get_the_ID(), 'portfolio_website', true ) ); ?></a></p>

                            </div>  

                        </div>
                    </div>
                    <hr />

                <?php endwhile; ?>

<div class="row container">
    <!-- item 1 -->
    <div class="twelve columns">
        <div class="four columns">IMAGE HERE</div>
        <div class="eight columns">TEXT HERE</div>
    </div>

    <!-- item 2 -->
    <div class="twelve columns">
        <div class="four columns">IMAGE HERE</div>
        <div class="eight columns">TEXT HERE</div>
    </div>

    <!-- item 3 -->
    <div class="twelve columns">
        <div class="four columns">IMAGE HERE</div>
        <div class="eight columns">TEXT HERE</div>
    </div>

    <!-- item 4 -->
    <div class="twelve columns">
        <div class="four columns">IMAGE HERE</div>
        <div class="eight columns">TEXT HERE</div>
    </div>
</div>

<div class="row container">
    <!-- row 1 -->
    <div class="twelve columns">
        <div class="four columns">
            <!-- item 1 -->
            <div class="four columns">IMAGE HERE</div>

            <!-- item 2 -->
            <div class="four columns">IMAGE HERE</div>

            <!-- item 3 -->
            <div class="four columns">IMAGE HERE</div>
        </div>
    </div>

    <!-- row 2 -->
    <div class="twelve columns">
        <div class="four columns">
            <!-- item 4 -->
            <div class="four columns">IMAGE HERE</div>

            <!-- item 5 -->
            <div class="four columns">IMAGE HERE</div>

            <!-- item 6 -->
            <div class="four columns">IMAGE HERE</div>
        </div>
    </div>
</div>

 <div class="row container">
      <!-- row -->
      <div class="twelve columns">
           <div class="four columns">
      <?php while ( have_posts() ) : the_post(); ?>

                <!-- item -->            
                <div class="four columns">IMAGE HERE</div>

      <?php if( $wp_query->current_post % 3 == 0 ) : ?>
           </div>
      </div>
      <!-- row -->
      <div class="twelve columns">
           <div class="four columns">
      <?php endif; ?>        
      <?php endwhile; ?>
</div>

因为这是一个反应迅速的网站，我正试图得到一个网格列的外观。我遇到的问题是，如何在每三项之后插入一个带有类或“行容器”的div

我知道我可能只是把你搞糊涂了，因为我把自己搞糊涂了，但简而言之，html是这样的：

<!-- START LOOP -->
                <?php while ( have_posts() ) : the_post(); ?>

                    <div class="row" style="margin:15px 0;">
                        <div class="twelve columns">
                            <div class="four columns">
                                <a href="<?php the_permalink(); ?>">
                                    <?php 
                                        if ( has_post_thumbnail() ) {
                                            the_post_thumbnail( 'medium' );
                                        } else {
                                            echo 'No Preview Available'; 
                                        } 
                                    ?>
                                </a>
                            </div>
                            <div class="eight columns">

                                <h3><a href="<?php the_permalink(); ?>"><?php the_title() ?></a></h3>
                                <p><?php the_excerpt() ?></p>
                                <p><a href="<?php echo esc_html( get_post_meta( get_the_ID(), 'portfolio_website', true ) ); ?>" target="_blank"><?php echo esc_html( get_post_meta( get_the_ID(), 'portfolio_website', true ) ); ?></a></p>

                            </div>  

                        </div>
                    </div>
                    <hr />

                <?php endwhile; ?>

<div class="row container">
    <!-- item 1 -->
    <div class="twelve columns">
        <div class="four columns">IMAGE HERE</div>
        <div class="eight columns">TEXT HERE</div>
    </div>

    <!-- item 2 -->
    <div class="twelve columns">
        <div class="four columns">IMAGE HERE</div>
        <div class="eight columns">TEXT HERE</div>
    </div>

    <!-- item 3 -->
    <div class="twelve columns">
        <div class="four columns">IMAGE HERE</div>
        <div class="eight columns">TEXT HERE</div>
    </div>

    <!-- item 4 -->
    <div class="twelve columns">
        <div class="four columns">IMAGE HERE</div>
        <div class="eight columns">TEXT HERE</div>
    </div>
</div>

<div class="row container">
    <!-- row 1 -->
    <div class="twelve columns">
        <div class="four columns">
            <!-- item 1 -->
            <div class="four columns">IMAGE HERE</div>

            <!-- item 2 -->
            <div class="four columns">IMAGE HERE</div>

            <!-- item 3 -->
            <div class="four columns">IMAGE HERE</div>
        </div>
    </div>

    <!-- row 2 -->
    <div class="twelve columns">
        <div class="four columns">
            <!-- item 4 -->
            <div class="four columns">IMAGE HERE</div>

            <!-- item 5 -->
            <div class="four columns">IMAGE HERE</div>

            <!-- item 6 -->
            <div class="four columns">IMAGE HERE</div>
        </div>
    </div>
</div>

 <div class="row container">
      <!-- row -->
      <div class="twelve columns">
           <div class="four columns">
      <?php while ( have_posts() ) : the_post(); ?>

                <!-- item -->            
                <div class="four columns">IMAGE HERE</div>

      <?php if( $wp_query->current_post % 3 == 0 ) : ?>
           </div>
      </div>
      <!-- row -->
      <div class="twelve columns">
           <div class="four columns">
      <?php endif; ?>        
      <?php endwhile; ?>
</div>

图像在这里
此处文本
图像在这里
此处文本
图像在这里
此处文本
图像在这里
此处文本

以此类推，我希望它显示在一个网格中，这样HTML应该看起来更像这样：

<!-- START LOOP -->
                <?php while ( have_posts() ) : the_post(); ?>

                    <div class="row" style="margin:15px 0;">
                        <div class="twelve columns">
                            <div class="four columns">
                                <a href="<?php the_permalink(); ?>">
                                    <?php 
                                        if ( has_post_thumbnail() ) {
                                            the_post_thumbnail( 'medium' );
                                        } else {
                                            echo 'No Preview Available'; 
                                        } 
                                    ?>
                                </a>
                            </div>
                            <div class="eight columns">

                                <h3><a href="<?php the_permalink(); ?>"><?php the_title() ?></a></h3>
                                <p><?php the_excerpt() ?></p>
                                <p><a href="<?php echo esc_html( get_post_meta( get_the_ID(), 'portfolio_website', true ) ); ?>" target="_blank"><?php echo esc_html( get_post_meta( get_the_ID(), 'portfolio_website', true ) ); ?></a></p>

                            </div>  

                        </div>
                    </div>
                    <hr />

                <?php endwhile; ?>

<div class="row container">
    <!-- item 1 -->
    <div class="twelve columns">
        <div class="four columns">IMAGE HERE</div>
        <div class="eight columns">TEXT HERE</div>
    </div>

    <!-- item 2 -->
    <div class="twelve columns">
        <div class="four columns">IMAGE HERE</div>
        <div class="eight columns">TEXT HERE</div>
    </div>

    <!-- item 3 -->
    <div class="twelve columns">
        <div class="four columns">IMAGE HERE</div>
        <div class="eight columns">TEXT HERE</div>
    </div>

    <!-- item 4 -->
    <div class="twelve columns">
        <div class="four columns">IMAGE HERE</div>
        <div class="eight columns">TEXT HERE</div>
    </div>
</div>

<div class="row container">
    <!-- row 1 -->
    <div class="twelve columns">
        <div class="four columns">
            <!-- item 1 -->
            <div class="four columns">IMAGE HERE</div>

            <!-- item 2 -->
            <div class="four columns">IMAGE HERE</div>

            <!-- item 3 -->
            <div class="four columns">IMAGE HERE</div>
        </div>
    </div>

    <!-- row 2 -->
    <div class="twelve columns">
        <div class="four columns">
            <!-- item 4 -->
            <div class="four columns">IMAGE HERE</div>

            <!-- item 5 -->
            <div class="four columns">IMAGE HERE</div>

            <!-- item 6 -->
            <div class="four columns">IMAGE HERE</div>
        </div>
    </div>
</div>

 <div class="row container">
      <!-- row -->
      <div class="twelve columns">
           <div class="four columns">
      <?php while ( have_posts() ) : the_post(); ?>

                <!-- item -->            
                <div class="four columns">IMAGE HERE</div>

      <?php if( $wp_query->current_post % 3 == 0 ) : ?>
           </div>
      </div>
      <!-- row -->
      <div class="twelve columns">
           <div class="four columns">
      <?php endif; ?>        
      <?php endwhile; ?>
</div>

图像在这里
图像在这里
图像在这里
图像在这里
图像在这里
图像在这里

我可以做任何事情，我只是不知道如何实现下面，所以我得到的结果，我贴在上面？我在网上发现了这一点，觉得这是朝着正确方向迈出的一步：

<?php ($i % 3) == 0 ?>

---

你的感觉是对的

您可以使用的

$current\u post

属性获取循环中当前显示的帖子的索引，然后使用以确保目标是三的倍数

因此，您的循环可以如下所示：

<!-- START LOOP -->
                <?php while ( have_posts() ) : the_post(); ?>

                    <div class="row" style="margin:15px 0;">
                        <div class="twelve columns">
                            <div class="four columns">
                                <a href="<?php the_permalink(); ?>">
                                    <?php 
                                        if ( has_post_thumbnail() ) {
                                            the_post_thumbnail( 'medium' );
                                        } else {
                                            echo 'No Preview Available'; 
                                        } 
                                    ?>
                                </a>
                            </div>
                            <div class="eight columns">

                                <h3><a href="<?php the_permalink(); ?>"><?php the_title() ?></a></h3>
                                <p><?php the_excerpt() ?></p>
                                <p><a href="<?php echo esc_html( get_post_meta( get_the_ID(), 'portfolio_website', true ) ); ?>" target="_blank"><?php echo esc_html( get_post_meta( get_the_ID(), 'portfolio_website', true ) ); ?></a></p>

                            </div>  

                        </div>
                    </div>
                    <hr />

                <?php endwhile; ?>

<div class="row container">
    <!-- item 1 -->
    <div class="twelve columns">
        <div class="four columns">IMAGE HERE</div>
        <div class="eight columns">TEXT HERE</div>
    </div>

    <!-- item 2 -->
    <div class="twelve columns">
        <div class="four columns">IMAGE HERE</div>
        <div class="eight columns">TEXT HERE</div>
    </div>

    <!-- item 3 -->
    <div class="twelve columns">
        <div class="four columns">IMAGE HERE</div>
        <div class="eight columns">TEXT HERE</div>
    </div>

    <!-- item 4 -->
    <div class="twelve columns">
        <div class="four columns">IMAGE HERE</div>
        <div class="eight columns">TEXT HERE</div>
    </div>
</div>

<div class="row container">
    <!-- row 1 -->
    <div class="twelve columns">
        <div class="four columns">
            <!-- item 1 -->
            <div class="four columns">IMAGE HERE</div>

            <!-- item 2 -->
            <div class="four columns">IMAGE HERE</div>

            <!-- item 3 -->
            <div class="four columns">IMAGE HERE</div>
        </div>
    </div>

    <!-- row 2 -->
    <div class="twelve columns">
        <div class="four columns">
            <!-- item 4 -->
            <div class="four columns">IMAGE HERE</div>

            <!-- item 5 -->
            <div class="four columns">IMAGE HERE</div>

            <!-- item 6 -->
            <div class="four columns">IMAGE HERE</div>
        </div>
    </div>
</div>

 <div class="row container">
      <!-- row -->
      <div class="twelve columns">
           <div class="four columns">
      <?php while ( have_posts() ) : the_post(); ?>

                <!-- item -->            
                <div class="four columns">IMAGE HERE</div>

      <?php if( $wp_query->current_post % 3 == 0 ) : ?>
           </div>
      </div>
      <!-- row -->
      <div class="twelve columns">
           <div class="four columns">
      <?php endif; ?>        
      <?php endwhile; ?>
</div>

图像在这里

---

您可能需要改进此实现。具体来说，无论发生什么情况，都要确保HTML正确关闭。

你的感觉是正确的

您可以使用的

$current\u post

属性获取循环中当前显示的帖子的索引，然后使用以确保目标是三的倍数

因此，您的循环可以如下所示：

<!-- START LOOP -->
                <?php while ( have_posts() ) : the_post(); ?>

                    <div class="row" style="margin:15px 0;">
                        <div class="twelve columns">
                            <div class="four columns">
                                <a href="<?php the_permalink(); ?>">
                                    <?php 
                                        if ( has_post_thumbnail() ) {
                                            the_post_thumbnail( 'medium' );
                                        } else {
                                            echo 'No Preview Available'; 
                                        } 
                                    ?>
                                </a>
                            </div>
                            <div class="eight columns">

                                <h3><a href="<?php the_permalink(); ?>"><?php the_title() ?></a></h3>
                                <p><?php the_excerpt() ?></p>
                                <p><a href="<?php echo esc_html( get_post_meta( get_the_ID(), 'portfolio_website', true ) ); ?>" target="_blank"><?php echo esc_html( get_post_meta( get_the_ID(), 'portfolio_website', true ) ); ?></a></p>

                            </div>  

                        </div>
                    </div>
                    <hr />

                <?php endwhile; ?>

<div class="row container">
    <!-- item 1 -->
    <div class="twelve columns">
        <div class="four columns">IMAGE HERE</div>
        <div class="eight columns">TEXT HERE</div>
    </div>

    <!-- item 2 -->
    <div class="twelve columns">
        <div class="four columns">IMAGE HERE</div>
        <div class="eight columns">TEXT HERE</div>
    </div>

    <!-- item 3 -->
    <div class="twelve columns">
        <div class="four columns">IMAGE HERE</div>
        <div class="eight columns">TEXT HERE</div>
    </div>

    <!-- item 4 -->
    <div class="twelve columns">
        <div class="four columns">IMAGE HERE</div>
        <div class="eight columns">TEXT HERE</div>
    </div>
</div>

<div class="row container">
    <!-- row 1 -->
    <div class="twelve columns">
        <div class="four columns">
            <!-- item 1 -->
            <div class="four columns">IMAGE HERE</div>

            <!-- item 2 -->
            <div class="four columns">IMAGE HERE</div>

            <!-- item 3 -->
            <div class="four columns">IMAGE HERE</div>
        </div>
    </div>

    <!-- row 2 -->
    <div class="twelve columns">
        <div class="four columns">
            <!-- item 4 -->
            <div class="four columns">IMAGE HERE</div>

            <!-- item 5 -->
            <div class="four columns">IMAGE HERE</div>

            <!-- item 6 -->
            <div class="four columns">IMAGE HERE</div>
        </div>
    </div>
</div>

 <div class="row container">
      <!-- row -->
      <div class="twelve columns">
           <div class="four columns">
      <?php while ( have_posts() ) : the_post(); ?>

                <!-- item -->            
                <div class="four columns">IMAGE HERE</div>

      <?php if( $wp_query->current_post % 3 == 0 ) : ?>
           </div>
      </div>
      <!-- row -->
      <div class="twelve columns">
           <div class="four columns">
      <?php endif; ?>        
      <?php endwhile; ?>
</div>

图像在这里

---

您可能需要改进此实现。具体来说，请确保无论发生什么情况，您的HTML都正确关闭。

我需要的是一个计数器：

<!-- START LOOP -->
            <?php $counter = 1 ?>
            <div class="row" style="margin:15px 0;">
                    <div class="twelve columns">
            <?php while ( have_posts() ) : the_post(); ?>


                        <div class="four columns">
                            <a href="<?php the_permalink(); ?>">
                                <?php 
                                    if ( has_post_thumbnail() ) {
                                        the_post_thumbnail( 'medium' );
                                    } else {
                                        echo 'No Preview Available'; 
                                    } 
                                ?>
                            </a>
                        </div>  
                        <?php if ($counter % 3 == 0){echo '</div></div></hr /><div class="row" style="margin:15px 0;"><div class="twelve columns">';} ?>                            


            <?php $counter++ ; 
            endwhile; ?>
            </div>
            </div>

---

我需要的是一个计数器：

<!-- START LOOP -->
            <?php $counter = 1 ?>
            <div class="row" style="margin:15px 0;">
                    <div class="twelve columns">
            <?php while ( have_posts() ) : the_post(); ?>


                        <div class="four columns">
                            <a href="<?php the_permalink(); ?>">
                                <?php 
                                    if ( has_post_thumbnail() ) {
                                        the_post_thumbnail( 'medium' );
                                    } else {
                                        echo 'No Preview Available'; 
                                    } 
                                ?>
                            </a>
                        </div>  
                        <?php if ($counter % 3 == 0){echo '</div></div></hr /><div class="row" style="margin:15px 0;"><div class="twelve columns">';} ?>                            


            <?php $counter++ ; 
            endwhile; ?>
            </div>
            </div>

Lol谢谢，我刚找到它，因为我相信你正在写，但你的版本看起来更干净；）是的，你的版本应该很好用。我的优点是您不需要额外的计数器，因为Wordpress已经使用

$current\u post

property跟踪它。此外，使用

if块

比使用

echo

语句更为简洁，因此您可以在HTML和PHP之间进行更平稳的转换。总之，在性能方面没有大的交易。哈哈，谢谢，我刚找到它，因为我相信你在写它，但你的版本看起来更干净；）是的，你的版本应该很好用。我的优点是您不需要额外的计数器，因为Wordpress已经使用

$current\u post

property跟踪它。此外，使用

if块

比使用

echo

语句更为简洁，因此您可以在HTML和PHP之间进行更平稳的转换。总而言之，从性能角度来看，没有大的交易。