php - 以不同的方式为 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

我会这样做：

<?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; ?>

Answer 2

当您的帖子被包装在另一个容器中时，您可以将:first-child选择器用于第一个帖子。有关详细信息，请参阅选择器。

当您的 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;
}