循环中每三个项后添加div？

Question

我正在使用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？

我知道我可能只是混淆了你的废话,因为我迷惑自己,但简而言之,html看起来像这样:

<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>

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

<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>

我可以做其他一切我只是不确定如何实现下面所以我得到我粘贴在上面的结果？我在网上找到了这个,觉得这是朝着正确方向迈出的一步:

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

Answer 1

你的感受是对的.

您可以使用类的$current_post属性来获取当前在循环中显示的帖子的索引,然后使用模数运算符确保您的目标是三的倍数.WP_Query

所以你的循环看起来像这样:

 <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都会正确关闭.