為每4個帖子和8個帖子添加課程 - WordPress循環

Question

我正在嘗試構建內容滑塊，以便每張幻燈片包含8個圖像。 要做到這一點，我需要在每個帖子中添加'row-fluid'類，在我的WP查詢中每8個帖子添加'slide'類。

我試圖實現的HTML -

<div class="coda-slider"  id="slider-id">

  <div class="slide">

    <div class="row-fluid">
      <div class="span3">
        <img src="...">
      </div>
      <div class="span3">
        <img src="...">
      </div>
      <div class="span3">
        <img src="...">
      </div>
      <div class="span3">
        <img src="...">
      </div>
    </div><!-- /row-fluid -->

    <div class="row-fluid">
      <div class="span3">
        <img src="...">
      </div>
      <div class="span3">
        <img src="...">
      </div>
      <div class="span3">
        <img src="...">
      </div>
      <div class="span3">
        <img src="...">
      </div>
    </div><!-- /row-fluid -->

  </div><!-- /slide -->

  <div class="slide">

    <div class="row-fluid">
      <div class="span3">
        <img src="...">
      </div>
      <div class="span3">
        <img src="...">
      </div>
      <div class="span3">
        <img src="...">
      </div>
      <div class="span3">
        <img src="...">
      </div>
    </div><!-- /row-fluid -->

    <div class="row-fluid">
      <div class="span3">
        <img src="...">
      </div>
      <div class="span3">
        <img src="...">
      </div>
      <div class="span3">
        <img src="...">
      </div>
      <div class="span3">
        <img src="...">
      </div>
    </div><!-- /row-fluid -->

  </div><!-- /slide -->

</div><!-- /coda-slider -->

我的查詢無法正常工作 -

<?php

$args = array( 'post_type' => 'video', 'posts_per_page' => 10,);

$the_query = new WP_Query( $args );

echo '<section id="our-clients">';

echo '<div class="coda-slider"  id="slider-id">';   

$i = 1;

echo '<div class="slide">';

echo '<div class="row-fluid">';

if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post();

echo '<div class="span3">';

the_post_thumbnail();

echo '</div>';

     if($i % 8 == 0) {echo '</div><div class="slide">';}

     elseif($i % 4 == 0) {echo '</div><div class="row-fluid">';}

$i++; endwhile; endif;

echo '</div>'; //row-fluid

echo '</div>'; //slide

echo '</div>'; //coda-slider

echo '</section>';

查詢打印出來的內容 -

php正在為每8個帖子添加'slide'類，但第一個'slide'類沒有正確關閉。 這可能聽起來很混亂，所以如果您需要其他信息，請告訴我。

我很感激幫助！

Answer 1

此代碼來自SO的另一個答案

如何在php循環中的每個第n項添加一個類（wordpress）

https://stackoverflow.com/a/12698408/804087

<?php $counter = 1 ?>
<?php $loop = new WP_Query( array( 'post_type' => 'portfolio' ) ); ?>
    <?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
    <div class="four columns <?php if ($counter % 4 == 1){echo 'alpha'}else if ($counter % 4 == 0){echo 'omega'} ?>">
        <?php the_content(); //along with other stuff in looped div ?>
    </div>
<?php $counter++ ; 
endwhile ?>

Answer 2

嘗試這個 ;）

<?php

$args = array( 'post_type' => 'video', 'posts_per_page' => 10,);

$the_query = new WP_Query( $args );

echo '<section id="our-clients">';

echo '<div class="coda-slider"  id="slider-id">';   

for($i=1; $the_query->have_posts(); $i++)
{
    $the_query->the_post();

    $prePost='';
    $postPost='';

    if($i==1)
    {
        $prePost='<div class="slide"><div class="row-fluid">';
    }
    if($i==4)
    {
        $prePost='</div><div class="row-fluid">';
    }

    if($i==8)
    {
        $postPost='</div></div>';
        $i=0;
    }

    echo $prePost, '<div class="span3">';
    the_post_thumbnail();
    echo '</div>', $postPost;
}


echo '</div>'; //coda-slider

echo '</section>';

Answer 3

您可以使用get_posts和array_chunck嘗試此操作

$args = array( 'post_type' => 'video', 'posts_per_page' => 10,);
$posts = get_posts($args);
$postGroups = array_chunk($posts, 8);

foreach($postGroups as $group) :
    echo "<div class='slide'>";
        $slides = array_chunk($group, 4);
        foreach($slides as $fluides) :
            echo "<div class='row-fluide'>";
                foreach($fluides as $video) : setup_postdata($video)
                    <div class="span3">
                       // ...
                    </div>
                endforeach;
            echo "</div>";
        endforeach;
    echo "</div>";
endforeach;