您可能需要使用此功能：

将此放在您的函数中。php

function isotope_categories() {

        $categories = get_categories();

        $html = \'<ul class="filters option-set" data-option-key="filter">\';
        $html .= \'<li><a href="#filter" data-option-value="*" class="selected">All items</a></li>\';

        foreach ($categories as $category) {

            $html .= "<li><a href=\'#filter\' data-option-value=\'.category-{$category->category_nicename}\'>{$category->cat_name}</a></li>";   
        }

        $html .= \'</ul>\';

        echo $html;
    }

例如：

<nav class="options">                       
    <?php isotope_categories() ?>
</nav>  

因此，如果您在Wordpress的后端创建新帖子并将类别链接到它们，它们将显示出来并可过滤

当我偶然发现这个主题时，我也一直在尝试将jQuery同位素插件与WP集成。如果你仍然需要帮助，下面是它的工作原理。我的方法有点不同，因为我创建了一个自定义的post类型的项目，我想通过projects\\u类别进行筛选，这是一种自定义的分类法。

页面模板需要以下php才能生成#项目筛选器列表和#项目div。

<?php
$terms = get_terms(\'project_categories\');
$count = count($terms);
if ( $count > 0 ){
echo \'<ul id="projects-filter">\';
echo \'<li><a href="#" data-filter="*">All</a></li>\';
foreach ( $terms as $term ) {
    $termname = strtolower($term->name);  
    $termname = str_replace(\' \', \'-\', $termname);  
    echo \'<li><a href="#" data-filter="\' . \'.\' . $termname . \'">\' . $term->name . \'</a></li>\';
}
echo \'</ul>\';
}
?>

<?php 
    $loop = new WP_Query(array(\'post_type\' => \'projects\', \'posts_per_page\' => -1));
    $count =0;
?>

<div id="project-wrapper">
    <div id="projects">

    <?php if ( $loop ) : 

        while ( $loop->have_posts() ) : $loop->the_post(); ?>

            <?php
            $terms = get_the_terms( $post->ID, \'project_categories\' );

            if ( $terms && ! is_wp_error( $terms ) ) : 
                $links = array();

                foreach ( $terms as $term ) 
                {
                    $links[] = $term->name;
                }
                $links = str_replace(\' \', \'-\', $links); 
                $tax = join( " ", $links );     
            else :  
                $tax = \'\';  
            endif;
            ?>

            <?php $infos = get_post_custom_values(\'wpcf-proj_url\'); ?>

            <div class="project-item <?php echo strtolower($tax); ?>">
                <div class="thumb"><a href="<?php the_permalink() ?>"><?php the_post_thumbnail( \'projects-thumb\' ); ?></a></div>
                <h3><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>
                <p class="excerpt"><a href="<?php the_permalink() ?>"><?php echo get_the_excerpt(); ?></a></p>
                <p class="links"><a href="<?php echo $infos[0]; ?>" target="_blank">Live Preview →</a> <a href="<?php the_permalink() ?>">More Details →</a></p>
            </div>

        <?php endwhile; else: ?>

        <div class="error-not-found">Sorry, no portfolio entries for while.</div>

    <?php endif; ?>


    </div>

    <div class="clearboth"></div>

</div> <!-- end #project-wrapper-->

jQuery(document).ready(function(){
    var mycontainer = jQuery(\'#projects\');
    mycontainer.isotope({ 
        filter: \'*\',
        animationOptions: {
            duration: 750,
            easing: \'liniar\',
            queue: false,
        }
    }); 

    jQuery(\'#projects-filter a\').click(function(){ 
        var selector = jQuery(this).attr(\'data-filter\'); 
        mycontainer.isotope({ 
            filter: selector,
            animationOptions: {
                duration: 750,
                easing: \'liniar\',
                queue: false,
            } 
        }); 
      return false; 
    });
});

首先，用<div>, 并添加<?php post_class(); ?> 模板标记到该<div>.

因此，改变这一点：

<a href="<?php the_permalink() ?>"> <div id="img" class="<?php  $category = get_the_category(); echo $category[0]->cat_name; ?>">
    <?php the_post_thumbnail();?>

    <h1><?php the_title(); ?></h1>
</div></a>

<div <?php post_class(); ?>
    <a href="<?php the_permalink() ?>"> <div id="img">
        <?php the_post_thumbnail();?>

        <h1><?php the_title(); ?></h1>
    </div></a>
</div>

那么，你只需要瞄准category-{slug} 实施同位素过滤器。

添加animationEngnine：“jquery”-动画将更加平滑。

var mycontainer = jQuery(\'#projects\');
mycontainer.isotope({ 
    filter: \'*\',
    animationEngine: \'jquery\',
    animationOptions: {
    duration: 350,
    easing: \'linear\',
    queue: true
    }
}); 

jQuery(\'#projects-filter a\').click(function(){ 
    var selector = jQuery(this).attr(\'data-filter\'); 
    mycontainer.isotope({ 
        filter: selector,
        animationOptions: {
            duration: 350,
            easing: \'linear\',
            queue: true,
        } 
    }); 
  return false; 
});