Как присвоить стиль к первой строке записей Bootstrap?

Question

[Bearax]

Добрый вечер. Есть сетка записей на странице (Custom Post Type). Нужно выделить фон для первой строки записей. Скрин примера и код вставлю ниже.

<?php $query = new WP_Query([
    'meta_query' => [
        'relation' => 'OR',
        ['key' => '_glsr_ranking', 'compare' => 'NOT EXISTS'], // this comes first!
        ['key' => '_glsr_ranking', 'compare' => 'EXISTS'],
    ],
    'order' => 'DESC',
    'orderby' => 'meta_value_num',
    'post_status' => 'publish',
    'post_type' => 'website', // change this as needed
    'posts_per_page' => -1, // change this as needed
]);
 
if( $query->have_posts() ) {
    while( $query->have_posts() ) {
        $query->the_post(); ?>
      <div class="col-lg-4 col-md-6 col-sm-12 layout-">

<article <?php post_class('fxcatalog-post fxcatalog-post-a fxcatalog-box '. fxcatalog_highlight_post_class() ); ?>>

    <?php if( $fimg = fxcatalog_get_featured_image( 'a'. $post_col ) ) : ?>
        <div class="entry-image">
            <a href="<?php echo esc_url( get_permalink() ); ?>" title="<?php echo esc_attr( get_the_title() ); ?>"><?php echo fxcatalog_wp_kses( $fimg ); ?></a>
            <div class="entry-category">
                <?php if( $icon = fxcatalog_get_option('lay_a_icon') ): ?>
                    <?php echo fxcatalog_get_format_icon(); ?>
                <?php endif; ?>

                <?php if( fxcatalog_get_option('lay_a_cat') ) : ?>
                    <?php echo fxcatalog_get_category(); ?>
                <?php endif; ?>
            </div>
        </div>
    <?php endif; ?>


    <div class="box-inner-p">
        <div class="box-inner-ellipsis hidekant">
            
            
            
        </div>
        <div class="short_description"><?php the_field('short_description'); ?></div>
		<?php if ( get_field('active_link') == true ) { ?>

			<a class="website_urla" href="https://<?php the_field('website_url'); ?>"><?php the_field('website_url'); ?></a>

			<?php } else { ?>

<a class="website_urla"><?php the_field('website_url'); ?></a>

<?php } ?>

     


 
     
		
            <div class="entry-meta"><span class="rattext">Rating
              <?php echo do_shortcode('[site_reviews_summary assigned_posts="post_id" hide="bars,rating,summary"]'); ?></span>
              <a class="linktopost" target="_blank" href="<?php echo get_permalink(); ?>">
                <div class="readmorepost">Read more</div></a>
              <a href="<?php echo esc_url( get_permalink() ); ?>#comments">
                <div class="custommeta meta-item homepagecommentscount">
                  <div class="singleotzivi"><i style="line-height: 1.7;" class="far fa-comment-alt"></i>&nbsp;
                    <?php echo do_shortcode('[site_reviews_summary assigned_posts="post_id" hide="bars,if_empty,rating,stars"]'); ?></div>
       
   

</article>

</div>

Answer 1

[Юрий Горбунов]

Можете добавить простой счетчик в цикл
Добавил переменную $i, которая увеличивается на 1 при прохождении каждого цикла
По условию if($i == 1) выводите нужный вам стиль выделения для первого поста в списке.

<?php $query = new WP_Query([
    'meta_query' => [
        'relation' => 'OR',
        ['key' => '_glsr_ranking', 'compare' => 'NOT EXISTS'], // this comes first!
        ['key' => '_glsr_ranking', 'compare' => 'EXISTS'],
    ],
    'order' => 'DESC',
    'orderby' => 'meta_value_num',
    'post_status' => 'publish',
    'post_type' => 'website', // change this as needed
    'posts_per_page' => -1, // change this as needed
]);

$i = 0; // Перед циклом установить переменную
if( $query->have_posts() ) {
    while( $query->have_posts() ) {
        $query->the_post(); 
        $i++; // Внутри цикла увеличивать счетчик на 1
        ?>
   <div class="col-lg-4 col-md-6 col-sm-12 layout-  <?php if($i == 1) { ?>selected<?}?>">

       <article
           <?php post_class('fxcatalog-post fxcatalog-post-a fxcatalog-box '. fxcatalog_highlight_post_class() ); ?>>

           <?php if( $fimg = fxcatalog_get_featured_image( 'a'. $post_col ) ) : ?>
           <div class="entry-image">
               <a href="<?php echo esc_url( get_permalink() ); ?>"
                   title="<?php echo esc_attr( get_the_title() ); ?>"><?php echo fxcatalog_wp_kses( $fimg ); ?></a>
               <div class="entry-category">
                   <?php if( $icon = fxcatalog_get_option('lay_a_icon') ): ?>
                   <?php echo fxcatalog_get_format_icon(); ?>
                   <?php endif; ?>

                   <?php if( fxcatalog_get_option('lay_a_cat') ) : ?>
                   <?php echo fxcatalog_get_category(); ?>
                   <?php endif; ?>
               </div>
           </div>
           <?php endif; ?>


           <div class="box-inner-p">
               <div class="box-inner-ellipsis hidekant">



               </div>
               <div class="short_description"><?php the_field('short_description'); ?></div>
               <?php if ( get_field('active_link') == true ) { ?>

               <a class="website_urla"
                   href="https://<?php the_field('website_url'); ?>"><?php the_field('website_url'); ?></a>

               <?php } else { ?>

               <a class="website_urla"><?php the_field('website_url'); ?></a>

               <?php } ?>

               <div class="entry-meta"><span class="rattext">Rating
                       <?php echo do_shortcode('[site_reviews_summary assigned_posts="post_id" hide="bars,rating,summary"]'); ?></span>
                   <a class="linktopost" target="_blank" href="<?php echo get_permalink(); ?>">
                       <div class="readmorepost">Read more</div>
                   </a>
                   <a href="<?php echo esc_url( get_permalink() ); ?>#comments">
                       <div class="custommeta meta-item homepagecommentscount">
                           <div class="singleotzivi"><i style="line-height: 1.7;" class="far fa-comment-alt"></i>&nbsp;
                               <?php echo do_shortcode('[site_reviews_summary assigned_posts="post_id" hide="bars,if_empty,rating,stars"]'); ?>
                           </div>
       </article>

   </div>