Style neuesten Beitrag WordPress anders

Question

Meine aktuelle Blog-Seite zeigt alle meine Blog-Posts in einem Raster von 3 von 'x'. Oben möchte ich jedoch den neuesten Blog-Post als eine Art Featured Post anzeigen und ihn daher ein wenig anders gestalten (d. H. Volle Breite). Ich habe versucht, es mit CSS zu tun: Erstkind, aber das hat nicht wirklich gut funktioniert. So, jetzt versuche ich den PHP-Ansatz. Ich habe jedoch keine Ahnung, wie ich das angehen soll. Kann mir jemand zeigen, wo ich anfangen soll? Dies ist mein aktueller Code.

<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

Sie sollten current_post innerhalb der Schleife und Ausgabe verschiedener Markup für den ersten Beitrag nutzen können:

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