Wordpress loop with different bootstrap columns

问题

i need to create a wordpress loop where the first post will be col-md-12 and the next 4 posts will be col-md-6

<div class= "col-md-12">
</div>
<div class= "col-md-6">
</div>
<div class= "col-md-6">
</div>
<div class= "col-md-6">
</div>
<div class= "col-md-6">
</div>

and then

<div class= "col-md-12">
</div>
<div class= "col-md-6">
</div>
<div class= "col-md-6">
</div>
<div class= "col-md-6">
</div>
<div class= "col-md-6">
</div>

回答1:

may be this can help :

<?php 
if ( have_posts() ) {
     $counter = 0;
    while ( have_posts() ) {

    if(($counter%5) == 0 ){?>
        <div class= "col-md-12"> call the loop tags of the curent post to show data that you want </div>
<?php
}
    else{?>

     <div class= "col-md-6"> call the loop tags of the curent post to show data that you want </div>

    <?php }

    $counter++;
    } // end while
} // end if
?>

In case to limit post to 10 post only:

   <?php 
    $wp =  new WP_Query(array('posts_per_page'=>10));
    if ( $wp->have_posts() ) {
         $counter = 0;
        while ( $wp->have_posts() ) {

        if(($counter%5) == 0 ){?>
            <div class= "col-md-12"> call the loop tags of the curent post to show data that you want </div>
    <?php
    }
        else{?>

         <div class= "col-md-6"> call the loop tags of the curent post to show data that you want </div>

        <?php }

        $counter++;
        } // end while
    } // end if
    ?>

you have to call all the tags like : the_title(), the_content() preceded by $wp , but not obligation

回答2:

Try a ternary operator:

<?php 
if ( have_posts() ) {
    $counter = 0;
    while ( have_posts() ) {    
        $colClass = ($counter%5) == 0 ) ? "col-md-12" : "col-md-6";
        echo '<div class= "' . $colClass . '">';
        // Post data
        echo '</div>';   
        $counter++;
    } // end while
} // end if
?>

来源：https://stackoverflow.com/questions/54568904/wordpress-loop-with-different-bootstrap-columns

标签

php

loops

wordpress-theming