简体   繁体   中英

Add div after every 3 posts

Here's my current code:

<?php 
$mvp_posts_num = esc_html(get_option('mvp_posts_num')); 
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1; 
query_posts(array( 'posts_per_page' => $mvp_posts_num, 'paged' => $paged ));
if (have_posts()) : 
    while (have_posts()) : the_post(); 
?>
    <li class="infinite-post">
        This is where post summaries will be displayed.
    </li>
<?php 
    endwhile; 
endif; 
?>

This is basically repeating the class continuously down the page. However, after every 3, I want to add this:

<div class="post-info-name left relative"></div>

I know how to do this with foreach statements but this is for a WordPress theme and it looks like it's something a bit different that's needed.

I'm okay doing this with PHP or CSS, whatever is best.

Any help would be greatly appreciated.

This is fairly simple

<?php 
$mvp_posts_num = esc_html(get_option('mvp_posts_num')); 
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1; 
query_posts(array( 'posts_per_page' => $mvp_posts_num, 'paged' => $paged ));
if (have_posts()) : 
    $x = 0;
    while (have_posts()) : the_post(); 
?>
        <li class="infinite-post">
            This is where post summaries will be displayed.
        </li>

<?php 
        $x++;

        if ( $x == 3 ) :
            echo '<div class="post-info-name left relative"></div>';
            $x = 0;
        endif;    
    endwhile; 
endif; 
?>

You could try:

<?php 
$mvp_posts_num = esc_html(get_option('mvp_posts_num')); 
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1; 
query_posts(array( 'posts_per_page' => $mvp_posts_num, 'paged' => $paged ));
if (have_posts()) : 
    $loopCount  = 0;
    while (have_posts()) : the_post(); ?>
    <li class="infinite-post">
        This is where post summaries will be displayed.
    </li>
    <?php
        $loopCount++;
        if ( $loopcount > 2 ) :
            $loopcount = 0;
            echo '<div class="post-info-name left relative"></div>';
        endif;
    endwhile; 
    endif; 
?>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM