Как получить мой Wordpress (wp_query - пользовательский тип записи), изотопный фильтр js и Bootstrap для правильного отображения? - PullRequest
Новая
       22

Как получить мой Wordpress (wp_query - пользовательский тип записи), изотопный фильтр js и Bootstrap для правильного отображения?

0 голосов
/ 09 марта 2020

У меня проблемы с отображением моего пользовательского типа поста по категориям с использованием изотопа, похоже, он почти у цели, но я не могу понять, почему он отображается странным образом.

Предполагается, что будет три 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;
  });

});```

1 Ответ

0 голосов
/ 09 марта 2020

Изотоп. 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>

Если вы все еще хотите использовать загрузочный слой для определения размеров колонок, пожалуйста, ознакомьтесь с официальными документами и измените соответствующие 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. Изменение настроек изотопа для поддержки bootstrap sizing
...