スタイル最新の投稿ワードプレスの別様に

Question

私の現在のブログページには、3のグリッドにあるすべてのブログ投稿が「x」で表示されます。しかし、一番上では最新のブログ投稿を特集記事の一種として表示して、少し違うスタイル（つまり全幅）にしたいと思っています。私はCSSを使ってそれをやってみました：最初の子が、それは本当にうまくいきませんでした。だから私はPHPのアプローチをしようとしている。しかし、私はこれにどのように接近するのか手がかりがありません。誰でもどこから始めたらいいの？これは私の現在のコードです。あなたが最初のポストのためのループと出力異なるマークアップ内current_postを使用することができるはず

<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

：

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