使用循环显示具有不同HTML标记的3个帖子

时间:2013-01-30 作者:Steve Stevenson

我想能够在我的索引上显示来自同一类别的3篇文章。php页面,但由于我的网站HTML/CSS的编码方式,我很难理解使用循环来实现这一点的正确方法(因为三个部分使用的div代码不同,它使用不同的CSS样式来实现分层效果/外观)。

下面是HTML代码

<div id="first-story" class="story">
<div class="content">
<h3 class="story-heading">Headline 1</h3>
<ul>
   <li>Nullam sit amet scelerisque est. </li>   
   <li>Aliquam erat volutpat. Duis sed nisi nunc, faucibus rutrum mauris. </li>
   <li>Nullam iaculis lorem ut tortor ullamco per aliquet. Integer id leo non mauris pulvinar gravida vitae a enim. </li>
   <li>Nullam sit amet scelerisque est.</li>
</ul>   
    <a class="learnmore" href="#"><img src="img/button-learnmore.png"></a></div>
<div class="edge"></div>

<div id="second-story" class="story">
<div class="content">
 <h3 class="story-heading">Headline 2</h3>
   <p>Paragraph text</p>
   <a class="learnmore" href="#"><img src="img/button-learnmore.png"></a></div>
</div>

<div id="third-story" class="story">
<div class="edge"></div>
<div class="content">Headline 3</div>
        <ul>
           <li>List item</li>
        </ul>
        <a class="learnmore" href="#"><img src="img/button-learnmore.png"></a></div>
</div>
任何帮助都将不胜感激。

1 个回复
最合适的回答,由SO网友:Milo 整理而成

WordPress查询对象有一个内部计数器,current_post, 您可以使用它来检查当前输出的循环中帖子的位置,是否是主查询$wp_query 或通过创建自定义查询WP_Query. 重要的是要记住current_post 是不是zero indexed, 第一个帖子是0,第二个帖子是1,以此类推。。

例如,在模板中使用主查询:

while( have_posts() ):
    the_post();

    if( 0 == $wp_query->current_post ) {
        echo \'this is the first post\';
        // markup for first post
    } elseif( 1 == $wp_query->current_post ) {
        echo \'this is the second post\';
    } elseif( 2 == $wp_query->current_post ) {
        echo \'this is the third post\';
    } else {
        echo \'this is > third post\';
    }

endwhile;
如果通过创建新查询WP_Query, 除了引用使用自定义查询创建的查询对象外,您可以执行相同的操作:

$args = array(); // your custom query args
$custom_query = new WP_Query( $args );

while( $custom_query->have_posts() ):
    $custom_query->the_post();

    if( 0 == $custom_query->current_post ) {
        echo \'this is the first post\';
    }
    // etc..

endwhile;

结束