Wie verwende ich Wordpress Loop mit Grid System Bootstrap?

Question

Ich möchte eine Strip-Zeile mit zwei Spalten anzeigen, die den Inhalt der Wordpress-Schleife enthalten (Titel, Ausnahme in grünen Blöcken). Jede Zeile hat Spalten mit weißem und grauem Hintergrund, die in jeder Zeile wie Schach-Checker invertieren.

siehe das Bild für weitere Details.

Answer 1

EDITED ANTWORT

Ich glaube, das ist das, was Sie suchen. Dadurch werden alle Ihre Posts durchlaufen und anschließend sortiert, wie Ihre Skizze aussieht.

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

Dies ist der HTML-Code für Sie suchen. Ändern Sie einfach die Klassennamen nach Ihren Bedürfnissen. Da es sich um eine WordPress-Schleife handelt, muss man sonst noch Anweisungen dafür geben, wann eine neue Zeile beginnen soll und wann eine andere Farbe für den Hintergrund zu haben ist.

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