Добавить класс в каждый третий пост WordPress

Question

Я перечисляю все сообщения WordPress в категории блога, но пытаюсь добавить класс 'last' к каждому третьему классу 'fourcol'

HTML

<div class="container">
    <div class="row">

    <?php query_posts('category_name=blog&showposts=10&orderby=date&order=dsc'); if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

        <div class="fourcol">
            <a href=""><h2 class="blogtitle"><?php the_title(); ?></h2></a>
            <a href="#"><img src="images/_scroll1.jpg"></a>
            <span class="date">12 May 2011</span>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <a class="more" href="#">Keep reading</a>
                </div><!-- fourcol END -->

            <?php endwhile; endif; ?>
        </div><!-- row END -->
    </div><!-- container END -->

Надеюсь, это имеет смысл?

Answer 1

Использование CSS

Вместо

.last

Использование

.fourcol:nth-child(3n+1)

Answer 2

<?php query_posts('category_name=blog&showposts=10&orderby=date&order=dsc'); 
if ( have_posts() ) : 
    $i=0;
    while ( have_posts() ) : 
        the_post(); 
    ++$i; 
    ?>

    <div class="fourcol<?php if($i%3==0) echo ' every-third-post' ?>" >
        <a href=""><h2 class="blogtitle"><?php the_title(); ?></h2></a>
        <a href="#"><img src="images/_scroll1.jpg"></a>
        <span class="date">12 May 2011</span>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <a class="more" href="#">Keep reading</a>
            </div><!-- fourcol END -->

        <?php endwhile; endif; ?>
    </div><!-- row END -->
</div><!-- container END -->

Попробуй это. Должно работать.

Answer 3

РЕДАКТИРОВАТЬ:

var i = 1;
$('#row .fourcol').each(function() {
    if(i++ % 4 == 0) 
        $(this).addClass('last'); 
});

---

$('.fourcol').eq(3).addClass('last');

Answer 4

вам нужен оператор модуля

<?php query_posts('category_name=blog&showposts=10&orderby=date&order=dsc'); 
    $counter = 0; //add a ounter to keep track of the number post we're on
    if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    //check if the remainder of $count is 0, if so add the class 'last'
    <div class="fourcol <? if ( $count % 3 == 0 ) echo 'last' ?>">                                                        
        <a href=""><h2 class="blogtitle"><?php the_title(); ?></h2></a>
        <a href="#"><img src="images/_scroll1.jpg"></a>
        <span class="date">12 May 2011</span>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <a class="more" href="#">Keep reading</a>
    </div><!-- fourcol END -->
    <? $count++; ?>
<?php endwhile; endif; ?>

Answer 5

Вы можете сделать это с помощью PHP в вашем шаблоне.Просто добавьте строку last в каждый третий пост.В следующем варианте используется существующий счетчик сообщений в wordpress и оператор по модулю .Счетчик начинается с 0, поэтому мы каждый раз добавляем к нему 1:

<div class="fourcol<?php if ( !((1 + $wp_query->current_post) % 3) ) echo ' last' ?>">

Это довольно компактное и наиболее компактное решение, которое я могу представить для wordpress на стороне PHP вашей темы.

Идея заключается в следующем:

Добавьте переменную в качестве счетчика, подсчитайте ее в каждом сообщении и, если она равна 3, снова установите ее в 0 и добавьте класс.

Следующий скрипт показывает каждый из этих шагов: Определите счетчик, если он не существует, подсчитайте его, сбросьте его до 0, если применимо, и выполните эхо:

<div class="fourcol<?php

  isset($iposts) || $iposts = 0;

  if (++$iposts === 3)
  {
    $iposts = 0;

    echo ' last';
  }

 ?>">

Это только для демонстрации.Поскольку вы используете стандартный объект запроса, это намного проще, поскольку мы можем повторно использовать существующую переменную.Кроме того, использование оператора по модулю помогает найти каждый элемент X.

Answer 6

if ( have_posts() ) : while( have_posts() ) : the_post();
//Loop code goes here. 
if ( 0 == $count%4 ) {
    echo 'div class="clrFix"></div>';
}
endwhile; 
if ( 0 != $count%4 ) {
   echo 'div class="clrFix"></div>';

}

Здесь добавляйте div clrFix после каждых 4 постов.