Vous avez toujours voulu faire une belle colonne de présentation des articles avec des filtres de catégorie au-dessus qui mélangent et filtrent les articles avec une belle animation ? Alors c’est le tutoriel pour vous.
Ce que nous allons faire dans ce didacticiel est une liste de tous les messages (de préférence dans un type de message personnalisé tel que les employés) joliment dans les colonnes et avec leurs images en vedette. Au-dessus des messages, nous générons des filtres pour la taxonomie connectée. En cliquant sur un filtre, les publications seront mélangées avec une belle animation et masqueront les publications qui ne sont pas présentes dans la catégorie choisie.
Pour ce faire, nous utilisons une bibliothèque Javascript pour le filtrage. Il en existe de nombreux – certains nécessitent jQuery et d’autres non – certains sont open source et d’autres nécessitent une licence commerciale. Les plus populaires sont MixItUp et Isotope. Cependant, les deux nécessitent une licence commerciale. Pour mon projet, j’avais besoin d’une bibliothèque qui fasse l’affaire tout en étant totalement libre d’utilisation dans des projets commerciaux. J’en ai essayé plusieurs et le meilleur que j’ai trouvé jusqu’à présent est FilterizR. Commençons ce tutoriel en mettant la main sur cette bibliothèque !
La librairie FilterizR
Découvrez la démo sur la page d’ accueil de FilterizR pour voir si cette bibliothèque est faite pour vous. Vous pouvez même jouer avec les options en temps réel. Cette bibliothèque prend en charge le filtrage (ce que nous allons faire dans ce didacticiel), le brassage (ordre aléatoire), la recherche et le tri. Il est réactif et optimisé pour les appareils mobiles. Si loin de ce que j’ai vécu, il gère également très bien le réglage de la hauteur automatique du conteneur sur chaque article.
FilterizR propose trois types d’utilisation différents :
- Vanilla Javascript : expose le FilterizR en tant que fonction globale à appeler en Javascript standard.
- jQuery: permet de l’utiliser
jQuerypour l’initialiser et le configurer. - Bibliothèque Javascript pure/npm : à utiliser dans les importations ES6 (par exemple, si vous écrivez des blocs personnalisés pour Gutenberg).
La deuxième option est la plus simple pour les personnes qui ne connaissent pas Javascript. La plupart des gens commencent avec jQuery. Mais gardez à l’esprit que jQuery est une bibliothèque volumineuse et lourde à charger dans votre projet, et si cela peut être évité, vous devriez le faire. Dans ce tutoriel, nous utiliserons la méthode Javascript vanilla. Si vous implémentez cela dans un bloc Gutenberg personnalisé, vous devriez envisager d’utiliser la troisième option. Ensuite, vous pouvez simplement l’installer via npmet importer la bibliothèque dans votre code de bloc.
Téléchargement et configuration des fichiers
Prenons le dossier approprié ! Allez sur le Github de FilterizR pour télécharger. Sauf si vous installez via npm (troisième option), vous pouvez aller dans le dossier ‘ dist‘ et télécharger la bibliothèque minifiée dont vous avez besoin. Comme je vais l’utiliser avec vanilla Javascript dans ce tutoriel, je vais télécharger le vanilla.filterizr.min.jsfichier et le placer dans mon theme-folder/assets/js/dossier. L’endroit où vous placez la bibliothèque dépend bien sûr entièrement de vous, ajustez simplement le chemin plus bas.
Nous aurons également besoin d’un autre fichier Javascript pour initialiser et décider des options. Je vais créer un fichier theme-folder/assets/js/filtering-main.js. Nous reviendrons sur ce dossier ultérieurement. Ce n’est bien sûr pas nécessaire si vous l’implémentez dans un bloc Gutenberg personnalisé.
Pour que WordPress inclue les scripts, nous devons mettre les deux scripts en file d’attente dans le wp_enqueue_scriptscrochet. Cela peut être ajouté quelque part dans le fichier functions.php. Ainsi:
add_action('wp_enqueue_scripts', function() {
wp_enqueue_script('filterizr', get_template_directory_uri(). '/assets/js/vanilla.filterizr.min.js', [], false, true);
wp_enqueue_script('filtering-script', get_template_directory_uri(). '/assets/js/filtering-main.js', ['filterizr'], false, true);
});Ajustez les noms de fichiers et/ou les chemins en fonction de votre projet/thème. Le code ci-dessus met en file d’attente le script vanilla filterizR, et deuxièmement le filtering-main.jsscript qui a une dépendance au script filterizR. Cela garantit que le script d’initialisation est chargé après la bibliothèque nécessaire.
Rendu du modèle
La prochaine étape consiste à avoir un endroit où nous voulons rendre cette liste de messages. Cela dépend entièrement de vous. Pour rester simple dans ce tutoriel, je vais utiliser un modèle de page dans mon thème. Si vous l’implémentez dans un bloc Gutenberg, vous pouvez le rendre soit avec PHP (pour les blocs dynamiques), soit avec Javascript dans la saveméthode du bloc. L’important est de restituer correctement le code HTML entourant les publications et les filtres.
Rendu des filtres
Je vais créer un modèle de page template-filters.phpdans mon dossier de thème et ajouter mon code PHP pour y rendre la sortie.
Dans ce didacticiel, nous supposons que nous voulons rendre les publications dans un type de publication personnalisé. Vous pouvez le faire avec des publications et des catégories standard, mais les publications deviendront généralement assez nombreuses, ce qui n’est pas réalisable pour ce type d’affichage. Supposons par exemple un type de publication personnalisé pour les employés avec une taxonomie personnalisée connectée pour le service. Je ne montrerai pas comment ajouter le type de publication personnalisé dans ce didacticiel, gardez simplement à l’esprit que le nom du type de publication est employeeset que le nom de la taxonomie personnalisée est department. Changez les noms de votre type de publication et de votre taxonomie. Si vous ne savez pas comment ajouter un type de publication personnalisé, j’ai un tutoriel sur la création de types de publication et de taxonomies personnalisés.
Dans mon modèle, je commence par générer les filtres. Je vais récupérer tous les termes non vides dans ma taxonomie personnalisée en utilisant [get_terms](https://developer.wordpress.org/reference/functions/get_terms/)()et les ajouter dans une liste non ordonnée.
Avant de générer les éléments pour chaque terme de la taxonomie, je m’assurerai de créer un élément pour "Tous" (ligne #6). Pour que le filtrage FilterizR fonctionne, nous devons fournir l’attribut de données "data-filter " à chaque élément de filtre. Le contenu doit signifient de manière unique une valeur de filtrage unique, dans notre cas le slug du terme (vous pouvez utiliser l’ID de terme ou autre chose si vous le souhaitez).Cela signifie que je dois également ajouter les slugs du terme en tant qu’attributs de données aux messages (voir plus tard) donc FilterizR peut savoir quels messages appartiennent à quel filtre.
Avec le code ci-dessus, vous devriez obtenir une liste avec "Tous" suivi de tous les termes non vides. Super!
Maintenant, juste en dessous, je vais commencer à rendre les messages.
Rendre les messages
Lors du rendu des messages, vous devez vous rappeler deux choses. L’une consiste à envelopper tous les messages dans un conteneur, auquel je donnerai le nom de la classe filter-container. Cette classe est ce que nous devons cibler avec Javascript pour faire fonctionner FilterizR. Et deuxièmement, chaque élément doit avoir un attribut de données "data-category" qui répertorie tous les termes séparés par une virgule. Les valeurs ici doivent correspondre aux valeurs que vous avez générées dans l’ data-filterattribut " " des filtres.
J’interroge tous les messages du type de message personnalisé avec [WP_Query](https://developer.wordpress.org/reference/classes/wp_query/)et parcourt les messages. Ce que vous affichez par publication dépend entièrement de vous, mais l’exemple ci-dessous affiche l’image en vedette, le titre de la publication et une seule méta de publication personnalisée pour le titre du poste. Tous les liens intérieurs enveloppés qui vont à l’employé unique.
La requête à la ligne #2-7s’assure que je récupère tous les messages publiés des employés de type post, classés par ordre alphabétique. Avant de rendre l’habillage divde chaque article, à la ligne #13, j’utilise [wp_get_object_terms](https://developer.wordpress.org/reference/functions/wp_get_object_terms/)()pour récupérer tous les termes attribués à cet article. En paramètre, je ne demande que les slugs des termes. Le retour est un tableau de tous les slugs de terme attribués. J’utilise ensuite la fonction PHP [implode](https://www.php.net/manual/en/function.implode.php)()pour créer une chaîne à partir de tous les éléments du tableau séparés par une virgule. Ceci est renvoyé comme data-categoryattribut requis à la racine div– ce qui fait fonctionner les filtres.
En ce qui concerne le contenu de chaque publication, la sortie est assez standard. Nous générons l’image sélectionnée de la publication en utilisant une taille d’image personnalisée (‘ employees-thumb‘), le titre de la publication et la valeur d’une seule méta de publication personnalisée (pour le titre du poste). Tout est enveloppé dans un lien qui mène à la vue unique de cet employé. J’ai également ajouté des classes et des wrappers pour faciliter le ciblage avec CSS. La sortie de chaque élément dépend bien sûr entièrement de vous.
À ce stade, le rendu PHP devrait être terminé. Vous êtes invités à styliser et à lui donner une belle apparence, mais ne vous embêtez pas à styliser les colonnes. FilterizR générera des colonnes (flexbox) pour vous. La prochaine étape consiste en fait à initialiser le script de filtrage !
Initialisation du script de filtre
La dernière partie est l’édition du filtering-main.jsscript. Nous devons simplement dire à FilterizR d’initialiser le filtrage sur notre contenu rendu. Il y a cependant quelques éléments à garder à l’esprit ici :
FilterizR s’assurera que le conteneur d’emballage de tous les messages est automatiquement dimensionné pour s’adapter à la vue. Par exemple, si le filtre actif affiche les publications sur une ligne et que nous cliquons sur un autre filtre comportant quatre lignes, le conteneur se redimensionnera automatiquement à la bonne hauteur. Assurez-vous ainsi que tout contenu qui vient après ne soit pas caché derrière. Mais pour que ce redimensionnement automatique fonctionne, toutes les images doivent avoir été chargées en premier. Dans certains cas, le script peut être chargé et exécuté avant la fin du chargement de chaque image, ce qui entraîne la réduction automatique du conteneur à une hauteur de 0. Ce n’est pas bon. Nous devons donc placer le code d’initialisation dans une fonction où nous savons que les images sont chargées. Pour le Javascript vanille, c’est window.onload. Pour jQuery, vous utiliseriez $(window).load().
Deuxièmement, nous voulons nous assurer que notre script n’initialise FilterizR que s’il existe effectivement un conteneur filtrable. Si nous initialisons FilterizR et que la page actuelle n’a pas la classe wrapper nécessaire, cela entraînera une erreur Javascript. Nous pouvons résoudre ce problème en vérifiant d’abord si la classe de conteneur existe. En Javascript vanille, vous pouvez utiliser document.getElementById()ou document.getElementsByClassName(). Voir l’exemple ci-dessous. Pour jQuery, vous utiliseriez jQuery('<selector>').lengthpour vérifier cela.
La façon d’initialiser FilterizR par vanilla Javascript est de créer une nouvelle instance de Filterizr, en fournissant le sélecteur de conteneur comme premier paramètre et éventuellement un objet de paramètres comme deuxième paramètre. Voici un exemple des plus basiques :
L’initialisation a lieu à la ligne #4. Nous fournissons le nom de la classe au conteneur qui entoure nos messages avec un point devant, signifiant un sélecteur de classe. Avec le code ci-dessus, FilterizR devrait maintenant reprendre vos messages et les placer dans des colonnes. Parce que nous avons utilisé les attributs de données appropriés, les filtres devraient également fonctionner automatiquement !
Personnalisation des options de FilterizR
J’ai juste quelques derniers conseils pour optimiser FilterizR, ce que nous pouvons faire en fournissant un objet de paramètres. Je vous recommande de jeter un œil aux options possibles pour FilterizR pour voir ce que vous pouvez faire. Vous pouvez contrôler la vitesse d’animation, le type d’animation et bien plus encore !
Afin que les colonnes fonctionnent de manière optimale dans des tailles réactives, j’ai constaté que le réglage layoutsur ‘ sameWidth‘ permet à FilterizR de mieux fonctionner avec des publications de hauteurs différentes. Il en résulte un style "Maçonnerie". Dans notre exemple, nous répercutons le contenu supplémentaire après l’image, ce qui peut entraîner des hauteurs variables (les noms peuvent être plus longs, le forçant sur plusieurs lignes). Cela peut entraîner un comportement étrange.
Par défaut, chaque élément n’a pas d’espace entre les autres. Si vous vouliez un espacement entre chaque élément, vous pouvez définir la taille de l’écart en px pour gutterPixels. Dans l’exemple ci-dessus, j’ai utilisé 10px comme taille d’écart. PS : la taille de l’espace est également ajoutée au conteneur d’emballage. Ce n’est peut-être pas toujours ce que vous voulez. Pour remplacer cela, j’ai simplement ajouté un style padding: 0!importantà .filter-container.
Voici le code ajusté pour initialiser FilterizR avec mes options :
Avec quelques styles mineurs, le résultat ressemble à ceci :
Gardez à l’esprit que le filtrage n’est qu’une des choses que FilterizR peut faire ! Consultez les exemples sous "Tutoriels" sur leur page d’accueil. Vous pouvez ajouter des commandes pour trier, mélanger et/ou rechercher. Et vous avez également plus d’options pour contrôler la mise en page.