WP_Query，創建html結構

Question

我在這裏有一個頁面來說明我的問題

http://www.ttmt.org.uk。

第一個網格是用我想要的html結構進行硬編碼的 - div包含每一行，然後div包含每個塊的內部。

我的問題是如何在WP_Query中創建此結構。

如果我輸出WP_Query中的行，它會給我每行1塊。我需要每行三個塊。

我需要循環內的某種循環嗎？

<?php get_header(); ?> 

    <div class="container"> 

     <div class="row"> 
      <div class="col-xs-3 box"> 
       <p>Post 1</p> 
      </div> 
      <div class="col-xs-3 box"> 
       <p>Post 2</p> 
      </div> 
      <div class="col-xs-3 box"> 
       <p>Post 3</p> 
      </div> 
     </div> 

     <div class="row"> 
      <div class="col-xs-3 box"> 
       <p>Post 4</p> 
      </div> 
      <div class="col-xs-3 box"> 
       <p>Post 5</p> 
      </div> 
      <div class="col-xs-3 box"> 
       <p>Post 6</p> 
      </div> 
     </div> 

     <div class="row"> 
      <div class="col-xs-3 box"> 
       <p>Post 7</p> 
      </div> 
      <div class="col-xs-3 box"> 
       <p>Post 8</p> 
      </div> 
      <div class="col-xs-3 box"> 
       <p>Post 9</p> 
      </div> 
     </div> 

    </div> 


    <div class="container two"> 

     <h3>With WP_Query</h3> 

     <?php 
      $grid_args = array(
       'post_type' => 'post', 
       'order' => 'ASC', 
       'orderby' => 'menu_order' 
      ); 

      $grid_loop = new WP_Query($grid_args); 

      if($grid_loop->have_posts()): 
       while($grid_loop->have_posts()): 
        $grid_loop->the_post(); 

     ?> 

     <div class="row"> 
      <div class="col-xs-3 box"> 
       <p><?php the_title(); ?></p> 
      </div> 
     </div> 

     <?php 
      endwhile; 
      endif; 
     ?> 

     <?php wp_reset_postdata(); ?> 
    </div> 


<?php get_footer(); ?> 

Answer 1

你必須這樣做：「何時開始新行？你自己。

在循環中，您可以計算col索引。如果它達到3（使用模數，所以你可以避免重置索引），然後開始一個新的行。

類似的東西（我沒有測試）：

<?php 
$grid_loop = new WP_Query($grid_args); 

$col = 0; 
if($grid_loop->have_posts()): 

    while($grid_loop->have_posts()): 
?> 
     <?php if($col % 3 == 0) ?> 
      <div class="row"><!-- start row --> 
     <?php endif; ?> 

     <div class="col-xs-3 box"> 
      <p><?php the_title(); ?></p> 
     </div> 

     <?php if($col % 3 == 2) ?> 
      </div><!-- end row --> 
     <?php endif; ?> 

<?php 
     $col++; 
    endwhile; 
?> 
    <?php if($col % 3 != 0) ?> 
     </div><!-- close row if it is still open --> 
    <?php endif; ?> 
<?php 
endif; 
?>