将isotope.js与Wordpress循环集成

Question

I've been trying to get isotope.js working on a Wordpress site. I've been following this tutorial https://www.aliciaramirez.com/2014/03/integrating-isotope-with-wordpress/ and have been able to get it all functioning. For my design, I'm trying to add <div class="grid-sizer"></div> every four posts that are called. I've been referring to this question: Wrap every 4 posts in a custom wordpress loop with a div but cannot seem to figure out the proper placement for the count and i statements. Can anyone help me figure this out? Here's my loop right now:

<?php 
                 $terms = get_terms( array(
                     'taxonomy' => 'solutions',
                     'parent' => 0
                    )
                 ); // get all categories, but you can use any taxonomy
                 $count = count($terms); //How many are they?
                 if ( $count > 0 ){  //If there are more than 0 terms
                 foreach ( $terms as $term ) {  //for each term:
                 echo "<li><a href='#' data-filter='.".$term->slug."'>" . $term->name . "</a></li>
";
                 //create a list item with the current term slug for sorting, and name for label
                 }
                 } 
            ?>
        </ul>
        <?php 
        $args = array(
            'post_type' => 'product',
            'posts_per_page' => -1,
            'orderby' => 'title',
            'order' => asc,
            'tax_query' => array(
                array(
                    'taxonomy' => 'solutions',
                    'field' => 'term_id',
                    'terms' => get_queried_object()->term_id,
                ),
            ) );
        $the_query = new WP_Query( $args ); //Check the WP_Query docs to see how you can limit which posts to display ?>
        <?php if ( $the_query->have_posts() ) : ?>
        <div id="isotope-list">
            <?php 

             while ( $the_query->have_posts() ) : $the_query->the_post(); 
             $termsArray = get_the_terms( $post->ID, "solutions" );  //Get the terms for this particular item
             $termsString = ""; //initialize the string that will contain the terms
            $i = 0;
             foreach ( $termsArray as $term ) { // for each term 
             $termsString .= $term->slug.' '; //create a string that has all the slugs                   
             }
                if($i%4 == 0) {
                    echo "<div class='grid-sizer'> </div>"; 
                }
            ?>
            <div class="<?php echo $termsString; ?>item">
                <p class="product-image"><a href="<?php the_permalink(); ?>" ><img src="<?php the_field("product_image") ?>" alt="<?php the_title(); ?>" class="solution-image" /></a></p>
                <h4 class="product-name">
                    <?php the_title(); ?>
                </h4>
            </div>
            <?php $i++; ?>
            <!-- end item -->
            <?php endwhile;  ?>
        </div>
        <!-- end isotope-list -->
        <?php endif; ?>

Answer 1

Here's the resulting code - thanks for misorude's help!

<?php 
             $terms = get_terms( array(
                 'taxonomy' => 'solutions',
                 'parent' => 0
                )
             ); // get all categories, but you can use any taxonomy
             $count = count($terms); //How many are they?
             if ( $count > 0 ){  //If there are more than 0 terms
             foreach ( $terms as $term ) {  //for each term:
             echo "<li><a href='#' data-filter='.".$term->slug."'>" . $term->name . "</a></li>
";
             //create a list item with the current term slug for sorting, and name for label
             }
             } 
        ?>
    </ul>
    <?php 
    $i = 0;
    $args = array(
        'post_type' => 'product',
        'posts_per_page' => -1,
        'orderby' => 'title',
        'order' => asc,
        'tax_query' => array(
            array(
                'taxonomy' => 'solutions',
                'field' => 'term_id',
                'terms' => get_queried_object()->term_id,
            ),
        ) );
    $the_query = new WP_Query( $args ); //Check the WP_Query docs to see how you can limit which posts to display ?>
    <?php if ( $the_query->have_posts() ) : ?>
    <div id="isotope-list">
        <?php 

         while ( $the_query->have_posts() ) : $the_query->the_post(); 
         $termsArray = get_the_terms( $post->ID, "solutions" );  //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                   
         }
            if($i%4 == 0) {
                echo "<div class='grid-sizer'> </div>"; 
            }
        ?>
        <div class="<?php echo $termsString; ?>item">
            <p class="product-image"><a href="<?php the_permalink(); ?>" ><img src="<?php the_field("product_image") ?>" alt="<?php the_title(); ?>" class="solution-image" /></a></p>
            <h4 class="product-name">
                <?php the_title(); ?>
            </h4>
        </div>
        <?php $i++; ?>
        <!-- end item -->
        <?php endwhile;  ?>
    </div>
    <!-- end isotope-list -->
    <?php endif; ?>