爲每4個帖子和8個帖子添加類 - WordPress循環

Question

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

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個職位，但第一個'幻燈片'類不能正確關閉。這可能聽起來很混亂，所以讓我知道你是否需要額外的信息。

我很感激幫助！

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

此代碼是從另一個答案在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 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;