以不同的方式为最新帖子 WordPress 设置样式答案

【问题标题】：Style latest post WordPress differently以不同的方式为最新帖子 WordPress 设置样式
【发布时间】：2017-02-19 15:03:33
【问题描述】：

我当前的博客页面以“x”的 3 个网格显示我的所有博客文章。但是在顶部，我想将最新的博客文章显示为某种特色文章，因此它的样式有点不同（即全宽）。我尝试通过带有 :first-child 的 css 来完成它，但这并没有很好地工作。所以现在我正在尝试php方法。然而，我不知道如何解决这个问题。谁能告诉我从哪里开始？这是我当前的代码。

<section id="blogs" class="cards-list">
<div class="container cards">
    <div class="row center-xs">
        <?php 
            if(get_post_type() == 'post') {
                $currentBlog = get_the_ID();
            } else {
                $currentBlog = '';
            }
            $loopBlog = new WP_Query(array(
                'post_type'      => 'post',
                'posts_per_page' => -1,
                'post__not_in'   => array($currentBlog)
            ));
            while ( $loopBlog->have_posts() ) : $loopBlog->the_post();
                $blogIntro    = get_field('blog_intro');
                $blogImage    = get_field('blog_image');
                $blogImageUrl = $blogImage['sizes']['large'];
            ?>


                <div class="col col-xs-12 col-md-4">
                    <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" class="card card-event">
                        <figure style="<?php if($blogImageUrl != '') { echo "background-image:url('".$blogImageUrl."');"; } ?>"></figure>
                        <div class="content">
                            <span class="tag"><?php the_time('M d Y'); ?></span>
                            <div class="link"><h3><span><?php the_title(); ?></span></h3></div>
                        </div>
                    </a>
                </div>
        <?php
            endwhile; wp_reset_query();
        ?>
    </div>
</div>

【问题讨论】：

标签： php css wordpress post blogs

【解决方案1】：

您应该能够在循环内使用current_post 并为第一篇文章输出不同的标记：

while ( $loopBlog->have_posts() ) : $loopBlog->the_post();
  $blogIntro    = get_field('blog_intro');
  $blogImage    = get_field('blog_image');
  $blogImageUrl = $blogImage['sizes']['large'];
?>

<?php if ($loopBlog->current_post == 0): ?>
  <!-- Output some other markup for the first post here -->
  <div class="container-fluid">

  </div>
<?php else: ?>
<div class="col col-xs-12 col-md-4">
  <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" class="card card-event">
    <figure style="<?php if($blogImageUrl != '') { echo "background-image:url('".$blogImageUrl."');"; } ?>"></figure>
    <div class="content">
      <span class="tag"><?php the_time('M d Y'); ?></span>
      <div class="link"><h3><span><?php the_title(); ?></span></h3></div>
    </div>
  </a>
</div>
<?php endif; ?>
<?php endwhile; wp_reset_query(); ?>

【讨论】：

是的，谢谢！已经希望有这么简单的事情了。