如何使用wordpress循環與網格系統引導？

Question

我想顯示帶有兩列的條帶行包含wordpress循環內容（標題，在綠色區域exrept）每行都有白色和灰色背景的列，像國際象棋棋子一樣在每一行反轉。

查看圖像的更多細節。

Answer 1

EDITED ANSWER

我相信這是你在找什麼。循環遍歷你所有的帖子，然後按照你的草圖看起來的方式排列它們。

<div class='container'> 
    <?php 
     $args = array(
      'post_type' => 'post' // Get only posts 
     ); 

     $the_query = new WP_Query ($args); // build query 

     $count = $the_query->post_count; // Check number of posts 

    <style> 
     .row:nth-child(even) .col-5:nth-child(even) { /* Select every even row and and even post */ 
      background: #ddd; 
     } 

     .row:nth-child(odd) .col-5:nth-child(odd) { /* Select every odd row and odd post*/ 
      background: #ddd; 
     } 
    </style> 
     <?php 
      while ($the_query -> have_posts()) : $the_query -> the_post(); 
       $post_index = $the_query->current_post + 1; // $current_post = gets the post index in loop 

       if ($post_index % 2 != 0) { // Open div if post is odd 
        echo '<div class="row" style="border: 2px solid red; padding: 20px; margin:30px;">'; 
       } 

       if ($post_index % 2 != 0) { // If post is odd then give one class 
     ?>     
        <div class="col-xs-5 <?php echo "post_$post_index" ?>" style="border: 1px solid green;"> 
         <h2><?php the_title(); ?></h2> 
         <p><?php the_excerpt(); ?></p> 
        </div> 
      <?php 
       } else { 
      ?> 
        <div class="col-xs-5 col-xs-push-2 <?php echo "post_$post_index" ?>" style="border: 1px solid green;"> 
         <h2><?php the_title(); ?></h2> 
         <p><?php the_excerpt(); ?></p> 
        </div> 
      <?php } // End if ($post_index % 2 != 0) 

       if ($post_index % 2 == 0) { // Close div if post is even 
        echo "</div>"; 
       }      

     endwhile; 
     wp_reset_postdata(); 
    ?> 


     </div> 
     <!-- /.container --> 

原來的答案

這是你要找的HTML。只需更改類名稱以滿足您的需求。由於它是WordPress循環，因此如果有其他語句用於何時啓動新行以及何時爲背景使用不同的顏色，則必須執行此操作。

.row { 
 
    border: 2px solid red; 
 
    padding: 10px 20px; 
 
    margin: 30px 0; 
 
} 
 

 
.col-xs-5 { 
 
    border: 1px solid green; 
 
    height: 100px; 
 
} 
 

 
.gray-bg { 
 
    background: #ccc; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="container-fluid"> 
 
<div class="row"> 
 
    <div class="col-xs-5"></div> 
 
    <div class="col-xs-5 col-xs-push-2 gray-bg"></div> 
 
</div> 
 
<div class="row"> 
 
    <div class="col-xs-5 gray-bg"></div> 
 
     <div class="col-xs-5 col-xs-push-2"></div> 
 
</div> 
 
<div class="row"> 
 
    <div class="col-xs-5"></div> 
 
     <div class="col-xs-5 col-xs-push-2 gray-bg"></div> 
 
</div> 
 
<div class="row"> 
 
    <div class="col-xs-5 gray-bg"></div> 
 
    <div class="col-xs-5 col-xs-push-2"></div> 
 
</div> 
 
</div> 
 

 
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
 

 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>