Via cette solution de tri, l’utilisabilité de votre site Web s’en trouvera fortement améliorée, en simplifiant la navigation et en réduisant le temps de recherche. Dans ce tutoriel, vous trouverez les codes sources, les instructions et nos conseils pour parvenir à filtrer vos custom posts via les taxonomies des custom post types WordPress.
Quelles fonctions WordPress utiliser ?
WordPress est votre ami. Vous avez besoin de quelques unes de ses fonctions :
- register_post_type : vous permet de créer un système d’articles spécifiques à une thématique donnée,
- register_taxonomy : permet de créer une classification d’articles,
- wp_dropdown_pages : permet l’affichage des pages de votre site sous la forme d’une liste déroulante,
- get_terms : permet d’obtenir les termes d’une classification (taxonomie),
- get_term_by : permet de définir quelles informations des termes de la taxonomie définis au dessus, vous souhaitez voir remonter de la base de données en front-end.
Et c’est parti.
Pour commencer
On commence avec la création de vos customs post types. Leur intitulé dépend du contenu de votre site. Ici, nous prendrons comme exemples : livres, poissons, arbres, animaux, autres.
Localisez votre fichier functions.php se trouvant à la racine de votre thème WordPress. Si vous n’en avez pas, créez-le.
Mettez en place vos custom post types et vos custom taxonomies
- Dans votre fichier functions.php, commencez par créer les customs post types Livres, Poissons, Arbres, Animaux et Autres via la fonction
register_post_type
, - Toujours dans votre fichier functions.php, créez les taxonomies (les classifications d’articles) qui correspondent aux customs post types. Par exemple, nos taxonomies pourraient se nommer
Genre_NomDuCustomPostType
.
Affecter vos post types à des modèles de pages
- Constituez les modèles de pages relatifs à chaque custom post type servant à afficher la liste des custom posts. Afin de pouvoir filtrer nos custom posts, nous les présenterons sous la forme d’une liste n’affichant que le titre de ces derniers. Dans chacune des balises
<li>
, il vous faut insérer les termes de la taxonomie du custom post. Cela est nécessaire afin de pouvoir appliquer la propriété CSSdisplay:none
via JQuery (step 4) lorsque le filtre est activé par l’utilisateur.
- Créez les pages de vos customs post types via la manager WordPress, à partir des templates créés.
Step 2 : Création de la liste déroulante des pages
Nos classifications d’articles sont établies, A présent, nous souhaitons afficher les pages relatives à ces dernières sous la forme d’une liste déroulante dans la sidebar afin que l’utilisateur puisse sélectionner la liste d’articles qu’il souhaite consulter. Toujours suivant notre exemple, ici nos listes d’articles sont : livres, poissons, arbres, animaux et autres. Via la fonction wp_dropdown_pages
, nous composons notre liste de pages dans functions.php
:
Dans vos modèles de pages, vous devez appeler en sidebar la fonction nouvellement créée afin d’afficher la liste déroulante :
Votre liste déroulante des pages de votre site est désormais visible en sidebar.
Step 3 : Création des filtres de nos listes d’articles à l’aide des custom taxonomies WordPress
Afin de créer notre système de filtres, nous devons faire appel aux termes des taxonomies précédemment créées.
Nous souhaitons afficher les termes relatifs à la taxonomie d’un custom post type, sous la forme d’une liste.
Pour cela, vous devez au préalable appeler les termes de votre taxonomie via la fonction get_terms
et déterminer quelles données de vos termes vous souhaitez voir remonter en front-end. Dans notre cas, nous souhaitons exposer le nom des termes, le slug et le nombre d’occurrences d’items par terme à l’aide de la fonction get_term_by
.
Dans votre fichier functions.php
, coller les lignes de codes suivantes :
Dans vos modèles de pages, vous devez appeler en sidebar la fonction ci-dessus afin de déployer la liste des filtres constituée des termes de nos custom taxonomies :
Le système de filtrage des custom posts est maintenant visible dans votre sidebar.
Step 4 : Afficher les custom posts relatifs au filtre sélectionné via JQuery
Notre système de filtres ne fonctionnerait pas sans l’ajout d’une surcouche JQuery. Rappelez-vous, nous avons créé nos listes de custom posts au sein desquels nous avons inséré les termes de la taxonomie à laquelle ils appartiennent. Grâce à cela, nous allons pouvoir cacher les custom posts n’appartenant pas au filtre sélectionné par l’utilisateur en leurs appliquant la propriété display:none
. Créez un fichier filtre.js
et copiez-collez le code suivant :
Via les quelques lignes de codes ci-dessus, vous pourrez également appliquer au filtre sélectionné un état « actif » via l’ajout de la class actif
.
Step 5 : on charte le tout via CSS
Et le tour est joué.