我想初始化同位素https://isotope.metafizzy.co/ 在Wordpress中，我可以开始根据帖子的类别过滤帖子。我想我在<a href=\'#\' data-filter=\'.".$term->slug."\'>" . $term->name . "</a> 部分，因为当我单击类别时，它会给我一个/#，而不是过滤类别。我真的在尝试实现这种过滤效果：https://nmbw.com.au/works-and-projects/

我是新来的，所以任何帮助都将不胜感激。

以下是我所拥有的：

<?php
/**
 * Template Name: isotope
 *
 * Template for displaying a page without sidebar even if a sidebar widget is published.
 *
 * @package understrap
 */

get_header();
$container = get_theme_mod( \'understrap_container_type\' );
?>

<ul id="filters">
    <li><a href="#" data-filter="*">All categories</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=9\' ); //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, "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">
<h3><?php the_title(); ?></h3>
        <?php if ( has_post_thumbnail() ) {
                      the_post_thumbnail();
                } ?>
</div> <!-- end item -->
    <?php endwhile;  ?>
    </div> <!-- end isotope-list -->
<?php endif; ?>
<?php get_footer(); ?>

这就是我的功能。php文件

function add_isotope() {
wp_register_script( \'isotope\', get_template_directory_uri().\'/js/libs/isotope.pkgd.min.js\', array(\'jquery\'),  true );
wp_register_script( \'isotope-init\', get_template_directory_uri().\'/js/isotope.js\', array(\'jquery\', \'isotope\'),  true );
wp_register_script( \'isotope-custom\', get_template_directory_uri().\'/js/isotope-custom.js\', array(\'jquery\', \'isotope\'),  true );
wp_register_style( \'isotope-css\', get_stylesheet_directory_uri() . \'/css/isotope.css\' );

wp_enqueue_script(\'isotope-init\');
wp_enqueue_style(\'isotope-css\');
}

add_action( \'wp_enqueue_scripts\', \'add_isotope\' );  

这是我的同位素习惯。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 : \'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;
});

});

这是同位素。js文件\'jQuery（函数（$）{

 //set the container that isotope will be inside of in a var

 var container = document.querySelector(\'#isotope-list\');

 //create empty var isotope

 var Isotope;

 // initialize Isotope after all images have loaded
 var $container = $(\'#isotope-list\').imagesLoaded( function() {
 $container.isotope({
 // options
 });
 });




 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\',
 isOriginLeft: false
 });
 var container = document.querySelector(\'#isotope-list\');
 // init
 var iso = new Isotope( container, {
 // options
 itemSelector: \'.item\',

 });

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

  });

  jQuery( function($) {

  $(\'.isotope\').isotope({
  itemSelector: \'.item\',
  masonry: {
  columnWidth: 100
  }
  });

  });`

jQuery(function ($) {

var $container = $(\'#isotope-list\'); //The ID for the list with all the 
blog posts
var $isotope = $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(e){
e.preventDefault();
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\');
$isotope.isotope({ filter: selector });

return false;
});

});