我目前正在使用同位素构建wordpress主题。js脚本，允许您通过过滤类别，在同一步骤上显示文章，我努力了很多，但仍然无法得到预期的结果：
这里有一个链接，可以引导您获得预期的结果（HTML/CSS的完整版本）：
https://vgamerz.fr/isotopehelp/gallery/blog.html
这里是我的wordpress主题（PHP文件）：
<!-- Isotope Header -->
<div class="row">
<div class="col-md-12">
<h2 class="isotope-button-title">Isotope Blog Sort By</h2>
<div id="isotope-filters" class="isotope-button-group">
<li><a href="#" data-filter="*" class="selected">Everything</a></li>
<?php
$terms = get_categories(); // 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 "<button class=\'button\'><a href=\'#\' data-filter=\'.".$term->slug."\'>" . $term->name . "</a></button>\\n";
//create a list item with the current term slug for sorting, and name for label
}
}
?>
</div>
</div>
</div>
<!-- Isotope Header -->
<!--------------------------------------- end of header -------------------------------------->
<!-- Isotope Grid -->
<div class="row isotope-grid">
<?php
// Loops
if(have_posts()):
while(have_posts()):
the_post(); ?>
<!-- Isotope Grid-Item -->
<div class="col-md-3 col-sm-4 col-xs-12 isotope-grid-item design " data-category="<?php get_the_category($post->ID); ?>">
<div class="isotope-item">
<a href="#"><div class="isotope-feature-image"><?php the_post_thumbnail() ?></div>
<h3 class="isotope-title"><a href="<?php the_permalink()?>"><?php the_title(); ?></a></h3>
<p class="isotope-number">Post No: <?php the_ID(); ?></p>
<p class="isotope-name">Author: <?php the_author() ?></p>
<p class="isotope-type">Blog Type: <?php the_category() ?></p>
<p class="isotope-datetime">Post Date: <?php the_date() ?> at <?php the_time() ?></p>
<p class="isotope-blog"><?php the_content(); ?></p>
</div>
</div>
<!-- Isotope Grid-Item -->
<?php
Endwhile;
Endif;
?>
</div>
<!-- End of Isotope Grid -->
<!-- Begin of Footer -->
</div>
</body>
</html>
<!-- End of Footer -->
JS文件（同位素.JS）：
"use strict";
(function ($){
$.fn.isotope_gallery = function(){
jQuery( function() {
var $container = jQuery(\'.isotope-grid\');
// use imagesLoaded, instead of window.load
$container.imagesLoaded( function() {
$container.isotope({
itemSelector: \'.isotope-item\',
// masonry is default layoutMode, no need to specify it
});
})
});
// init Isotope
var $grid = $(\'.isotope-grid\').isotope({
itemSelector: \'.isotope-grid-item\',
layoutMode: \'fitRows\',
isFitWidth: true,
getSortData: {
name: \'.isotope-name\',
title: \'.isotope-title\',
details: \'.isotope-details\',
symbol: \'.isotope-symbol\',
type: \'.isotope-type\',
number: \'.isotope-number\',
category: \'[data-category]\',
//you can add hear more sorting class like those
}
});
// filter functions
var filterFns = {
// show if number is greater than 50
numberGreaterThan50: function() {
var number = $(this).find(\'.number\').text();
return parseInt( number, 10 ) > 50;
},
// show if name ends with -ium
ium: function() {
var name = $(this).find(\'.name\').text();
return name.match( /ium$/ );
}
};
// bind filter button click
$(\'#isotope-filters\').on( \'click\', \'button\', function() {
var filterValue = $( this ).attr(\'data-filter\');
// use filterFn if matches value
filterValue = filterFns[ filterValue ] || filterValue;
$grid.isotope({ filter: filterValue });
});
// bind sort button click
$(\'#isotope-sorts\').on( \'click\', \'button\', function() {
var sortByValue = $(this).attr(\'data-sort-by\');
$grid.isotope({ sortBy: sortByValue });
});
// change is-checked class on buttons
$(\'.isotope-button-group\').each( function( i, buttonGroup ) {
var $buttonGroup = $( buttonGroup );
$buttonGroup.on( \'click\', \'button\', function() {
$buttonGroup.find(\'.is-checked\').removeClass(\'is-checked\');
$( this ).addClass(\'is-checked\');
});
});
// Select and loop the container element of the elements you want to equalise
$(\'.isotope-grid\').each(function(){
// Cache the highest
var highestBox = 0;
// Select and loop the elements you want to equalise
$(\'.isotope-grid-item\', this).each(function(){
// If this box is higher than the cached highest then store it
if($(this).height() > highestBox) {
highestBox = $(this).height();
}
});
// Set the height of all those children to whichever was highest
$(\'.isotope-grid-item\',this).height(highestBox);
});
}
$(this).isotope_gallery();
}(jQuery));
谢谢你的帮助！
