Le bloc Boucle de requêtes de WordPress est déjà doté d'un panneau Filtres, mais rien de tout cela n'est destiné à vos visiteurs.
Ces taxinomies, auteurs et options de mots-clés se trouvent dans les paramètres du bloc de l'éditeur, où ils décident quels articles la boucle affiche avant même que quiconque ne charge la page.
Cela signifie qu'un blog de voyage avec une grille de 60 articles affiche les mêmes 60 articles à chaque lecteur. Quelqu'un qui prépare un voyage au Portugal doit toujours faire défiler tous les guides du Japon et du Mexique pour trouver celui qu'il cherchait.
Pour ajouter des filtres au bloc Boucle de requêtes de WordPress que les visiteurs peuvent cliquer, vous devez ajouter du code personnalisé ou engager un développeur. Mais un plugin comme WPFilters place un filtre de catégorie à côté de votre Boucle de requêtes, met à jour les résultats sans rechargement de page et vous donne un lien filtré que vous pouvez partager.
Dans cet article, nous vous montrerons comment ajouter des filtres au bloc Boucle de requêtes de WordPress sans codage.
Pourquoi les filtres intégrés du bloc Boucle de requêtes ne suffisent pas
Le bloc Boucle de requêtes affiche une liste dynamique d'articles, de pages ou d'autres contenus sur n'importe quelle page ou modèle.
Vous décidez de ce qui entre dans cette liste à partir des paramètres du bloc, y compris le type d'article, l'ordre et le nombre d'articles affichés par page.
Le panneau Filtres du bloc Boucle de requêtes réduit encore cette liste par catégorie, étiquette, auteur ou mot-clé.
Vous faites ces choix lors de la modification de la page, et les visiteurs ne voient que le résultat.
Il n'y a pas de case à cocher ou de liste déroulante sur le front-end qui permette à un lecteur de changer ce que la boucle affiche.
Les filtres visiteurs placent ces cases à cocher et listes déroulantes sur le front-end, afin que les lecteurs puissent eux-mêmes affiner la boucle.
Pourquoi ajouter des filtres visiteurs à une boucle de requêtes ?
Nous avons remarqué qu'une longue grille de Boucle de requêtes fonctionne bien jusqu'à ce qu'un site dépasse quelques dizaines d'articles.
Quatre problèmes apparaissent une fois que la grille devient longue :
- Les lecteurs ne peuvent pas affiner la liste. Les filtres côté éditeur sont fixes, donc chaque visiteur obtient la même grille, peu importe ce qu'il cherchait.
- Les longues grilles enfouissent votre meilleur contenu. Un lecteur qui doit faire défiler page après page d'articles abandonne souvent avant d'atteindre celui qu'il voulait.
- La voie du code nécessite un développeur. WordPress permet aux développeurs de modifier les résultats de la Boucle de requêtes avec le hook query_loop_block_query_vars, mais cela implique d'écrire et de maintenir du PHP.
- Les rechargements complets de page ralentissent la navigation. Chaque fois qu'un filtre recharge toute la page, le lecteur perd sa place et attend que tout se recharge.
Un plugin de filtre ajoute des filtres cliquables à côté de votre Boucle de requêtes existante, vous n'avez donc pas à modifier ses paramètres ni à écrire de PHP.
Comment ajouter des filtres au bloc Boucle de requêtes de WordPress avec WPFilters
Nous recommandons WPFilters comme moyen le plus simple d'ajouter des filtres de visiteurs à un bloc Query Loop.
WPFilters est le meilleur plugin de filtrage pour WordPress, développé par la même équipe derrière SearchWP.
Il vous permet de créer des filtres à partir des catégories, tags et champs personnalisés que votre site possède déjà, puis de les placer à côté de n'importe quel Query Loop sans écrire de code.
Voici quelques-unes des fonctionnalités qui font de WPFilters un bon choix pour les pages Query Loop :
- Fonctionne avec le bloc Query Loop. WPFilters se connecte automatiquement au bloc Query Loop, il n'y a donc aucun réglage supplémentaire à activer.
- Sept types d'éléments. Vous pouvez choisir parmi Cases à cocher, Boutons radio, Liste déroulante, Liste déroulante (sélection multiple), Curseur, Recherche et Réinitialiser, en fonction de la manière dont vous souhaitez que les visiteurs affinent la liste.
- Pas de rechargement de page. Lorsqu'un visiteur coche un filtre, WPFilters utilise AJAX pour mettre à jour les résultats du Query Loop sur place.
- URL de filtre partageables. Chaque sélection est enregistrée dans l'URL de la page, de sorte qu'un lecteur peut mettre en signet ou partager une vue filtrée.
Cela étant dit, voyons comment vous pouvez utiliser WPFilters pour ajouter des filtres à votre bloc Query Loop.
Étape 1 : Installer et Activer WPFilters
Pour commencer, vous pouvez vous inscrire à un plan WPFilters sur le site Web de SearchWP.
Une fois inscrit, vous pouvez vous rendre dans l'onglet Téléchargements de votre tableau de bord de compte.
À partir de là, téléchargez le fichier ZIP du plugin WPFilters.
Pendant que vous y êtes, copiez également votre clé de licence, car vous en aurez besoin dans un instant.
Ensuite, vous pouvez vous connecter à votre tableau de bord WordPress et installer le plugin.
Si vous n'avez jamais installé de plugin à partir d'un fichier ZIP auparavant, consultez ce guide étape par étape qui vous explique comment faire.
Après l'activation, l'assistant de configuration s'ouvrira. Vous pouvez cliquer sur C'est parti et suivre les instructions à l'écran pour commencer.
Une fois cela fait, WPFilters est prêt et vous pouvez créer votre premier filtre Query Loop.
Étape 2 : Créer un élément de filtre de catégorie
Pour créer le filtre, vous pouvez vous rendre sur WPFilters » Éléments depuis votre tableau de bord WordPress.
À partir de là, cliquez sur le bouton Ajouter en haut de l'écran.
Un nouvel élément s'ouvre avec un titre par défaut, et vous pouvez cliquer sur l'icône du crayon à côté pour le renommer en quelque chose de clair, comme « Filtrer par destination ».
Ensuite, vous pouvez trouver la section Champs de filtre et sélectionner Case à cocher.
Nous aimons les cases à cocher pour les pages Query Loop car elles permettent aux lecteurs de choisir plusieurs catégories à la fois, comme le Portugal et le Japon ensemble.
Après cela, vous pouvez faire défiler jusqu'à la section Source de données et ouvrir la liste déroulante.
Sous le groupe Taxonomies, sélectionnez Catégories (category).
Une fois votre source de données définie, vous pouvez ajuster l'apparence du filtre.
Dans les paramètres du Conteneur, vous pouvez activer le bouton Afficher le titre pour que les visiteurs voient une étiquette au-dessus des cases à cocher.
Les boutons Repliable et Horizontal sont également là, si vous souhaitez un filtre qui se replie ou qui se trouve sur une seule ligne.
Dans les paramètres des Éléments, nous vous recommandons d'activer le Compteur d'éléments, qui indique combien d'articles se trouvent dans chaque catégorie.
Vous pouvez également désactiver Afficher vide, afin que les catégories sans articles restent masquées.
Lorsque vous modifiez ces paramètres, le panneau Aperçu en direct montre à quoi ressemblera le filtre.
Lorsque vous êtes satisfait, cliquez sur Enregistrer.
Étape 3 : Ajouter le filtre à côté de votre bloc Boucle de requêtes
Ensuite, vous pouvez ouvrir la page où vous souhaitez placer le filtre dans l'éditeur de blocs (Gutenberg).
Si la page n'a pas encore de Boucle de requêtes, vous pouvez ajouter un bloc Boucle de requêtes et le configurer pour afficher vos articles.
Après cela, cliquez sur l'outil d'insertion + au-dessus de la Boucle de requêtes et recherchez le bloc Élément WPFilters.
Une fois le bloc sur la page, vous pouvez ouvrir Sélectionner l'élément dans les paramètres du bloc et choisir « Filtrer par destination ».
Y
Vous pouvez placer le filtre au-dessus de la boucle, ou utiliser un bloc Colonnes pour le placer dans une colonne de la barre latérale à côté de la boucle.
Lorsque tout est en place, enregistrez ou publiez la page.
Remarque : Lorsque nous avons testé deux blocs Boucle de requêtes sur une page, les deux ont affiché les mêmes résultats filtrés, car WPFilters applique le filtre à chaque bloc Boucle de requêtes sur la page. Si vous avez besoin d'une deuxième liste qui reste non filtrée, comme une section « Derniers articles », vous pouvez utiliser le bloc Derniers articles à la place.
Si vous préférez ne pas utiliser le bloc, le bouton Intégrer sur l'écran de l'élément vous propose également un shortcode et une option de code PHP.
Étape 4 : Tester vos filtres de Boucle de requêtes
Vous pouvez maintenant visiter la page sur le front-end de votre site et essayer le filtre.
Pour le premier test, cochez la case « Portugal ». La Boucle de requêtes devrait se mettre à jour immédiatement pour afficher uniquement vos articles du Portugal, sans rechargement de page.
Vous remarquerez également que l'URL de la page change pour inclure votre sélection.
Pour le deuxième test, cliquez sur la page suivante des résultats. La page deux devrait toujours afficher uniquement les articles du Portugal, avec la case cochée.
Vous pouvez également copier l'URL et l'ouvrir dans une nouvelle fenêtre de navigateur. La même vue filtrée devrait se charger, ce qui signifie que les visiteurs peuvent la partager ou la mettre en favoris.
Bonus : Ajouter un bouton de réinitialisation ou une recherche par mot-clé
Une fois votre filtre de catégorie fonctionnel, vous pouvez ajouter d'autres éléments à côté.
L'élément Réinitialiser ajoute un bouton qui efface toutes les sélections en une seule fois, ce que nous avons couvert dans notre guide sur la façon d'ajouter un bouton de filtre de réinitialisation dans WordPress.
L'élément Recherche ajoute une boîte de mots-clés, afin que les visiteurs puissent affiner la liste en tapant un mot, comme « plages ».
Lorsque SearchWP est actif sur votre site, cet élément Recherche utilise le moteur de recherche de SearchWP au lieu de la recherche WordPress par défaut.
Foire aux questions
1. Pouvez-vous filtrer le bloc Boucle de requêtes sans plugin ?
Seulement du côté de l'éditeur. Le panneau Filtres du bloc Boucle de requêtes vous permet de choisir quelles catégories, tags, auteurs ou mots-clés la boucle affiche, mais les visiteurs ne peuvent pas modifier ces choix.
Permettre aux visiteurs de filtrer la boucle sans plugin implique d'écrire du PHP personnalisé avec le hook query_loop_block_query_vars.
2. WPFilters fonctionne-t-il avec une Boucle de requêtes qui affiche des produits WooCommerce ?
WPFilters se connecte au bloc Product Template de WooCommerce de la même manière qu'il se connecte à la boucle de requête standard.
Vous pouvez créer le filtre à partir des données produit, comme les catégories de produits (product_cat) dans le groupe Taxonomies sous Source de données.
3. Mes filtres de boucle de requête continueront-ils de fonctionner sur la page suivante des résultats ?
Oui, les filtres sélectionnés restent dans l'URL lorsqu'un visiteur clique sur la page suivante.
La page suivante se charge avec les mêmes filtres appliqués, et les mêmes cases cochées.
4. Puis-je filtrer deux blocs de boucle de requête séparément sur la même page ?
Non, WPFilters applique le filtre à chaque bloc de boucle de requête sur une page, donc deux boucles afficheront les mêmes résultats filtrés.
Si vous avez besoin d'une deuxième liste qui reste non filtrée, vous pouvez utiliser le bloc Derniers articles à la place.
Et ensuite…
Vous avez maintenant un filtre de catégorie à côté de votre bloc de boucle de requête, avec des résultats qui se mettent à jour sans rechargement de page et une URL que vos lecteurs peuvent partager.
Vous voudrez peut-être aussi consulter nos guides sur la façon de filtrer par plusieurs taxonomies dans WordPress et configurer des filtres dans WordPress sans code.
Prêt à laisser vos lecteurs filtrer votre boucle de requête ? Vous pouvez commencer avec WPFilters ici. Chaque plan est accompagné d'une garantie de remboursement de 14 jours.
