在DIV中包装每1到4个Wordpress帖子

时间:2015-05-05 18:25:55

标签: php html wordpress

我试图用一个行的div包装wordpress帖子的每一行。

一直试图按照下面链接的另一个问题的答案但似乎遇到麻烦,因为我的循环有点不同。此外,我希望任何有1个或更多帖子的行也可以连续包裹......

I need to wrap every 4 wordpress posts in a div

<?php

    query_posts('cat=2'); 
    $i = 0;
    $wrap_div = "<div class='row'>";

    if ( have_posts() ) : 
        $total_posts = $wp_query->post_count;
        echo $wrap_div;

        while ( have_posts() ) : the_post();
?>

<div class="four columns gameListing" id="" data-count="">       
    <img class="gameLogo" src="" > 
    <div class="gameInfo">
        <h2 class="gameTitle"></h2>
        <div class="gameRating"></div>
    </div>
    <a class="gameCta" rel="" data-post-id="" >
         <span class="title" data-id="">Click to Play</span
    </a>
</div>

<?php 

        if ( $i % 4 == 0 && $i != 0 && ( $i + 1 ) != $total_posts ) {
            echo '</div>' . $wrap_div;
        }

        $i ++;

?>
<?php endwhile; endif; ?>
<?php wp_reset_query(); ?>

1 个答案:

答案 0 :(得分:0)

当post_count不是4的倍数

时可能出现这种情况
<?php
$my_query = new WP_Query( array( 'category__in' => 2 ) );
$wrap_avery = 4;
$index = 0;

$need_end_div = $my_query->post_count % $wrap_avery > 0;

while( $my_query->have_posts() ) {
    $my_query->the_post();
    $index++;

    // open row if index = 1, 5, 9...
    if( ($index - 1) % $wrap_avery == 0 ) {
        echo "<div class='row'>";
    }

    //todo: block HTML here

    // close row if index = 4, 8, 12...
    if( $index % $wrap_avery == 0 ) {
        echo '</div>';
    }

}

// close div if posts count not multiple of 4
if($need_end_div) {
    echo '</div>';
}

顺便说一句,你不应该使用query_posts