web-dev-qa-db-fra.com

Wordpress et filtrage isotopique

J'essaie d'utiliser Isotope ( http://isotope.metafizzy.co/ ) pour filtrer mes publications Wordpress, http://i44.tinypic.com/fco55k.jpg Voici à quoi ressemble mon site comme, je voudrais filtrer les publications en fonction d'une catégorie de publication, je dois donc ajouter un nom de classe à chaque publication, puis la filtrer à l'aide d'un isotope

  <li><a href="#" data-filter="*">show all</a></li>
  <li><a href="#" data-filter=".design">design</a></li>
  <li><a href="#" data-filter=".typo">typography</a></li>

ce sont les noms de mes catégories, puis j'aimerais ajouter le nom de classe d'un article en fonction de la catégorie dans laquelle il se trouve.

<div id="main">
          <?php
          $args = array('orderby' => 'Rand' );
          $random = new WP_Query($args); ?>
          <?php if(have_posts()) : ?><?php while($random->have_posts()) : $random->the_post(); ?>
         <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>

et javascript im using

    <script type="text/javascript">
jQuery(window).load(function(){
jQuery('#main').isotope({
  masonry: {
    columnWidth: 20
  },

});
$('#filters a').click(function(event){
  var selector = $(this).attr('data-filter');
  $('#main').isotope({ filter: selector });
  return false;
});
});

</script>
categoriesjquery
4
dinosauuur

Vous n'êtes pas encore sûr que les isotopes et les filtres fonctionnent encore?

Je pense que vous avez manqué deux choses

  1. les filtres doivent être encapsulés dans une classe (pour que la requête puisse être activée par un clic sur les liens a) comme ceci:

    <ul id="options">
<li><a href="#" data-filter="*">show all</a></li>
<li><a href="#" data-filter=".web">web</a></li>
<li><a href="#" data-filter=".mobile">mobile</a></li>
</ul>

NB: les filtres de données sont sensibles au CaSe (ils ne fonctionneront donc pas s'ils ne correspondent pas à vos catégories WordPress ou à ce que vous utilisez.

  1. Le jQuery isotope doit être sécurisé pour WordPress - pour fonctionner en mode sans conflit

Voici le code original de la documentation Isotope

// filter items when filter link is clicked
$('#filters a').click(function(){
var selector = $(this).attr('data-filter');
$container.isotope({ filter: selector });
return false;
});

Voici le code modifié pour WordPress

// filter items when filter link is clicked
jQuery('#options a').click(function(){
var selector = jQuery(this).attr('data-filter');
mycontainer.isotope({ filter: selector });
return false;
});

NB: mettez ceci après le reste de votre script isotope et notez que #options est la classe de votre liste de filtres en HTML :)

Vous pouvez le voir fonctionner à damien.co/isotope

J'espère que ça vous a aidé?

2
Damien

Vous voudrez peut-être utiliser cette fonction:

Placez ceci dans votre 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">All items</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;
    }

puis appelez cette fonction dans le fichier où se trouve votre conteneur d'isotopes.

Comme:

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

Il produira le balisage correct pour l'isotope

Donc, si vous créez de nouveaux articles dans le backend de Wordpress et que vous leur liez des catégories, ils apparaîtront et pourront être filtrés.

4
Beau

J'ai moi aussi tenté d'intégrer le plug-in jQuery Isotope avec WP lorsque je suis tombé par hasard sur ce sujet. Si vous avez encore besoin d'aide, voici comment cela fonctionne. Ma méthode était un peu différente depuis que j'ai créé un type de projet personnalisé que je voulais filtrer par la catégorie projects_categories, qui est une taxonomie personnalisée.

Le modèle de page avait besoin du php suivant pour que la liste # projets-filtres et la div #projects soient générés.

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

        <?php endwhile; else: ?>

        <div class="error-not-found">Sorry, no portfolio entries for while.</div>

    <?php endif; ?>


    </div>

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

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

Et voici le javascript qui fait la magie.

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; 
    });
});
3
Curtis Flick

Commencez par encapsuler votre publication dans un <div>, puis ajoutez la balise <?php post_class(); ?> template à ce <div>.

Alors changez ceci:

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

....pour ç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>

Maintenant, si vous lisez l'entrée post_class() Codex (lien ci-dessus), vous verrez que, entre autres classes, cette balise de modèle applique une classe category-{slug}. (Pour vos exemples de catégories, post_class() ajouterait category-design ou category-typo.

Vous devez donc simplement cibler category-{slug} pour implémenter le filtre isotope.

3
Chip Bennett

Ajoutez l'animationEngnine: 'jquery' - et l'animation sera plus fluide.

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; 
});
0
Justin Young