我如何使我的Wordpress（wp_query-自定义帖子类型），isotope.js和Bootstrap过滤器正确显示？

Question

我在使用同位素按类​​别显示我的自定义帖子类型时遇到问题，它似乎快要出现了，但是我找不到为什么它显示得很奇怪。

应该有三个Bootstrap列

显示问题的屏幕截图-https://i.stack.imgur.com/a9NBs.jpg

[这是我的页面模板上使用的代码

<div class="container" style="margin-top:30px;">
   <div class="center">
      <ul id="filters" class="button-group">
         <li class="button"><a href="#" data-filter="*" class="selected">All</a></li>
         <?php 
            $terms = get_terms("category");
            $count = count($terms); 
            if ( $count > 0 ){ 
            foreach ( $terms as $term ) { 
            echo "<li class=button><a href='#' data-filter='.".$term->slug."'>" . $term->name . "</a></li>\n";
            }
            } 
            ?>
      </ul>
   </div>
</div>
<!------->  
<div class="container" style="padding-bottom:100px;margin-top:30px;">
   <div class="grid">
      <div id="isotope-list">
         <?php  $the_query = new WP_Query( 'post_type=property-items' ); ?>
         <?php if ( $the_query->have_posts() ) : ?>
         <?php while ( $the_query->have_posts() ) : $the_query->the_post(); 
            $termsArray = get_the_terms( $post->ID, "category" ); 
            $termsString = "";
            foreach ( $termsArray as $term ) { 
            $termsString .= $term->slug.' ';
            }
            ?> 
         <div class="col-md-4">
            <div class="<?php echo $termsString; ?>item">
               <a href= "<?php the_permalink(); ?>">
                  <div class="shadow-border">
                     <?php the_post_thumbnail(); ?>
                     <header class="entry-header">
                        <?php the_title('<h1 class="entry-title property-entry-title-home">', '</h1>'); ?>
                     </header>
                     <div class="center">
                        <?php the_category() ?>
                     </div>
                  </div>
               </a>
            </div>
         </div>
         <!-- end item -->
         <?php endwhile; endif; wp_reset_postdata(); ?>
      </div>
   </div>
   <!-- end isotope-list -->
</div>

这是我的同位素初始代码

  var $container = $('#isotope-list'); //The ID for the list with all the blog posts
  $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;
    }
    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;
  });

});```

Answer 1

Isotope.js具有它自己的布局顺序。您无需在容器元素isotope-list内设置列。

删除col-4包装器-让同位素处理它：

<?php  $the_query = new WP_Query( 'post_type=property-items' ); ?>

<div class="container" style="padding-bottom:100px;margin-top:30px;">
   <div class="grid">
      <div id="isotope-list">
         <?php if ( $the_query->have_posts() ) :  while ( $the_query->have_posts() ) : $the_query->the_post(); 
            $termsArray = get_the_terms( $post->ID, "category" ); 
            $termsString = "";
            foreach ( $termsArray as $term ) { 
              $termsString .= $term->slug.' ';
            }
            ?> 
            <div class="<?php echo $termsString; ?> item">
               <a href= "<?php the_permalink(); ?>">
                  <div class="shadow-border">
                     <?php the_post_thumbnail(); ?>
                     <header class="entry-header">
                        <?php the_title('<h1 class="entry-title property-entry-title-home">', '</h1>'); ?>
                     </header>
                     <div class="center">
                        <?php the_category() ?>
                     </div>
                  </div>
               </a>
            </div>
         <!-- end item -->
         <?php endwhile; endif; wp_reset_postdata(); ?>
      </div>
   </div>
   <!-- end isotope-list -->
</div>

如果您仍想使用bootsrap进行列大小调整，请查看official docs，并更改相关的JS：

$container.prepend('<div class="grid-size col-md-4"></div>" );
$container.isotope({ //Isotope options, 'item' matches the class in the PHP
  itemSelector: '.item', // use a separate class for itemSelector, other than 
  percentPosition: true,
  masonry: {
    columnWidth: '.grid-sizer'
  }
});

JS说明：

1. [添加另一个div用于确定网格。
2. 更改同位素设置以支持引导程序大小调整>