Не удается отобразить посты при фильтрации категорий с использованием isotope.js.

В настоящее время я создаю тему для WordPress, используя скрипт isotope.js, который позволяет отображать статьи по одному этапу, фильтруя их по категориям. Я много мучился и до сих пор не могу добиться ожидаемого результата:

Вот ссылка, которая приведет вас к ожидаемому результату (полная версия в HTML / CSS):

https://vgamerz.fr/isotopehelp/gallery/blog.html

Вот моя тема для WordPress (PHP файлы):

    <!-- Заголовок Isotope -->
      <div class="row">
        <div class="col-md-12">

            <h2 class="isotope-button-title">Сортировка блога Isotope по</h2>
                <div id="isotope-filters" class="isotope-button-group">

                        <li><a href="#" data-filter="*" class="selected">Все</a></li>
                        <?php 
                        $terms = get_categories(); // получить все категории, но вы можете использовать любую таксономию
                        $count = count($terms); //Сколько их?
                        if ( $count > 0 ){  //Если есть более 0 терминов
                        foreach ( $terms as $term ) {  //для каждого термина:
                            echo "<button class="button"><a href="#" data-filter=".".$term->slug."">" . $term->name . "</a></button>\n";
                            //создаем элемент списка с текущим термином slug для сортировки и именем для метки
                            }
                        } 
                            ?>

                </div>

          </div>
        </div>
        <!-- Заголовок Isotope -->

    <!--------------------------------------- конец заголовка -------------------------------------->

        <!-- Сетка Isotope -->
        <div class="row isotope-grid">
            <?php
                // Циклы
                if(have_posts()):
                    while(have_posts()):
                        the_post(); ?>    
                                <!-- Элемент сетки Isotope -->
                                <div class="col-md-3 col-sm-4 col-xs-12 isotope-grid-item design" data-category="<?php get_the_category($post->ID); ?>">
                                    <div class="isotope-item">
                                        <a href="#"><div class="isotope-feature-image"><?php the_post_thumbnail() ?></div>
                                        <h3 class="isotope-title"><a href="<?php the_permalink()?>"><?php the_title(); ?></a></h3>
                                        <p class="isotope-number">Номер поста: <?php the_ID(); ?></p>
                                        <p class="isotope-name">Автор: <?php the_author() ?></p>
                                        <p class="isotope-type">Тип блога: <?php the_category() ?></p>
                                        <p class="isotope-datetime">Дата поста: <?php the_date() ?> в <?php the_time() ?></p>
                                        <p class="isotope-blog"><?php the_content(); ?></p>
                                    </div>
                                </div>
                        <!-- Элемент сетки Isotope -->    
                        <?php 
                    Endwhile;
                Endif;
            ?>
            </div>
        <!-- Конец сетки Isotope -->

        <!-- Начало подвала -->

        </div>
    </body>
  </html> 
  <!-- Конец подвала -->

JS файл (isotope.js):

"use strict";

(function ($){

  $.fn.isotope_gallery = function(){    

        jQuery( function() {
            var $container = jQuery('.isotope-grid');
            // используйте imagesLoaded, вместо window.load
            $container.imagesLoaded( function() {
                $container.isotope({
                    itemSelector: '.isotope-item',
                    // плиточная компоновка является режимом компоновки по умолчанию, нет необходимости указывать его
                });
            })
        });

        // инициализация Isotope
        var $grid = $('.isotope-grid').isotope({
          itemSelector: '.isotope-grid-item',
          layoutMode: 'fitRows',
          isFitWidth: true,
          getSortData: {
            name: '.isotope-name',
            title: '.isotope-title',
            details: '.isotope-details',
            symbol: '.isotope-symbol',
            type: '.isotope-type',
            number: '.isotope-number',
            category: '[data-category]',
            //вы можете добавить сюда больше сортировочных классов, таких как эти
          }
        });

        // функции фильтрации
        var filterFns = {
          // показать, если число больше 50
          numberGreaterThan50: function() {
            var number = $(this).find('.number').text();
            return parseInt( number, 10 ) > 50;
          },
          // показать, если имя заканчивается на -ium
          ium: function() {
            var name = $(this).find('.name').text();
            return name.match( /ium$/ );
          }
        };

        // привязка клика по кнопке фильтра
        $('#isotope-filters').on( 'click', 'button', function() {
          var filterValue = $( this ).attr('data-filter');
          // используйте filterFn, если совпадает значение
          filterValue = filterFns[ filterValue ] || filterValue;
          $grid.isotope({ filter: filterValue });
        });

        // привязка клика по кнопке сортировки
        $('#isotope-sorts').on( 'click', 'button', function() {
          var sortByValue = $(this).attr('data-sort-by');
          $grid.isotope({ sortBy: sortByValue });
        });

        // изменение класса is-checked на кнопках
        $('.isotope-button-group').each( function( i, buttonGroup ) {
          var $buttonGroup = $( buttonGroup );
          $buttonGroup.on( 'click', 'button', function() {
            $buttonGroup.find('.is-checked').removeClass('is-checked');
            $( this ).addClass('is-checked');
          });
        });

        // Выбор и цикл контейнера элементов, которые вы хотите уравнять
        $('.isotope-grid').each(function(){  

          // Кешируем самую высокую
          var highestBox = 0;

          // Выбор и цикл элементов, которые вы хотите уравнять
          $('.isotope-grid-item', this).each(function(){

            // Если этот блок выше, чем кешированная высокая, то сохраняем его
            if($(this).height() > highestBox) {
              highestBox = $(this).height(); 
            }

          });  

          // Устанавливаем высоту всех этих дочерних элементов на ту, которая была самой высокой 
          $('.isotope-grid-item',this).height(highestBox);

        }); 

  }

  $(this).isotope_gallery();

}(jQuery));

Спасибо за вашу помощь!

Можете попробовать:

<?php if (have_posts()): ?>
    <?php while (have_posts()): the_post(); ?>
        <?php
        $categories     = get_the_category();
        $listCategories = [];
        foreach ($categories as $category) {
            $listCategories[] = $category->slug;
        }
        ?>
        <!-- Элемент сетки Isotope -->
        <div class="col-md-3 col-sm-4 col-xs-12 isotope-grid-item <?php echo implode(' ', $listCategories); ?>" data-category="<?php echo implode(',', $listCategories); ?>">
            <div class="isotope-item">
                <a href="#">
                    <div class="isotope-feature-image"><?php the_post_thumbnail() ?></div>
                    <h3 class="isotope-title"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>
                    <p class="isotope-number">Номер поста: <?php the_ID(); ?></p>
                    <p class="isotope-name">Автор: <?php the_author() ?></p>
                    <p class="isotope-type">Тип блога: <?php the_category() ?></p>
                    <p class="isotope-datetime">Дата поста: <?php the_date() ?> в <?php the_time() ?></p>
                    <p class="isotope-blog"><?php the_content(); ?></p>
                </a>
            </div>
        </div>
        <!-- Элемент сетки Isotope -->
    <?php endwhile; ?>
<?php endif; ?>

Посты могут иметь более одной категории, если вы посмотрите на источник, вы, вероятно, увидите [массив], или если вы включите отчет об ошибках PHP, получите ошибку.