Question

我正在网站上工作，我正在尝试使用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调试控制台，我能够看到此错误 - 未捕获TypeError：对象[object Object]没有方法'isotope' - 我不知道它的意思。

Answer 1

好的，我能够让它工作和过滤，除了还有一些我需要解决的事情，让它按照我想要的方式工作。至于它的功能，我确实设法让它工作。如果有其他人感兴趣 - 这就是我做的事情

首先，我浏览了我的主题functions.php和我的标题，以确保包含最新的jquery并包含正确的脚本，我还确保它不包含多次，并且它们的顺序正确（首先是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>

接下来我确保同位素的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;
}

之后我编辑了我的函数中的代码用于过滤列表（你可以在我的问题中看到原文）

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

接下来我改变了我的循环编码 -

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

然后我编辑了它下面的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>

完成所有这些后，我终于能够让同位素起作用了。我仍然有一些事情需要解决，以便我可以让它按照我想要的方式工作但是为了让它正常运行，这对我有用。

无法在WP中制作同位素过滤/排序帖子

1 个答案: