Isotope 필터/정렬 게시물을 WP에서 만들 수 없습니다.

Question

사이트에서 일하고 있습니다. Isotope (http://isotope.metafizzy.co/docs/filtering.html)를 사용하여 게시물을 필터링/정렬하려고합니다. 분류 페이지. 그러나 어떤 이유로 나는 내가하는 일과 상관없이 일을 할 수 없다. 이 일에 긴급한 도움이 필요해. 여기 내 코드는 모습입니다 - 우선 범주

내 분류 페이지에서 다음

function isotope_categories() { 

     $terms = get_terms('videoscategory'); 

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

     foreach ($terms as $term) { 


      $html .= "<li><a href='#filter' data-filter='.boxes {$term->name}'>{$term->name}</a></li>"; 
     } 

     $html .= '</ul>'; 

     echo $html; 
    } 

내가 그렇게 같이 호출의 목록을 생성 functions.php 내 테마이이 -

<nav id="options" class="option-set filter" data-option-key="filter">      
    <?php isotope_categories() ?> 
</nav> 

카테고리 링크가 생성되지만 예상대로 작동하지 않습니다.

<div id="content"> 

<?php if (have_posts()) : while (have_posts()) : the_post(); ?> 


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


<div class="boxes <?php foreach($terms as $term) echo ' ' . $term->name; ?>" style="width:100%; float:left; border-top:1px solid #ccc; margin-top:10px;"> 

// MY POST CONTENT AND DIVS 

</div> 
<?php endwhile; else: ?> 

<p><?php _e('Sorry, no posts matched your criteria.'); ?></p> 

<?php endif; ?> 
<?php if (function_exists("pagination")) { 
    pagination($additional_loop->max_num_pages); 
} ?> 
</div> 

그리고 그 아래 JS - -이 내 페이지에 대한 루프 내가 전혀 생각 동작하지 않습니다

<script type="text/javascript"> 
    jQuery(document).ready(function(){ 
    var mycontainer = jQuery('#content'); 
    mycontainer.isotope({ 
    itemSelector: '.boxes' 
    }); 

    // filter items when filter link is clicked 
jQuery('#options a').click(function(){ 
    var selector = jQuery(this).attr('data-filter'); 
    mycontainer.isotope({ filter: selector }); 
    return false; 
    }); 

}); 
</script> 

, 나는 그것을 얻을 수있는 몇 가지 방법을 시도했습니다 작동하지만 뭔가를 놓치고 있거나 완전히 잘못하고있는 것 같아요. 필터링이 작동하도록 수정하거나 변경해야하는 항목은 무엇입니까 ??

모든 도움을 주시면 대단히 감사하겠습니다. 감사.

는

편집 :

나는이 오류를 볼 수 있었던 크롬 디버그 콘솔을 사용하여 - catch되지 않은 형식 오류 : 개체 [개체 개체]있는 방법 '동위 원소'가 없습니다를 - 임은 확실하지 그래도 무엇을 의미하는지.

Answer 1

좋아, 나는 그것이 내가 원하는 방식으로 작동하도록하기 위해 운동해야하는 몇 가지 더 많은 것들을 제외하고는 그것을 작동시키고 걸러 낼 수 있었다. 지금까지 그 기능성만큼, 나는 그것을 작동시킬 수 있었다. 경우 다른 사람이 관심 - 여기에 내가

1. 먼저 내가 functions.php 내 테마와 만들어 내 헤더를 통해 가서 무슨 짓을했는지 확인 최신 JQuery와 포함 된 올바른 스크립트, 나는 또한 년후 확인했다 포함 't은 여러 번 포함하고 그들은 올바른 순서에 있었다 (첫번째 동위 원소 스크립트 다음 JQuery와 스크립트.)

   <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'></script> <script type='text/javascript' src='<?php bloginfo('template_directory'); ?>/lib/jquery.isotope.min.js'></script>

2. 가 다음 내가 동위 원소에 대한 CSS 내 스타일 시트에 있었다 확인했다.

   .isotope-item { 
       z-index: 2; 
   } 
   
   .isotope-hidden.isotope-item { 
       pointer-events: none; 
       z-index: 1; 
   } 
   
   .isotope, 
   .isotope .isotope-item { 
       /* change duration value to whatever you like */ 
       -webkit-transition-duration: 0.8s; 
       -moz-transition-duration: 0.8s; 
         transition-duration: 0.8s; 
   } 
   
   .isotope { 
       -webkit-transition-property: height, width; 
       -moz-transition-property: height, width; 
         transition-property: height, width; 
   } 
   
   .isotope .isotope-item { 
       -webkit-transition-property: -webkit-transform, opacity; 
       -moz-transition-property: -moz-transform, opacity; 
         transition-property:   transform, opacity; 
   } 
   

3. 는 그 후 나는 (당신이 내 질문에 원본을 볼 수 있습니다) 필터 목록에 대한 내 기능의 코드를 편집

   function isotope_categories() { 
   
       $terms = get_terms('videoscategory'); 
   
       $html = '<ul id="options">'; 
       $html .= '<li><a href="#" data-option-value="*" data-filter="*" class="selected">All items</a></li>'; 
   
       foreach ($terms as $term) { 
   
   
        $html .= "<li><a href='#' data-filter='.{$term->slug}' class='current'>{$term->name}</a></li>"; 
       } 
   
       $html .= '</ul>'; 
   
       echo $html; 
   } 
   

4. 다음 내 루프 내 코드를 변경 -

   -

   <div id="content" style="width: 94%;"> 
       <div id="isocontent"> 
       <?php if (have_posts()) : while (have_posts()) : the_post(); ?> 
   
       <?php $terms = get_the_terms($post->ID, 'videoscategory'); ?> 
   
       <div class="box<?php foreach($terms as $term) echo ' ' . $term->slug; ?>" style="width:100%; float:left; border-top:1px solid #ccc; margin-top:10px;"> 
   
       //MY DIVS AND CONTENT 
   
       </div> 
   
       <?php endwhile; else: ?> 
   
       <p><?php _e('Sorry, no posts matched your criteria.'); ?></p> 
   
       <?php endif; ?> 
       <div style="position:absolute;"> 
       <?php if (function_exists("pagination")) { 
   pagination($additional_loop->max_num_pages); 
       } ?> 
       </div></div></div> 
   

5. 는 그럼 그 아래 자바 스크립트 코드를 편집

   <script type="text/javascript"> 
       $(document).ready(function(){ 
       var mycontainer = $('#isocontent'); 
   mycontainer.isotope({ 
   itemSelector: '.box' 
   }); 
   
       // filter items when filter link is clicked 
       $('#options a').click(function(){ 
       var selector = jQuery(this).attr('data-filter'); 
       mycontainer.isotope({ filter: selector }); 
       return false; 
       }); 
   
       }); 
       </script> 
   

이 모든 작업을 마친 마침내 동위 원소를 얻을 수있었습니다.나는 여전히 그것을 해결할 수있는 몇 가지 일들을 가지고있어서 그것이 내가 원하는 방식으로 정확하게 작동하도록 할 수는 있지만 그것이 제대로 작동하려면, 이것이 나를 위해 일한 것이다.