Filtrer les catégories avec Isotope

Mis à jour le lundi 20 juillet 2020
Temps approximatif de lecture : 2 minutes

Isotope permet de filtrer les catégories avec le module Easypost (car il dispose d'un template que le repeater n'a pas). Globalement nous devrons insérer les slugs des catégories en classe pour chaque articles.

Afin de facilité la mise en place, vous pouvez utiliser mon plugin "OxyChild" qui dispose de la fonction nécessaire et des fichiers javascript. Il vous suffira d'activer le functions.php et l'insertion des javascipt en activant Isotope.

Nous allons d'abord récupérer les catégories et en faire des boutons pour filtrer. Insérer un bloc de code au-dessus de votre module easypost. Il faudra donc utiliser cette fonction dans ce bloc et bien modifier "ma-taxonomie" par votre taxonomie personnelle (fonctionne avec les CPT)

oxychid_get_filters('ma-taxonomie');

Et ce css dans le même bloc que vous allez personnaliser à votre gout.

.filter-button-group button {
    margin-right: 10px;
    margin-bottom: 14px;
    padding: 10px 20px;
    border: none;
    border-radius: 15px;
    background-color: #1d3c2e;
    color: #fff;
    font-weight: normal;
    letter-spacing: normal;
    text-transform: uppercase;
    cursor: pointer;
    font-size: 13px;
}

.filter-button-group button:hover,
.filter-button-group button.active {
    color: #fff;
    background-color: #63917c;
}

.filter-button-group button:focus {
    outline-style: none;
    outline-color: transparent;
}
.filter-button-group {
	display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
}

Ensuite nous allons nous rendre dans le template php d'easypost et remplacer la première ligne (div avec la classe oxy-post) avec celle-ci (remplacer également "ma-taxonomie")

<div class='oxy-post <?php 
            $categories = get_the_terms( $post->ID, 'ma-taxonomie' );
foreach( $categories as $category ) { 
  echo ' ' . $category->slug;
} ?> '>

Si vous avez bien réaliser tous les instructions, vous devriez pouvoir filtrer vos postes.

Note : vous pouvez remplacer dans la fonction, située dans functions.php, le mot "ALL" par "TOUT" ou ce qui vous conviendra.

Lien d'Isotope : https://isotope.metafizzy.co/

Lien d'Oxychild : télécharger/download

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Copyright © 2019 - 2020 Bulgaweb
 | 
Développé par BulgaWeb
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram