帮助我的isotope.js可过滤的投资组合

我正在为我正在使用同位素.js开发的WordPress主题创建一个可过滤的公文包模板，但我似乎无法使其正常工作，我也不完全确定原因。

以下是页面模板的代码：

<?php
/*
Template Name: Portfolio Filter
*/
?>
<?php get_header(); ?>
<div id="content" class="clearfix">
<div id="main" class="col940 left first clearfix" role="main">
    <header>
        <h1 id="port-title"><?php the_title(); ?></h1>
    </header> <!-- end article header -->

                <?php if(get_post_meta(get_the_ID(), 'page_intro', true) != '') : ?>
                <div id="port-single-intro">
                    <h3><?php echo get_post_meta(get_the_ID(), 'page_intro', true); ?></h3>
                    <hr />
                </div>
                <?php endif; ?>

        <script type='text/javascript'>         
            $(document).ready(function () {
//Set your isotope area
var $container = $('#portfolio-wrap'),
filters = {};
//Set our items to be filtered, .post will work if you're using the post_class(); function
$container.isotope({
    itemSelector : '.portfolio-item',
    layoutMode : 'masonry',
});
//Set the buttons to filter the content
$('.filter a').click(function(){
    var $this = $(this);
    // don't proceed if already selected
    if ( $this.hasClass('selected') ) {
    return;
}
var $optionSet = $this.parents('.option-set');
//change selected class
$optionSet.find('.selected').removeClass('selected');
$this.addClass('selected');
//store filter value in object
//i.e. filters.color = 'red'
var group = $optionSet.attr('data-filter-group');
filters[ group ] = $this.attr('data-filter-value');
//convert object into array
var isoFilters = [];
for ( var prop in filters ) {
isoFilters.push( filters[ prop ] )
}
var selector = isoFilters.join('');
$container.isotope({ filter: selector });
return false;
});
});
    </script>
    <script>
    </script>
    <!-- Portfolio Filter -->
    <h2>Catagories</h2> 
    <ul class="filter" data-filter-group="catagories">
        <li><a href="#filter-topic-any" data-filter-value="" class="selected">All</a></li>
        <?php
            //Grab the child categories
            $categories=get_categories('portfolio');
                    foreach($categories as $category) {
                //and format them for use as isotope filters
                echo '<li><a href="#filter-topic-' . $category->slug . '" class="" data-filter-value=".category-' . $category->slug . '" ' . '>' . $category->name . '</a></li>';
            } 
        ?>
    </ul>
    <div id="portfolio-wrap">           
        <?php 
            $loop = new WP_Query(array('post_type' => 'portfolio')); 
        ?>
        <?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
        <?php   
            $custom = get_post_custom($post->ID);
            ?>

        <div class="portfolio-item">
            <div class="view view-sixth">
                <?php the_post_thumbnail( 'gframe-thumb-port' ); ?>
                    <div class="mask">
                            <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
                            <p><a href="<?php the_permalink() ?>">View</a></p>
                    </div>
            </div>
        </div>
        <?php endwhile; ?>  
    </div>
</div>  
</div>
<?php get_footer(); ?>

请注意，代码中的jQuery将单独加载，为了方便起见，我刚才已经将其包含在其中。

您可以在上实时查看正在发生的事情http://themes.i-am-grae.me/studio8.

基本上，它一次只显示一个投资组合条目，有人看到任何突出的东西可以解决这个问题吗？

向致以诚挚的问候

格雷姆