每隔三个 wordpress 帖子添加一个类答案

【问题标题】：Add a class to every third wordpress post每隔三个 wordpress 帖子添加一个类
【发布时间】：2011-07-27 15:45:32
【问题描述】：

我列出了博客类别中的所有 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 -->

希望这有意义吗？

【问题讨论】：

为你更新了我的答案。看错了

标签： php javascript wordpress

【解决方案1】：

使用 CSS

代替

.last

使用

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

【讨论】：

这很好用，但理想情况下希望将其设置为序列，即：“last”类将应用于帖子 3、6、9、12 等
Internet Explorer 怎么样？
你说的是哪个版本的IE？

【解决方案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 -->

试试这个。应该可以。

【讨论】：

【解决方案3】：

编辑：

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

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

【讨论】：

你打败了我。 +1 没有比这更简单的方法了
你为什么要使用javascript来做到这一点？
@locrizak：看看这个问题标签。
我意识到，但他正在寻找建议，而 javascript 不是这样做的方法
不，他正在尝试“在每三个 wordpress 帖子中添加一个类”。我的解决方案就是这样做的。

【解决方案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; ?>

【讨论】：

这很好，但是将课程添加到第一篇而不是第三篇，有什么想法吗？

【解决方案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 元素。

【讨论】：

【解决方案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。

【讨论】：