WordPress și filtrarea cu Isotope

Poți dori să utilizezi această funcție:

Plasează acest cod în fișierul tău 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">Toate elementele</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;
    }

și apoi apelează această funcție în fișierul unde se află containerul tău Isotope.

De exemplu:

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

Va afișa marcajul corect pentru Isotope

Astfel, dacă creezi articole noi în administrarea WordPress și le asociezi categorii, acestea vor apărea și vor putea fi filtrate

Și eu am încercat să integrez pluginul jQuery Isotope cu WordPress când am dat peste acest subiect. Dacă mai ai nevoie de ajutor, iată cum am reușit. Metoda mea a fost puțin diferită, deoarece am creat un tip personalizat de postări pentru proiecte pe care voiam să le filtrez după project_categories, care este o taxonomie personalizată.

Șablonul de pagină avea nevoie de următorul cod PHP pentru a genera lista #projects-filter și div-ul #projects.

<?php
$terms = get_terms('project_categories');
$count = count($terms);
if ( $count > 0 ){
echo '<ul id="projects-filter">';
echo '<li><a href="#" data-filter="*">Toate</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">Previzualizare live →</a> <a href="<?php the_permalink() ?>">Detalii →</a></p>
            </div>

        <?php endwhile; else: ?>

        <div class="error-not-found">Ne pare rău, nu există intrări în portofoliu momentan.</div>

    <?php endif; ?>


    </div>

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

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

Și iată JavaScript-ul care face magia:

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; 
    });
});

Mai întâi, înfășurați ieșirea postării într-un <div> și adăugați eticheta de șablon <?php post_class(); ?> acelui <div>.

Deci, schimbați asta:

<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>

...în asta:

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

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

Acum, dacă citiți intrarea Codex pentru post_class() (legată mai sus), veți vedea că, printre alte clase, această etichetă de șablon aplică o clasă category-{slug}. (Pentru categoriile din exemplul dvs., post_class() ar adăuga category-design sau category-typo.

Deci, atunci ar trebui doar să țintiți category-{slug} pentru a implementa filtrul isotope.

Adaugă animationEngnine: 'jquery' - iar animația va fi mai fluida.

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; 
});