通过 wordpress 标签过滤 Istope 列表

Question

所以我使用自定义帖子类型和同位素来创建可过滤的图像/链接网格，它们实际上是类别。

我希望为过滤菜单使用标签。这是标签/过滤器菜单的代码：

<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 隐藏重复项，但我宁愿正确，这让我很烦。

Answer 1

我使用 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');
        });
    });

Answer 2

经过多次反复试验，我找到了解决方案。

关键是不要使用 wordpress 循环，而是通过 ID 获取帖子。

这是基于另一个 stackexhange 答案，位于此处：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; ?>