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 operator

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

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

不幸的是，这不适用于任何旧的Microsoft Internet Explorers（早于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; ?>

样式前3个帖子与WordPress中的其他帖子不同？

3 个答案: