WordPress 同位素集成 - 自定义帖子类型过滤器

Question

我正在尝试将 Isotope 与 WordPress 集成以创建可过滤的投资组合网格。它显示项目类别（我的自定义帖子类型和分类），但在单击按钮时不显示该类别的帖子。

有什么想法吗？

jQuery(document).ready(function($){
$(function () {
    $('[data-toggle="tooltip"]').tooltip()
})
// init Isotope
var $grid = $('.grid').isotope({
    // options
    itemSelector: '.grid-item',
    layoutMode: 'fitRows'
    });
    // filter items on button click
    $('.filter-button-group').on( 'click', 'button', function() {
    var filterValue = $(this).attr('data-filter');
    $grid.isotope({ filter: filterValue });
    });
});

<section id="projects" class="container-fluid">
  <div class="col">
    <div class="button-group filter-button-group text-center">
      <button data-filter="*">All</button>
      <?php $terms = get_terms( array(
        'taxonomy' => 'project_categories',
        'hide_empty' => true,
    ));
    foreach ($terms as $term) {
        echo '<button id="category-filter" data-filter="'.$term->slug.'">'.$term->name.'</button>';
    }
    ?>
    </div>
    <div class="grid row">
      <?php $projects = new Wp_Query(['post_type'=>'projects']);
            if ($projects->have_posts()) : while ($projects->have_posts()) : $projects->the_post();
        ?>

      <a class="<?php $terms = wp_get_post_terms(get_the_id(), 'project_categories');
        foreach ($terms as $term) {
            echo $term->slug;
        }?> grid-item col-md-4 col-sm-6 col-xs-12" href="<?php the_permalink();?>">
        <div class="card">
          <div class="overlay">
            <?php the_post_thumbnail( 'full', array( 'class'=>'card-img img-fluid' ) ); ?>
            <div class="mask">
              <h4 class="text-center">
                <?php the_title(); ?>
              </h4>
            </div>
          </div>
        </div>
      </a>
      <?php endwhile; endif; ?>
    </div>
  </div>
</section>

提前致谢。

Answer 1

想通了。错过了 data-filter 属性的串联类点...

更改了这一行：

echo '<button id="category-filter" data-filter="'.$term->slug.'">'.$term->name.'</button>';

到这里：

echo '<button id="category-filter" data-filter="' . '.' .$term->slug.'">'.$term->name.'</button>';