風格的第一篇文章中WP_Query不同

Question

我有一個WP_Query循環，拉動4所最近發表的文章：

<?php 
    $featuredPosts = new WP_Query(); 
    $featuredPosts->query('showposts=4'); 
    while ($featuredPosts->have_posts()) : $featuredPosts->the_post(); ?> 
    <div class="recentpost"> 

    <?php echo get_the_post_thumbnail ($_post->ID, 'small'); ?> 

    <div class="titlerecent"> 
    <h1><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h1> 
    </div> 

    </div> 
    <?php endwhile; ?> 

我想要做的就是修改這個和風格的第一篇文章在不同的循環。我不只是想爲它添加一個CSS類，我想把它包裝在一個完全不同的<div>。

所以，我想第一個帖子被包裝在<div class="homefirstpost">，然後剩下的3個帖子如上所述，在<div class="recentpost">內。

我需要做什麼？

Answer 1

當您的帖子被包裹在另一個容器中時，您可以使用:first-child選擇器作爲第一篇文章。詳情請參閱Selectors。

當你的HTML看起來像這樣：

<div id="featuredPosts"> 
    <div>First Post ...</div> 
    <div>Next Post ...</div> 
    <div>Next Post ...</div> 
    <div>Next Post ...</div> 
</div> 

你可以沿着這些路線使用CSS：

div#featuredPosts > div:first-child { 
some special styles; 
} 

Answer 2

我會做這樣的：

<?php 
$isfirst = false; 

$featuredPosts = new WP_Query(); 
$featuredPosts->query('showposts=4'); 
while ($featuredPosts->have_posts()) : $featuredPosts->the_post(); ?> 

    <?php if (! $isfirst): ?> 
    <div class="homefirstpost"> 
     <?php $isfirst = true; ?> 
    <?php else: ?> 
    <div class="recentpost"> 
    <?php endif; ?> 

    <?php echo get_the_post_thumbnail ($_post->ID, 'small'); ?> 

    <div class="titlerecent"> 
    <h1><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h1> 
</div> 
<?php endwhile; ?>