Question

我列出了博客类别中的所有wordpress帖子，但试图在每三个'fourcol'类中添加一个名为'last'的类

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

修改

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

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

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

使用CSS

而不是

.last

使用

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

Answer 4

您需要modulus operator

<?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即可。以下变体使用existing post counter in wordpress和modulo operator。计数器从0开始，所以我们每次都加1：

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

这是相当紧凑的，我可以想象在你的主题的PHP方面的wordpress上最紧凑的解决方案。

背后的想法如下：

添加一个变量作为计数器，在每个帖子上计算它，如果它是3，再次将它设置为0并添加该类。

以下脚本显示了每个步骤：定义计数器（如果不存在），将其计数，如果适用则将其重置为0并执行回显：

<div class="fourcol<?php

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

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

    echo ' last';
  }

 ?>">

这只是为了示范。当您使用标准查询对象时，我们可以重新使用现有变量。另外，使用modulo operator有助于查找每个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>';

}

这里每4个帖子后添加一个clrFix div。

为每第三个wordpress帖子添加一个类

6 个答案: