WordPress и фильтрация с помощью Isotope

Вы можете использовать эту функцию:

Поместите это в файл functions.php

function isotope_categories() {

        $categories = get_categories();

        $html = '<ul class="filters option-set" data-option-key="filter">';
        $html .= '<li><a href="#filter" data-option-value="*" class="selected">Все элементы</a></li>';

        foreach ($categories as $category) {

            $html .= "<li><a href='#filter' data-option-value='.category-{$category->category_nicename}'>{$category->cat_name}</a></li>";   
        }

        $html .= '</ul>';

        echo $html;
    }

Затем вызовите эту функцию в файле, где находится ваш контейнер Isotope.

Например:

<nav class="options">                       
    <?php isotope_categories() ?>
</nav>  

Это выведет правильную разметку для Isotope.

Если вы создадите новые записи в админке WordPress и привяжете к ним категории, они будут отображаться и фильтроваться.

Я тоже пытался интегрировать jQuery Isotope плагин с WordPress, когда наткнулся на эту тему. Если вам все еще нужна помощь, вот как это сработало у меня. Мой метод немного отличался, так как я создал пользовательский тип записей "проекты", которые нужно было фильтровать по проектам_categories - пользовательской таксономии.

Шаблон страницы требовал следующего PHP кода для генерации списка #projects-filter и блока #projects.

<?php
$terms = get_terms('project_categories');
$count = count($terms);
if ( $count > 0 ){
echo '<ul id="projects-filter">';
echo '<li><a href="#" data-filter="*">Все</a></li>';
foreach ( $terms as $term ) {
    $termname = strtolower($term->name);  
    $termname = str_replace(' ', '-', $termname);  
    echo '<li><a href="#" data-filter="' . '.' . $termname . '">' . $term->name . '</a></li>';
}
echo '</ul>';
}
?>

<?php 
    $loop = new WP_Query(array('post_type' => 'projects', 'posts_per_page' => -1));
    $count =0;
?>

<div id="project-wrapper">
    <div id="projects">

    <?php if ( $loop ) : 

        while ( $loop->have_posts() ) : $loop->the_post(); ?>

            <?php
            $terms = get_the_terms( $post->ID, 'project_categories' );

            if ( $terms && ! is_wp_error( $terms ) : 
                $links = array();

                foreach ( $terms as $term ) 
                {
                    $links[] = $term->name;
                }
                $links = str_replace(' ', '-', $links); 
                $tax = join( " ", $links );     
            else :  
                $tax = '';  
            endif;
            ?>

            <?php $infos = get_post_custom_values('wpcf-proj_url'); ?>

            <div class="project-item <?php echo strtolower($tax); ?>">
                <div class="thumb"><a href="<?php the_permalink() ?>"><?php the_post_thumbnail( 'projects-thumb' ); ?></a></div>
                <h3><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>
                <p class="excerpt"><a href="<?php the_permalink() ?>"><?php echo get_the_excerpt(); ?></a></p>
                <p class="links"><a href="<?php echo $infos[0]; ?>" target="_blank">Посмотреть онлайн →</a> <a href="<?php the_permalink() ?>">Подробнее →</a></p>
            </div>

        <?php endwhile; else: ?>

        <div class="error-not-found">Извините, в портфолио пока нет записей.</div>

    <?php endif; ?>


    </div>

    <div class="clearboth"></div>

</div> <!-- end #project-wrapper-->

А вот JavaScript, который делает всю магию.

jQuery(document).ready(function(){
    var mycontainer = jQuery('#projects');
    mycontainer.isotope({ 
        filter: '*',
        animationOptions: {
            duration: 750,
            easing: 'liniar',
            queue: false,
        }
    }); 

    jQuery('#projects-filter a').click(function(){ 
        var selector = jQuery(this).attr('data-filter'); 
        mycontainer.isotope({ 
            filter: selector,
            animationOptions: {
                duration: 750,
                easing: 'liniar',
                queue: false,
            } 
        }); 
      return false; 
    });
});

Сначала оберните вывод поста в <div> и добавьте шаблонный тег <?php post_class(); ?> к этому <div>.

Итак, измените это:

<a href="<?php the_permalink() ?>"> <div id="img" class="<?php  $category = get_the_category(); echo $category[0]->cat_name; ?>">
    <?php the_post_thumbnail();?>

    <h1><?php the_title(); ?></h1>
</div></a>

...на это:

<div <?php post_class(); ?>
    <a href="<?php the_permalink() ?>"> <div id="img">
        <?php the_post_thumbnail();?>

        <h1><?php the_title(); ?></h1>
    </div></a>
</div>

Теперь, если вы прочитаете документацию post_class() (ссылка выше), вы увидите, что среди прочих классов этот шаблонный тег добавляет класс category-{slug}. (Для ваших примеров категорий, post_class() добавит category-design или category-typo.

Таким образом, вам просто нужно будет использовать category-{slug} для реализации фильтра isotope.

Добавьте animationEngnine: 'jquery' - и анимация станет более плавной.

var mycontainer = jQuery('#projects');
mycontainer.isotope({ 
    filter: '*',
    animationEngine: 'jquery',
    animationOptions: {
    duration: 350,
    easing: 'linear',
    queue: true
    }
}); 

jQuery('#projects-filter a').click(function(){ 
    var selector = jQuery(this).attr('data-filter'); 
    mycontainer.isotope({ 
        filter: selector,
        animationOptions: {
            duration: 350,
            easing: 'linear',
            queue: true,
        } 
    }); 
  return false; 
});