グリッドシステムのブートストラップでwordpressループを使用するには？

Question

私は2列のワードプレスループの内容（タイトル、緑色のブロックで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 --> 

ORIGINAL ANSWER

これは、あなたが探しているhtmlです。あなたのニーズに合わせてクラス名を変更するだけです。これはWordPressのループなので、新しい行を開始するタイミングとバックグラウンドの色を変更するタイミングを指定するelseステートメントが必要です。

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