0

私はサイトで作業しており、Isotope（http://isotope.metafizzy.co/docs/filtering.html）を使用して分類ページの投稿をフィルタリング/並べ替えようとしています。しかし、どういうわけか、何をしても動かせません。これについては緊急の支援が必要です。これが私のコーディングの様子です-まず、テーマのfunctions.phpにこれを入れて、カテゴリのリストを生成します

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;
    }

次に、分類法のページで、そのように呼びます-

<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>

私はそれをまったく動作させることができません、私はそれを動作させるためにいくつかの方法を試しましたが、私は何かが欠けているか、単にそれをすべて間違っていると思います。フィルタリングが機能するようにするには、何を修正または変更する必要がありますか？

どんな助けでも大歓迎です。ありがとう。

編集：

chromeデバッグコンソールを使用することで、このエラーを確認できました-Uncaught TypeError：Object [object Object] has no method'isotope'-しかし、それが何を意味するのかわかりません。

4

1 に答える 1

0

わかりました。それを機能させてフィルタリングすることができましたが、希望どおりに機能させるために解決しなければならないことがいくつかあります。それの機能に関しては、私はなんとかそれを機能させることができました。他の誰かが興味を持っている場合に備えて-これが私がしたことです

  1. まず、テーマのfunctions.phpとヘッダーを調べて、最新のjqueryが含まれ、正しいスクリプトが含まれていることを確認しました。また、複数回含まれておらず、正しい順序になっていることを確認しました（jqueryスクリプトを最初に、次にisotope脚本。）

    <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. 次に、その下のjavascriptコードを編集しました-

       <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>

これらすべてを行った後、私はようやく同位体を機能させることができました。希望どおりに機能させるために修正すべき点がまだいくつかありますが、正しく機能させる限り、これが私にとってはうまくいきました。

于 2012-12-21T06:54:19.530 に答える