将类添加到每4篇文章和8篇文章中-- WordPress循环

Question

我正在尝试构建一个内容滑块，以便每个幻灯片包含8张图片。要做到这一点，我需要在我的WP查询中将“行流体”类添加到每4篇文章中，并将“幻灯片”类添加到每8篇文章中。

我想要达到的目标-

<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篇文章中，但是第一个“幻灯片”类没有正确关闭。这可能听起来很混乱，所以如果您需要更多的信息，请告诉我。

我很感激你的帮助！

Answer 1

(试试这个;)

<?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 2

这段代码是从另一个答案中得到的

如何将类添加到php循环(wordpress)中的每个第n项

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 3

您可以使用帖子和昌克进行尝试。

$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;