Question

我当前的博客页面以“x”为单位显示3个网格中的所有博文。然而，在顶部我想显示最新的博客文章作为某种特色帖子，因此风格有点不同（即全宽）。我尝试通过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>

Answer 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(); ?>

样式最新发布WordPress不同

1 个答案: