私のisotope.jsフィルタリング可能なポートフォリオに関するヘルプ

Question

WordPressテーマのフィルタリング可能なポートフォリオテンプレートを作成しています。私はIsotope.jsを使用して開発していますが、正しく動作させることはできないと思います。 。ここで

は、ページテンプレートのコードです：

<?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で表示できます。

基本的には、一度に1つのポートフォリオエントリしか表示されません。

種類よろしく

グレアム

Answer 1

項目がありますので、ワードプレスの問題ではありません。私はそれがあなたの幅と高さで何かをしなければならないと思う。基本同位体デモを確認してください。ここ

http://isotope.metafizzy.co/docs/introduction.html