그리드 시스템 부트 스트랩과 함께 wordpress 루프를 사용하는 방법?

Question

두 열이있는 스트립 행을 보여주고 싶습니다. 각 줄마다 체스 검사기와 같이 각 행이 거꾸로 된 흰색과 회색 배경이있는 열이 있습니다 (제목, 녹색 블록에서 제외됨).

자세한 내용은 이미지를 참조하십시오.

Answer 1

EDITED 답변

나는 이것이 당신이 찾고있는 것을 믿습니다. 이것은 가지고있는 모든 게시물을 반복 한 다음 스케치 모양과 같은 방식으로 정렬합니다.

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

이것은 당신이 찾고있는 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>