Добавить индивидуальный класс для первых 3 постов - Wordpress

Question

На моей странице сообщений WordPress (index.php) я использую изотоп Metafizzy для отображения сообщений в моем блоге.

Я хотел бы добавить дополнительный класс к последним 3 элементам в массиве, чтобы я мог стилизовать их немного по-другому. Мой текущий код ниже, который используется для получения сообщений на index.php. Класс для каждого из трех должен быть разным, то есть «первый», «второй» и «третий».

<?php $args = array( 'post_type' => 'post', 'posts_per_page' => 30 ); ?>

<?php $the_query = new WP_Query( $args ); ?>

<?php if ( $the_query->have_posts() ) : ?>

<div class="grid">

<div class="grid-sizer"></div>
<div class="gutter-sizer"></div>


<?php while ( $the_query->have_posts() ) : $the_query->the_post(); 
$termsArray = get_the_terms( $post->ID, 'category' );  //Get the terms for this particular item
$termsString = ""; //initialize the string that will contain the terms
foreach ( $termsArray as $term ) { // for each term 
$termsString .= $term->slug.' '; //create a string that has all the slugs 
}
?>


<div class="<?php echo $termsString; ?>grid-item">
    <div class="grid-item-inner">
        <div class="gi-inner-img">
            <a href="<?php echo get_permalink( $post->ID ); ?>"><?php the_post_thumbnail( 'full' ); ?></a>
        </div>
        <div class="gi-inner-content">
            <a href="<?php echo get_permalink( $post->ID ); ?>"><?php the_title( '<h3>', '</h3>' ); ?></a>
            <p><?php the_excerpt(); ?></p>
            <span class="item-date"><?php the_date(); ?></span>
        </div>
    </div>
</div> 


<?php endwhile;  ?>

</div> <!-- end -list -->

<?php endif; ?>

Answer 1

Что тебе нужно? Просто добавить класс? Самый простой способ сделать это - увеличить цикл while;

как

  $i = 1;
    while(condition) :

   $i++;

 endwhile;

В вашем коде это будет похоже на

    <?php $args = array( 'post_type' => 'post', 'posts_per_page' => 30 ); ?>

    <?php $the_query = new WP_Query( $args ); ?>

    <?php if ( $the_query->have_posts() ) : ?>

    <div class="grid">

    <div class="grid-sizer"></div>
    <div class="gutter-sizer"></div>


    <?php 
$i = 1;
while ( $the_query->have_posts() ) : $the_query->the_post(); 
    $termsArray = get_the_terms( $post->ID, 'category' );  //Get the terms for this particular item
    $termsString = ""; //initialize the string that will contain the terms
    foreach ( $termsArray as $term ) { // for each term 
    $termsString .= $term->slug.' '; //create a string that has all the slugs 
    }
    ?>


    <div class="<?php echo $termsString; ?>grid-item <?php echo $i; ?>">
        <div class="grid-item-inner">
            <div class="gi-inner-img">
                <a href="<?php echo get_permalink( $post->ID ); ?>"><?php the_post_thumbnail( 'full' ); ?></a>
            </div>
            <div class="gi-inner-content">
                <a href="<?php echo get_permalink( $post->ID ); ?>"><?php the_title( '<h3>', '</h3>' ); ?></a>
                <p><?php the_excerpt(); ?></p>
                <span class="item-date"><?php the_date(); ?></span>
            </div>
        </div>
    </div> 


    <?php 
$i++;
endwhile;  ?>

    </div> <!-- end -list -->

    <?php endif; ?>

Теперь у вас будет класс типа "grid-item 1"

Answer 2

Посмотрите рабочий код.

        <?php 
        $flag=0;
        while ( $the_query->have_posts() ) : $the_query->the_post(); 
        $termsArray = get_the_terms( $post->ID, 'category' );  //Get the terms for this particular item
        $termsString = ""; //initialize the string that will contain the terms
        foreach ( $termsArray as $term ) { // for each term 
        $termsString .= $term->slug.' '; //create a string that has all the slugs 
        }

        // class logic
        $class='';
        if($flag==0) $class="first";
        elseif($flag==1) $class="second";
        elseif($flag==2) $class="third";

        ?>


        <div class="<?php echo $termsString; ?>grid-item <?php echo $class;?>">
            <div class="grid-item-inner">
                <div class="gi-inner-img">
                    <a href="<?php echo get_permalink( $post->ID ); ?>"><?php the_post_thumbnail( 'full' ); ?></a>
                </div>
                <div class="gi-inner-content">
                    <a href="<?php echo get_permalink( $post->ID ); ?>"><?php the_title( '<h3>', '</h3>' ); ?></a>
                    <p><?php the_excerpt(); ?></p>
                    <span class="item-date"><?php the_date(); ?></span>
                </div>
            </div>
        </div> 


        <?php 
        $flag++;
        endwhile;  ?>

Answer 3

Вы должны определить переменную, которая будет автоинкрементироваться каждый раз внутри цикла, поэтому возьмите $count = 1 выше в то время как цикл или используйте приведенный ниже код, который я уже сделал.

<?php if ( $the_query->have_posts() ) : ?>

<div class="grid">

<div class="grid-sizer"></div>
<div class="gutter-sizer"></div>


<?php $count = 1;
while ( $the_query->have_posts() ) : $the_query->the_post(); 
$termsArray = get_the_terms( $post->ID, 'category' );  //Get the terms for this particular item
$termsString = ""; //initialize the string that will contain the terms
foreach ( $termsArray as $term ) { // for each term 
$termsString .= $term->slug.' '; //create a string that has all the slugs 
}
?>


<div class="<?php echo $termsString; ?>grid-item <?php if($count == 1){ echo "first"; } elseif($count == 2){ echo "second"; }elseif($count == 3){ echo "third"; } ?>">
    <div class="grid-item-inner">
        <div class="gi-inner-img">
            <a href="<?php echo get_permalink( $post->ID ); ?>"><?php the_post_thumbnail( 'full' ); ?></a>
        </div>
        <div class="gi-inner-content">
            <a href="<?php echo get_permalink( $post->ID ); ?>"><?php the_title( '<h3>', '</h3>' ); ?></a>
            <p><?php the_excerpt(); ?></p>
            <span class="item-date"><?php the_date(); ?></span>
        </div>
    </div>
</div> 
<?php $count++;
endwhile;  ?>

</div> <!-- end -list -->

<?php endif; ?>