所以我使用自定义帖子类型和同位素来创建可过滤的图像/链接网格，这些图像/链接实际上是类别。
我希望为过滤菜单使用标签。 以下是标签/过滤器菜单的代码：
<ul id="filters" class='themes-filter'>
<li class='filter-menu'><a href="#" data-filter="*" class="selected">Show All</a></li>
<?php query_posts('category_name=themes-page'); if (have_posts()) : while (have_posts()) : the_post();
$terms = get_the_terms( $post->ID, "post_tag" );
foreach ( $terms as $term ) { //for each term:
echo "<li class='filter-menu'><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
}
endwhile; endif;
wp_reset_query();
?>
以及实际网格的代码：
<?php $the_query = new WP_Query( array( 'post_type' => 'netsuke', 'orderby' => 'title', 'order' => 'DESC', 'category_name' => 'themes-page', 'posts_per_page' => '3') );
//Check the WP_Query docs to see how you can limit which posts to display
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, "post_tag" ); //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 col-sm-4">
<a href="<?php the_permalink(); ?>" ><?php // 'item' is used as an identifier (see Setp 5, line 6) ?>
<h3 class="item-title"><?php the_title(); ?></h3>
<?php if ( has_post_thumbnail() ) {
the_post_thumbnail();
} ?>
</a>
</div> <!-- end item -->
<?php endwhile; ?>
</div> <!-- end isotope-list -->
问题是我一直看到重复的标签，这确实破坏了对象。这个想法是这些项目可以共享标签，因此可以相应地过滤。
我已经尝试过array_unique但它破坏了模板(不清楚为什么(
可以使用JQuery隐藏重复项，但我宁愿正确处理，这让我很烦恼。
我在分类法上构建了一个类似的脚本，其中包含CPT和ISTOPE过滤器。
<div class="pageContent">
<?php
$query = $GLOBALS['wp_query'];
if(!empty($query->posts)){
?>
<div class="wrapper realisation-container">
<?php
$terms = get_terms( 'typerealisation', array(
'hide_empty' => false,
) );
if(!empty($terms)){
?>
<div class="button-group filters-button-group">
<button class="button is-checked" data-filter="*"><?php _e( 'All', 'domain' ); ?></button>
<?php
foreach ($terms as $key => $term) {
?>
<button class="button" data-filter=".<?php echo $term->slug; ?>"><?php echo $term->name; ?></button>
<?php
}
?>
</div>
<?php
}
?>
<div class="realisations grid">
<div class="grid-sizer"></div>
<div class="gutter-sizer"></div>
<?php
foreach ($query->posts as $key => $value) {
$terms = wp_get_post_terms( $value->ID, 'typerealisation' );
$classes = '';
foreach( $terms as $term ) {
$classes .= $term->slug.' ';
}
?>
<div class="realisation element-item <?php echo $classes; ?>">
<?php echo get_the_post_thumbnail($value->ID, null, array( 'class' => 'realisation-thumb' )); ?>
<div class="realisation-content">
<div class="realisation-title">
<?php echo $value->post_title; ?>
</div>
<div class="realisation-category">
<?php echo get_the_term_list( $value->ID, 'typerealisation', '#', ' #' ); ?>
</div>
<a href="<?php echo get_permalink($value->ID); ?>" class="realisation-bouton">
<span class="icon icon-right-open-big"></span>
</a>
</div>
</div>
}
?>
</div>
</div>
<?php
}
?>
</div>
和 JS
// init Isotope
var $grid = $('.grid').isotope({
itemSelector: '.element-item',
masonry: {
// use outer width of grid-sizer for columnWidth
columnWidth: '.grid-sizer',
gutter: '.gutter-sizer',
}
});
// bind filter button click
$('.filters-button-group').on('click', 'button', function() {
var filterValue = $(this).attr('data-filter');
$grid.isotope({
filter: filterValue
});
});
// change is-checked class on buttons
$('.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');
});
});
经过大量的试验和错误，我找到了解决方案。
关键是不要使用wordpress循环，而是通过ID获取帖子。
这是基于另一个堆栈答案，位于此处：https://wordpress.stackexchange.com/questions/184560/creating-a-unique-linked-list-of-tags-from-a-specific-category
<ul id="filters" class='themes-filter'>
<li class='filter-menu'><a href="#" data-filter="*" class="selected">Show All</a></li>
<?php $post_ids = get_posts(
array(
'posts_per_page' => -1,
'category_name' => 'themes-page',
'post_type' => 'netsuke',
'fields' => 'ids', // Just get the ID's, save a hella lotta memory
)
);
// Get and cache all post tags
update_object_term_cache( $post_ids, 'netsuke' );
// Build a unique index of tags for these posts
$tags = array();
foreach ( $post_ids as $post_id ) {
if ( $post_tags = get_object_term_cache( $post_id, 'post_tag' ) ) {
foreach ( $post_tags as $tag )
$tags[ $tag->term_id ] = $tag;
}
}
// Show them, with slug and name
foreach ( $tags as $tag ) {
// echo '<a href="' . get_term_link( $tag ) . '">' . $tag->name . '</a> ';
echo "<li class='filter-menu'><a href='#' data-filter='.".$tag->slug."'>" . $tag->name . "</a></li>n";
}
?>
</ul>
和网格：
<?php $the_query = new WP_Query( array( 'post_type' => 'netsuke', 'orderby' => 'title', 'order' => 'DESC', 'category_name' => 'themes-page', 'posts_per_page' => '3') );
//Check the WP_Query docs to see how you can limit which posts to display
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, "post_tag" ); //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 col-sm-4">
<a href="<?php the_permalink(); ?>" ><?php // 'item' is used as an identifier (see Setp 5, line 6) ?>
<h3 class="item-title"><?php the_title(); ?></h3>
<?php if ( has_post_thumbnail() ) {
the_post_thumbnail();
} ?>
</a>
</div> <!-- end item -->
<?php endwhile; ?>
</div> <!-- end isotope-list -->
<?php endif; ?>