在循環中每三個項目後添加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

你的感覺是對的。

您可以使用WP_Query class的$current_post屬性來獲取循環中當前顯示的帖子的索引，然後使用modulus operator確保您的目標倍數爲3。

所以，你的循環可能看起來像這樣：

<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都會正確關閉。

Answer 2

我需要的是一個計數器：

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