Php 帮助处理我的同位素.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(); ?>

$（文档）.ready（函数（）{
//设置同位素区域
var$container=$（“#投资组合包装”），
过滤器={}；
//设置要筛选的项目。如果使用post_class（）；函数，post将起作用
$container.com({
itemSelector:“.portfolio项”，
布局模式：“砌体”，
});
//设置按钮以过滤内容
$（'.filter a'）。单击（函数（）{
var$this=$（this）；
//如果已选择，则不继续
if（$this.hasClass（'selected'））{
返回；
}
var$optionSet=$this.parents（'.option set'）；
//更改选定的类
$optionSet.find（'.selected'）.removeClass（'selected'）；
$this.addClass（'selected'）；
//在对象中存储筛选器值
//i、 e.过滤器。颜色=‘红色’
var group=$optionSet.attr（'data-filter-group'）；
filters[group]=$this.attr（'data-filter-value'）；
//将对象转换为数组
var isoFilters=[]；
用于（过滤器中的var prop）{
Isofilter.push（过滤器[prop]）
}
var选择器=isoFilters.join（“”）；
$container.同位素（{filter:selector}）；
返回false；
});
});
分类

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

您可以实时查看正在发生的事情

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

问候

---

格雷姆

项目在那里，所以这不是WordPress的问题。我想这和你的身高和宽度有关。检查基本同位素演示

---

抱歉，这里是指向投资组合的直接链接，而不是标记为迁移到SO的WP Q。