Question

我在Wordpress网站上使用Isotope来过滤我的自定义帖子。我有一部CPT电影（production）和多个分类：type（动画/恐怖......），years（2012/2013）等等。

目前我可以按年份排序，并且在我的模板页面中使用此代码处理每件事情：

<div class="row">
    <ul id="filters">
        <li>Selectionner</li>
    <li><a href="#" data-filter="*" class="selected">Toutes les années</a></li>
        <?php 
            $terms = get_terms("annee"); // 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( array(
     'posts_per_page' => 16,
     'post_type' => array( 'production' )
)); //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, "annee" );  //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 three columns gallery grid"> <?php // 'item' is used as an identifier (see Setp 5, line 6) ?>

                   <figure class="effect-ming">
                         <?php the_post_thumbnail('miniature-film');  ?>
                        <figcaption>
                            <h2><?php the_title('') ?></h2>
                            <p class="serif"><?php the_field('realisation'); ?><p>
                        </figcaption>       

                    </figure>
            </div> <!-- end item -->
        <?php endwhile;  ?>
<?php else : ?>
<p>Aucun résultat ne correspond à votre recherche </p>
<a href="<?php bloginfo('url'); ?>/catalogue">Retour au catalogue</a>
</div> <!-- end isotope-list -->
<?php endif; ?>                 
</div>

以下javascript：

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 : 'masonry'
    });

    //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;
    });

});

(function( $ ) {
    $( function() {

        var $container = $('.isotope').isotope({
            itemSelector: '.element-item',
            layoutMode: 'fitRows'
        });

        $('#filters').on( 'click', 'button', function() {
            var filterValue = $( this ).attr('data-filter');
            $container.isotope({ filter: filterValue });
        });

    });
})(jQuery);

但我想制作多年的多个过滤器并同时使用它们，但我不知道该怎么做。

我曾试图复制我用于years的代码，并将slug更改为"type"，但它没有用。

以下是一个示例，向您展示我想要做的事情：http://codepen.io/desandro/pen/GFbAs

它是用同位素制作的，不是用Wordpress功能制作的，所以我不知道如何改变它。

Answer 1

首先，在链接中添加新的自定义数据参数，例如data-filter-two=""

然后添加一个额外的jQuery单击函数来处理该过滤 -

$('#filters').on( 'click', 'button', function() {
    var filterValue = $( this ).attr('data-filter-two');
    $container.isotope({ filter: filterValue });
});

组合过滤器同位素Wordpress

1 个答案: