[英]Combination filters Isotope Wordpress
我在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
使用的代碼,並按"type"
更改該段代碼,但是沒有用。
這是一個示例,向您顯示我想做什么: http : //codepen.io/desandro/pen/GFbAs
它是由同位素制成的,而不是由Wordpress函數制成的,因此我不知道如何更改它。
首先,將新的自定義數據參數添加到您的鏈接中,例如data-filter-two=""
然后添加一個額外的jQuery click函數來處理該過濾-
$('#filters').on( 'click', 'button', function() {
var filterValue = $( this ).attr('data-filter-two');
$container.isotope({ filter: filterValue });
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.