带 wordpress 过滤的同位素不起作用

Question

我查看了有关此主题的其他帖子，但没有找到问题的答案。我遵循本教程：https://www.aliciaramirez.com/2014/03/integrating-isotope-with-wordpress/

但是当我测试并点击过滤器时，没有任何反应...我 return 到我网站的顶部，仅此而已。不明白为什么我的 js :


jQuery(function ($) {

    var $container = $('#isotope-list'); //The ID for the list with all the blog posts
    $container.isotope({ //Isotope options, 'item' matches the class in the PHP
        itemSelector : '.item',
        layoutMode : 'fitRows'
    });

    //Add the class selected to the item that is clicked, and remove from the others
    var $optionSets = $('#filters'),
        $optionLinks = $optionSets.find('a');

    $optionLinks.click(function(){
        var $this = $(this);
        // don't proceed if already selected
        if ( $this.hasClass('selected') ) {
            return false;
        }
        var $optionSet = $this.parents('#filters');
        $optionSets.find('.selected').removeClass('selected');
        $this.addClass('selected');

        //When an item is clicked, sort the items.
        var selector = $(this).attr('data-filter');
        $container.isotope({ filter: selector });

        return false;
    });

});

还有我的 php :

<section>

            <ul id="filters">
                <li><a href="#" data-filter="*" class="selected">Everything</a></li>
                <?php
                    $terms = get_terms("category"); // 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>\n";
                            //create a list item with the current term slug for sorting, and name for label
                        }
                    }
                ?>
            </ul>
        <?php $the_query = new WP_Query( 'posts_per_page=6' ); //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();
                        global $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; ?> item"> <?php // 'item' is used as an identifier  ?>
                            <h3><?php the_title(); ?></h3>

                        </div> <!-- end item -->
                    <?php endwhile;  ?>
                </div> <!-- end isotope-list -->
            <?php endif; ?>
        </section>

非常感谢您的帮助

Answer 1

来自我提供给您的示例 - codepen。io/Igorxp5/pen/ojJLQE 这是单项过滤器，请记住这一点。

对于多术语过滤器，你可以检查这个 - https://codepen.io/TimRizzo/details/ervrRq

首先准备模板和查询

<section>
<ul class="filters">
    <?php 
        $terms = get_terms("category");
        if($terms):
            echo '<li><a href="javascript:void(0);" data-filter="*">All</a></li>';
            foreach ( $terms as $term ):
                echo '<li><a href="javascript:void(0);" data-filter="'.$term->slug.'">'.$term->name.'</a></li>';
            endforeach;
        endif;
    ?>
</ul>
<?php 
    $the_query = new WP_Query( 'posts_per_page=-1' ); // We need all posts
        if ( $the_query->have_posts() ) :
            echo '<div id="container" class="isotope">';
            while ( $the_query->have_posts() ) : $the_query->the_post();
                $terms = get_the_terms( get_the_ID(),'category');
                // Filter is working with single term so i am getting first from array or keep posts with single category/tag or w/e.
                echo '<div class="grid-item" data-filter="'.$terms[0]->slug.'">'.get_the_title().'</div>';
            endwhile; 
        endif; 
?>
</section>

在您的 js 文件中添加以下内容

jQuery(function ($) {
    $(document).ready( function() {

        var itemSelector = '.grid-item';  // Item class change if needed
    
        var $container = $('#container').isotope({ // change ID of container if needed
            itemSelector: itemSelector,
            masonry: {
              columnWidth: itemSelector,
              isFitWidth: true
            }
        });
        
        // Responsive pagination
        var responsiveIsotope = [
            [480, 2], // Bellow 480px wide 2 items per page
            [720, 4] //Below 720px wide 4 items per page
        ];
    
        var itemsPerPageDefault = 6; // Items per page unless responsiveIsotope . Over 720px wide 6 items per page
        var itemsPerPage = defineItemsPerPage();
        var currentNumberPages = 1;
        var currentPage = 1;
        var currentFilter = '*';
        var filterAtribute = 'data-filter'; //Used for the filter
        var pageAtribute = 'data-page'; // Used for the pagination
        var pagerClass = 'isotope-pager'; // Class of the pagination container
    
        function changeFilter(selector) {
            $container.isotope({
                filter: selector
            });
        }
    
        function goToPage(n) {
            currentPage = n;
    
            var selector = itemSelector;
                selector += ( currentFilter != '*' ) ? '['+filterAtribute+'="'+currentFilter+'"]' : '';
                selector += '['+pageAtribute+'="'+currentPage+'"]';
    
            changeFilter(selector);
        }
    
        function defineItemsPerPage() {
            var pages = itemsPerPageDefault;
    
            for( var i = 0; i < responsiveIsotope.length; i++ ) {
                if( $(window).width() <= responsiveIsotope[i][0] ) {
                    pages = responsiveIsotope[i][1];
                    break;
                }
            }
    
            return pages;
        }
        
        function setPagination() {
    
            var SettingsPagesOnItems = function(){
    
                var itemsLength = $container.children(itemSelector).length;
                
                var pages = Math.ceil(itemsLength / itemsPerPage);
                var item = 1;
                var page = 1;
                var selector = itemSelector;
                    selector += ( currentFilter != '*' ) ? '['+filterAtribute+'="'+currentFilter+'"]' : '';
                
                $container.children(selector).each(function(){
                    if( item > itemsPerPage ) {
                        page++;
                        item = 1;
                    }
                    $(this).attr(pageAtribute, page);
                    item++;
                });
    
                currentNumberPages = page;
    
            }();
    
            var CreatePagers = function() {
    
                var $isotopePager = ( $('.'+pagerClass).length == 0 ) ? $('<div class="'+pagerClass+'"></div>') : $('.'+pagerClass);
    
                $isotopePager.html('');
                
                for( var i = 0; i < currentNumberPages; i++ ) {
                    var $pager = $('<a href="javascript:void(0);" class="pager" '+pageAtribute+'="'+(i+1)+'"></a>');
                        $pager.html(i+1);
                        
                        $pager.click(function(){
                            var page = $(this).eq(0).attr(pageAtribute);
                            goToPage(page);
                        });
    
                    $pager.appendTo($isotopePager);
                }
    
                $container.after($isotopePager);
    
            }();
    
        }
    
        setPagination();
        goToPage(1);
    
        //When we click a filter grab value ,recalculate pagination, reset pagination
        $('.filters a').click(function(){
            var filter = $(this).attr(filterAtribute);
            currentFilter = filter;
    
            setPagination();
            goToPage(1);
        });
    
        // On resize triger responsive pagination
        $(window).resize(function(){
            itemsPerPage = defineItemsPerPage();
            setPagination();
            goToPage(1);
        });

    });      
});

带 wordpress 过滤的同位素不起作用

Isotope with wordpress filtering does not work

wordpress

jquery-isotope