组合过滤器同位素Wordpress

Question

我在我的Wordpress网站上使用同位素来过滤我的自定义帖子。我有一个CPT电影（production）和多个分类标准：type（Animation/Horror ...），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

它ISS与同位素制成，不与WordPress的功能，所以我不知道如何去改变它。

Answer 1

首先，一个新的自定义数据参数添加到您的链接，如data-filter-two=""

然后添加一个额外的jQuery单击功能来处理过滤 -

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