风格最新 post WordPress 不同

Question

我当前的博客页面以 'x' 的 3 个网格显示我的所有博客 post。然而，在顶部，我想将最新的博客 post 显示为某种特色 post，从而使它的样式有点不同（即全宽）。我尝试通过 css 和 :first-child 来完成它，但效果并不好。所以现在我正在尝试 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>

Answer 1

您应该能够在循环内使用 current_post 并为第一个 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(); ?>

风格最新 post WordPress 不同

Style latest post WordPress differently

css

php

wordpress

post

blogs