如何在无限循环中定位第5和第9个元素？

Question

I working on a WP blog integration into Magento. I have a custom blog post page with infinite loop. I have infinite number of rows, in each row there is 3 posts. I want to replace 5th's and 9th's post place with highlight featured product from the Magento catalogue item.

This is the mockup which I want to implement. Currently it's displaying infinite loop of posts.

Here is basic loop: Can anyone suggest what is the better practice to target 5th and 9th element and suggest how to improve the loop.

Additionally, if someone know how I can display Magento's product item in that place, it would be amazing.

<div class="loop">
    <?php while ( have_posts() ) : the_post(); ?>
        <?php get_template_part( 'content', $post->post_type ); ?>
    <?php endwhile; ?>

    <?php skeleton_content_nav( 'nav-below' ); ?>
</div><!-- .loop -->

Thank you in advance!

Answer 1

Do like this

<div class="loop">
<?php 
    $i=1;
    while ( have_posts() ) : the_post(); 

        if($i==5){

            // ITEM 1 : Highlight featured product from the Magento catalogue item.
               echo '<div> Your Custom 5 th Element</div>';  
           // Or 
           //if you have created function for it then call it here 
            featureProduct($i);



        }else if( $i==9){

            // ITEM 2 : Highlight featured product from the Magento catalogue item. 
                                echo '<div> Your Custom 9 th Element</div>';
             // Or 
           //if you have created function for it then call it here 
            featureProduct($i); 

        }else{
            // Post 
            get_template_part( 'content', $post->post_type ); 
        }

        // Reset $i variable
        if($i==9){ $i=0;    }

        $i++; 
     endwhile;

    <?php skeleton_content_nav( 'nav-below' ); ?>
</div><!-- .loop -->