Question

我一直试图解决这个问题几个小时了，而且我已经完成了这个问题。不知道这里有什么问题。

我在我的公司网站上为我定制的Wordpress主题设置了Isotope。我希望能够过滤投资组合。

以下是该页面的链接：http://www.wildemedia.co.uk/portfolio/

这是jQuery：

jQuery(function($) {

  var $container = $('#isotope-list');
  $container.isotope({ //Isotope options, 'item' matches the class in the PHP
    itemSelector: '.item',
    layoutMode: 'masonry'
  });

  //Add the class selected to the item that is clicked, and remove from the others
  var $optionSets = $('#filters'),
    $optionLinks = $optionSets.find('a');

  $optionLinks.click(function() {
    var $this = $(this);
    // don't proceed if already selected
    if ($this.hasClass('selected')) {
      return false;
    } < br >
      var $optionSet = $this.parents('#filters');
    $optionSets.find('.selected').removeClass('selected');
    $this.addClass('selected');

    //When an item is clicked, sort the items.
    var selector = $(this).attr('data-filter');
    $container.isotope({
      filter: selector
    });

    return false;
  });

});

这是我的投资组合自定义帖子类型文件中的PHP代码：

<div class="wrap">


    <ul id="filters">
        <li><a href="#" data-filter="*" class="selected">Everything</a></li>
     <?php 
     $terms = get_terms("portfolio-categories"); // get all categories, but you can use any taxonomy
     $count = count($terms); //How many are they?
     if ( $count > 0 ){  //If there are more than 0 terms
     foreach ( $terms as $term ) {  //for each term:
     echo "<li><a href='#' data-filter='.".$term->slug."'>" . $term->name . "</a></li>\n";
     //create a list item with the current term slug for sorting, and name for label
     }
     } 
     ?>
    </ul>

    <?php $the_query = new WP_Query( 'post_type=portfolio&posts_per_page=50' ); //Check the WP_Query docs to see how you can limit which posts to display ?>
    <?php if ( $the_query->have_posts() ) : ?>
        <div id="isotope-list">
        <?php while ( $the_query->have_posts() ) : $the_query->the_post(); 
     $termsArray = get_the_terms( $post->ID, "portfolio-categories" );  //Get the terms for this particular item
     $termsString = ""; //initialize the string that will contain the terms
     foreach ( $termsArray as $term ) { // for each term 
     $termsString .= $term->slug.' '; //create a string that has all the slugs 
     }
     ?> 
     <div class="<?php echo $termsString; ?> item"> <?php // 'item' is used as an identifier (see Setp 5, line 6) ?>
     <div class="img">
        <a title="<?=$title?>" href="<?php the_permalink();?>"><?php the_post_thumbnail('large'); ?></a>
     </div>

     <div class="item_content">

     <?php echo wpdocs_custom_taxonomies_terms_links(); ?>


     <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>

     <div class="grey_separator"></div>

     <p><?php print get_the_excerpt(); ?></p> 

     <a class="portfolio_view_more" href="<?php the_permalink(); ?>">View More</a>

     </div>
     <div class="clear"></div>
     </div> <!-- end item -->
        <?php endwhile;  ?>
        </div> <!-- end isotope-list -->
    <?php endif; ?>

</div>

任何帮助将不胜感激！：）

Answer 1

您网站上的开发控制台说$(...).isotope()不是一个功能。我还看到你的isotope.pkgd.js保存在scripts.js之前的标题中，但这并不总是确保流程和库在脚本中执行JS代码时可用。< / p>

您可以尝试两件事，

在jQuery(window).load之后初始化同位素，以便已加载库

OR

在scripts.js将同位素.pkgd.js的句柄排入依赖列表时，即

例如，你包括你的同位素库

wp_enqueue_scripts( 'isotope', 'link-to-isotope-library', ... );

然后将scripts.js包括为

wp_enqueue_scripts( 'scripts', 'scripts.js-link', array('isotope'), FALSE, true );

希望这有帮助。

过滤器按钮不适用于Isotope和Wordpress自定义帖子类型

1 个答案: