风格最新的帖子WordPress的不同

我目前的博客页面显示所有我的博客帖子在3由'x'的网格。然而，在顶部，我想将最新的博客帖子显示为某种特色帖子，因此其风格略有不同（即全宽）。我试着通过CSS来做到这一点：第一个孩子，但那并不是很好。所以现在我正在尝试php方法。然而，我不知道如何解决这个问题。任何人都可以告诉我从哪里开始？这是我现在的代码。风格最新的帖子WordPress的不同

<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>

来源

2017-02-19 Alesis

您应该能够使用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(); ?>

来源

2017-02-19 15:16:54 Cyclonecode

烨作品的感谢！已经希望会有这样简单的事情。 – Alesis

风格最新的帖子WordPress的不同

回答

相关问题