如何解决WordPress同位素集成-自定义帖子类型过滤器
我正在尝试将同位素与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>
谢谢。
解决方法
弄清楚了。错过了数据过滤器属性的串联类点...
更改了这一行:
echo '<button id="category-filter" data-filter="'.$term->slug.'">'.$term->name.'</button>';
对此:
echo '<button id="category-filter" data-filter="' . '.' .$term->slug.'">'.$term->name.'</button>';
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。