How do I add a class to every nth item in a php loop (wordpress)

前端 未结 2 820
予麋鹿
予麋鹿 2020-12-30 09:03

I have a Wordpress loop as follows:

 \'portfolio\' ) ); ?>
    have_po         


        
相关标签:
2条回答
  • 2020-12-30 09:48

    Why not add a counter and use the modulus approach to get to know in every column what element you are currently echoing.

    Lets say you have 4 columns as specified.
    You start with counter = 1
    1 % 4 = 1 ( you are in the first element )
    2 % 4 = 2 ( you are in the second element )
    3 % 4 = 3 ( you are in the third element )
    4 % 4 = 0 ( you are in the fourth element )
    5 % 4 = 1 ( you are in the first element )
    6 % 4 = 2 ( you are in the second element )

    And you just use an If statement with the class as following

    <?php $counter = 1 ?>
    <?php $loop = new WP_Query( array( 'post_type' => 'portfolio' ) ); ?>
        <?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
        <div class="four columns <?php if ($counter % 4 == 1){echo 'alpha'}else if ($counter % 4 == 0){echo 'omega'} ?>">
            <?php the_content(); //along with other stuff in looped div ?>
        </div>
    <?php $counter++ ; 
    endwhile ?>
    
    0 讨论(0)
  • 2020-12-30 10:05

    Implementation from the comments made:

    <?php $loop = new WP_Query( array( 'post_type' => 'portfolio' ) ); ?>
        <?php
            $i = 0;
            while ( $loop->have_posts() ) : $loop->the_post(); 
               if( $i % 4 == 0 )
                 $class = 'omega';
               else
                 $class = ''; 
            ?>
        <div class="four columns <?php echo $class ?>">
            <?php 
               the_content(); // Along with other stuff in looped div
               $i++;
            ?>
        </div>
    <?php endwhile ?>
    
    0 讨论(0)
提交回复
热议问题