Wordpress: стиль первого сообщения отличается от остальных

Question

Я искал вокруг и не могу найти правильное решение. Моя цель - отличить первый пост от остальных. Я имею их в сетке 3 * 3, и я хочу, чтобы первый пост был полным.

Следующий фрагмент кода генерирует цикл в index.php.

<ul class="list_post"> 

      <?php $i = 1; ?> 
      <?php if (have_posts()) : while (have_posts()) : the_post(); ?>      

       <?php get_template_part('content','grid'); ?>           
       <?php if ($i%3 == 0) : ?> 
        <div class="clearfix"></div> 
       <?php endif; $i++; ?> 

      <?php endwhile; wp_reset_query(); endif; ?> 

</ul> 

Визуализированное HTML-выход:

<ul class="list_post"> 
 
    <li> 
 
    <article id="post-7375" class="post_grid post-7375 post type-post status-publish format-video has-post-thumbnail hentry post_format-post-format-video"> 
 
     <div class="post-img"></div> 
 
     <div class="post-header"></div> 
 
     <div class="post-entry"></div> 
 
    </article> 
 
    </li> 
 
    <li>(..)</li> 
 
    <li>(..)</li> 
 
</ul>

Я не знаю, как это можно сделать?

Answer 1

На content-grid.php изменить первые несколько строк, чтобы отразить следующее:

global $i; 

<article id="post-<?php the_ID(); ?>" <?php post_class('article-num-' . $i); ?>> 

Затем в CSS, вы можете сделать:

.article-num-1{ 
.. 
}