风格前3篇文章不同于其他文章在WordPress

Question

我一直在四处寻找，找不到正确的解决方案。我想让博客上的前三篇文章与其他文章有不同的标记。

我正在使用Bootstrap，所以我想在前3个帖子中应用不同的div。

非常感谢任何帮助。

Answer 1

如果它在while(或foreach，无论你如何设置它)语句中，你可以使用标准迭代器，即

$i = 1;
if (have_posts()) : while (have_posts()) : the_post();
    if($i < 4){
        // First 3
    }else{
        // The rest
    }
$i++;
endwhile; endif;

Answer 2

如果你想简单地为它们设置不同的样式，我相信你正在寻找CSS :nth-child操作符

它允许您按顺序选择父元素的特定子元素。在您的情况下，请尝试以下操作:

.some-class:nth-child(-n+3) {
  background-color: red;
}

不幸的是，这在任何旧的微软Internet explorer (IE9以前的)中都不起作用

Answer 3

好了，这是我使用Nathan的解决方案的最后一个标记，以防将来它对像我这样的php挑战有帮助:

<?php if (have_posts()): $counter = 0; ?>
<?php while (have_posts()): the_post(); $counter++; ?>
    <?php if($counter <= 3): ?>
    <article class="col-md-4 main-post">
    <a href="#"><img src="http://placehold.it/310x220" />
    <h1><?php the_title(); ?></h1></a>
    <p>Some text</p>
    <p class="date">Date posted: <?php the_date(); ?>

    <?php else: ?>
    <div <?php post_class() ?> id="post-<?php the_ID(); ?>">
    <article class="col-md-4 sub-post">
            <a href="#"><img src="http://placehold.it/150x120" /></a>
    <h1><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1>
    </article>
    </div>
    <?php endif; ?>
<?php endwhile; ?>