Comment ajouter un filtre de taxonomies Ajax à la recherche WordPress

La recherche WordPress par défaut présente aux visiteurs une longue liste d'articles sans moyen de la réduire.

Lorsqu'ils ne peuvent pas filtrer par catégorie, étiquette ou type d'article, la plupart abandonnent et retournent sur Google.

L'ajout d'un filtre de taxonomie Ajax à votre recherche WordPress résout ce problème. Il permet aux visiteurs de réduire instantanément les résultats par catégorie, étiquette, champ personnalisé ou type d'article, ce qui peut conduire à une expérience plus conviviale.

Dans ce guide, je vais vous montrer comment ajouter un filtre de taxonomie Ajax à votre site WordPress. À la fin, vous pourrez offrir à vos visiteurs une expérience de recherche rapide et intuitive.

Pourquoi utiliser un filtre de taxonomie Ajax dans la recherche WordPress ?

La recherche basée sur Ajax est plus rapide et offre une meilleure expérience utilisateur que la fonction de recherche WordPress par défaut. Ajax signifie que les résultats se mettent à jour sur la page en temps réel, sans rechargement complet de la page.

Par exemple, un site Web de concessionnaire automobile pourrait avoir des taxinomies personnalisées pour les types de véhicules, les gammes de prix, les modèles, etc. Avec les filtres Ajax, les visiteurs peuvent rapidement affiner leurs options et trouver exactement ce dont ils ont besoin sans recharger la page.

Vous pouvez ajouter des filtres similaires à votre propre site WordPress pour améliorer la navigation et aider les utilisateurs à trouver du contenu plus facilement.

En coulisses, les taxinomies WordPress (comme les catégories et les étiquettes) facilitent également l'organisation du contenu de manière structurée pour les propriétaires de sites.

Cependant, la recherche WordPress par défaut n'est pas très puissante et n'offre pas la possibilité de filtrer le contenu en fonction des taxinomies, entre autres choses. Si vous utilisez des taxinomies personnalisées sur votre site, la recherche par défaut est encore moins performante.

C'est là que vous aurez besoin d'un plugin WordPress pour vous aider. Dans les sections suivantes, je couvrirai deux méthodes pour ajouter un filtre de taxonomie Ajax à une recherche WordPress.

La première méthode améliore l'algorithme de recherche WordPress lui-même afin qu'il inclue les taxinomies dans les résultats de recherche. La seconde méthode ajoute une interface de filtre Ajax visible qui s'intègre nativement à la première méthode, afin que les visiteurs puissent affiner les résultats en un clic.

Cliquez simplement sur les liens ci-dessous pour accéder à votre section préférée :

Prêt ? Commençons.

Méthode 1 : Ajouter des taxinomies Ajax à la recherche WordPress à l'aide de SearchWP

La façon la plus simple d'ajouter des taxinomies Ajax à la recherche WordPress est d'utiliser SearchWP. C'est le meilleur plugin de recherche pour WordPress et il permet aux utilisateurs de trouver facilement ce qu'ils cherchent sur votre site Web.

Il va au-delà de la simple utilisation du contenu de vos articles de blog et de vos pages pour rechercher des éléments. SearchWP utilise des champs personnalisés, des taxinomies, des attributs de produits WooCommerce, des fichiers texte, des tables personnalisées, et plus encore.

Pour plus d'informations sur le plugin, consultez notre revue complète de SearchWP.

Étape 1 : Inscrivez-vous à SearchWP

Tout d’abord, visitons le site web de SearchWP et créons un compte. Le plan Standard (99 $/an, 1 site) couvre tout ce dont vous avez besoin pour cette méthode.

Si vous prévoyez d’ajouter une interface de filtre côté client (la Méthode 2 ci-dessous utilise WPFilters, également de SearchWP), le pack All Access (399 $/an) inclut les deux plugins et vous évite de les acheter séparément.

Après cela, vous pouvez télécharger et installer le plugin sur votre site. Si vous avez besoin d’aide, consultez notre guide sur comment installer un plugin WordPress.

Après l’activation, vous devrez vous rendre dans SearchWP » Paramètres depuis le panneau d’administration de WordPress. À partir de là, entrez simplement la clé de licence, que vous trouverez facilement dans votre espace client.

Étape 2 : Créez votre algorithme de recherche

Vous pouvez maintenant aller dans SearchWP » Algorithme depuis le tableau de bord WordPress.

À partir d'ici, vous pouvez modifier la pertinence de la recherche pour votre site Web. Par exemple, vous pouvez augmenter les poids pour le titre, le contenu, le slug et l'extrait pour aider les utilisateurs à trouver ce qu'ils cherchent.

Pour ajouter des taxonomies à la pertinence de la recherche, vous pouvez cliquer sur le bouton ‘Ajouter/Supprimer des attributs’.

Ceci ouvrira une nouvelle fenêtre.

Vous pouvez cliquer sur le menu déroulant « Taxonomies » et sélectionner si vous souhaitez inclure les catégories, les étiquettes, les formats ou tous dans la recherche WordPress.

Après avoir sélectionné les taxonomies, n'oubliez pas de cliquer sur le bouton « Terminé ».

Vous devriez maintenant voir les taxinomies pour votre algorithme de recherche de publications de blog WordPress. Vous pouvez utiliser le curseur pour augmenter leur pertinence dans les recherches WordPress.

Vous pouvez également cliquer sur le bouton « Modifier la règle » pour déterminer quel contenu peut et ne peut pas apparaître dans les résultats de recherche.

Par exemple, SearchWP inclura toutes les catégories de votre site Web. Vous pouvez supprimer les catégories dont vous ne souhaitez pas que le contenu apparaisse ou ajouter plusieurs conditions pour personnaliser les résultats de recherche.

N'oubliez pas de cliquer sur le bouton « Terminé » une fois que vous avez terminé.

Vous pouvez maintenant modifier l'algorithme de recherche pour vos pages, fichiers multimédias, produits WooCommerce, et plus encore pour qu'ils apparaissent dans SearchWP.

Désormais, chaque fois qu'un visiteur recherche des pages et des articles sur votre site Web, SearchWP inclura les taxonomies lors du processus de recherche.

Méthode 2 : Ajouter une interface de filtre front-end avec WPFilters

La Méthode 1 a rendu l’algorithme de recherche WordPress conscient des taxonomies côté serveur. La Méthode 2 ajoute l’interface de filtre visible avec laquelle les visiteurs interagissent côté client.

WPFilters est le complément naturel — il est développé par la même équipe que SearchWP et s’intègre à SearchWP dès la sortie de la boîte. Il est livré avec un constructeur par glisser-déposer, vous pouvez donc configurer des cases à cocher, des listes déroulantes, des curseurs et des filtres de recherche sans toucher au code. Il prend également en charge Advanced Custom Fields et tout type de publication personnalisé, ce qui en fait une solution idéale si vous avez créé du contenu personnalisé sur votre site.

Placer l’élément WPFilters dans la barre latérale de vos résultats de recherche (ou toute zone de widget qui s’affiche sur la page des résultats de recherche) permet aux visiteurs de filtrer les résultats de SearchWP en temps réel, sans rechargement de page.

Pour plus de détails, vous pouvez consulter notre avis complet sur WPFilters.

Étape 1 : Installation du plugin WPFilters

Pour commencer, vous devrez créer un compte WPFilters sur le site web de SearchWP. WPFilters est développé par l’équipe de SearchWP, il s’intègre donc nativement à la configuration de SearchWP que vous venez de terminer dans la Méthode 1.

Si vous avez acheté le pack SearchWP All Access dans la Méthode 1, WPFilters est déjà inclus dans votre abonnement — téléchargez simplement le ZIP de WPFilters depuis votre espace compte SearchWP et passez à l’étape 2.

Sinon, cliquez sur le bouton « Obtenir WPFilters maintenant » sur la page produit WPFilters, choisissez un plan et terminez le processus de paiement. Le plan Standard (49 $/an, 1 site) couvre tout ce dont vous avez besoin pour ce tutoriel.

Après l’inscription, vous devrez télécharger le fichier ZIP du plugin sur votre ordinateur et copier votre clé de licence.

Ensuite, vous installerez et activerez le plugin sur votre site WordPress.

Dans votre zone d'administration WordPress, allez dans Plugins » Ajouter un plugin.

Ensuite, vous pouvez cliquer sur le bouton « Télécharger le plugin ».

Dans l’outil de téléchargement de fichiers, cliquez simplement sur le bouton « Choisir un fichier » pour télécharger votre fichier zip WPFilters depuis votre ordinateur. Cliquez sur « Installer maintenant », puis sur « Activer » lorsqu’il apparaît pour terminer l’installation.

Pour plus de détails, consultez notre guide pour débutants sur comment installer un plugin WordPress.

Une fois le plugin actif, WPFilters vous guidera à travers un assistant de configuration pour finaliser la configuration initiale. Je recommande de suivre chaque étape attentivement afin que le plugin soit prêt à l'emploi avant de commencer à créer vos filtres.

Une fois cela fait, vous pouvez cliquer sur « Enregistrer et terminer ».

Étape 2 : Configuration des filtres de taxonomie Ajax

Il est maintenant temps de créer votre premier filtre.

Depuis votre tableau de bord WordPress, allez dans WPFilters » Éléments et cliquez sur « Ajouter » pour créer un nouvel élément de filtre.

Il vous sera demandé de donner un nom à votre élément de filtre.

Choisissez un nom descriptif qui vous aidera à l'identifier plus tard, comme « Filtre de catégorie » ou « Filtre de type de produit ».

Ensuite, vous devrez choisir un type de filtre.

WPFilters vous offre plusieurs options d'affichage parmi lesquelles choisir, notamment :

• Cases à cocher – Idéal pour permettre aux utilisateurs de sélectionner plusieurs options à la fois
• Boutons radio – Idéal lorsque vous souhaitez que les utilisateurs ne choisissent qu'une seule option
• Listes déroulantes – Une option compacte qui fonctionne bien lorsque vous avez de nombreux choix de filtres
• Liste déroulante (Sélection multiple) – Permet aux utilisateurs de choisir plusieurs options dans une seule liste déroulante
• Recherche – Ajoute une zone de recherche pour que les utilisateurs puissent trouver rapidement ce dont ils ont besoin
• Curseur – Idéal pour sélectionner des plages, telles que des prix ou d'autres valeurs numériques
• Bouton Réinitialiser – Permet aux utilisateurs d'effacer tous les filtres appliqués en un seul clic

Pour ce tutoriel, nous utiliserons le type de filtre Case à cocher car il permet aux utilisateurs de sélectionner plusieurs catégories ou étiquettes en même temps. Cela leur offre le plus de flexibilité pour affiner leur recherche.

Les autres types de filtres conviennent à différents usages : utilisez un Curseur pour les plages de prix ou les valeurs numériques, une Liste déroulante lorsqu'une taxonomie a plus de 10 termes et que l'espace vertical est limité, des Boutons radio pour les attributs à valeur unique comme l'ordre de tri, et Recherche lorsqu'il y a trop de termes à parcourir visuellement.

Une fois que vous êtes satisfait du type de filtre, faites défiler vers la section « Source de données ». C'est ici que vous connecterez votre filtre à une taxonomie réelle sur votre site.

Vous pouvez sélectionner parmi toutes les taxonomies disponibles sur votre site WordPress, telles que :

• Catégories – les catégories de contenu WordPress par défaut
• Étiquettes – les étiquettes WordPress par défaut
• Taxonomies personnalisées – toutes les taxonomies personnalisées que vous avez créées pour votre site

Je vous recommande de prendre un moment ici pour réfléchir à la taxonomie qui a le plus de sens pour vos visiteurs. Choisir la bonne rendra votre filtre beaucoup plus utile et intuitif pour les personnes qui naviguent sur votre site.

Étape 3 : Personnalisation de votre élément de filtre

Maintenant que vous avez configuré votre filtre et l'avez connecté à une taxonomie, il est temps de personnaliser son apparence et son comportement sur votre site. WPFilters vous offre une bonne gamme d'options d'affichage pour vous aider à faire correspondre le filtre à la conception de votre site et aux besoins de vos visiteurs.

Dans la section « Conteneur », vous trouverez des options telles que :

• Titre du filtre – affiche un titre au-dessus de votre filtre pour que les visiteurs sachent par quoi ils filtrent.
• Éléments déroulants – permet aux visiteurs d’étendre ou de réduire le filtre, ce qui est utile si vous avez plusieurs filtres sur une page.
• Voir plus/moins – affiche un lien Voir Plus pour réduire votre liste si elle est trop longue.
• Afficher plus après – si vous activez « Voir plus/moins », vous pouvez spécifier le nombre d’éléments à afficher initialement avant d’afficher le lien.
• Mise en page horizontale – dispose vos options de filtre côte à côte au lieu d’être empilées, ce qui peut bien fonctionner pour des mises en page plus larges.

Allez-y et activez ceux que vous souhaitez.

Ensuite, vous pouvez personnaliser la façon dont vos éléments de filtre sont affichés, par exemple :

• Nombre d’éléments – affiche le nombre d’articles disponibles sous chaque terme de filtre, afin que les visiteurs sachent à quoi s’attendre avant de cliquer.
• Afficher les vides – choisissez d’afficher ou non les termes de taxonomie qui n’ont pas de contenu correspondant.
• Hiérarchique – l’activation de l’affichage hiérarchique facilite grandement la navigation dans votre contenu pour les lecteurs, ce qui peut améliorer l’expérience utilisateur.

Voici ce que vous voyez à l’écran :

Une fois que vous êtes satisfait de vos paramètres, cliquez sur « Enregistrer » pour stocker la configuration de votre filtre.

Votre élément de filtre sera alors prêt à être ajouté à n’importe quelle publication ou page de votre site WordPress.

Si vous souhaitez créer un autre élément WPFilters, vous pouvez simplement répéter le processus.

Étape 4 : Intégration de vos filtres dans WordPress

Maintenant que votre élément de filtre est enregistré, il est temps de l’ajouter à votre site pour que les visiteurs puissent l’utiliser.

Pour l’association SearchWP + WPFilters que nous avons configurée dans la méthode 1, l’emplacement le plus utile est le widget de la barre latérale sur votre page de résultats de recherche — c’est là que les résultats de SearchWP apparaissent, et le filtre les affinera en temps réel au fur et à mesure que les visiteurs cliquent.

WPFilters vous offre trois options d’emplacement :

• Widget de barre latérale (recommandé pour le filtrage des résultats de recherche) – apparaît sur chaque page qui utilise votre barre latérale, y compris la page des résultats de recherche.
• Bloc Gutenberg – placez le filtre sur une page spécifique (idéal si vous souhaitez également des pages d’archives filtrées, comme une page de destination « Parcourir par catégorie »).
• Shortcode – collez-le partout où un shortcode est pris en charge, y compris les constructeurs de pages et les widgets classiques.

Pour ajouter le filtre à votre barre latérale, allez dans Apparence » Widgets dans votre zone d’administration.

À partir d'ici, recherchez la barre latérale de votre thème (par exemple, une barre latérale principale ou une barre latérale de recherche) dans la liste des zones de widgets disponibles. Cliquez dessus pour l'agrandir et afficher les widgets existants.

Ensuite, cliquez sur l'icône plus pour ajouter un nouveau widget, puis ajoutez le widget Élément WPFilters.

Dans le panneau des paramètres de l'élément, sélectionnez votre filtre dans le menu déroulant.

Vous pouvez ajouter plusieurs widgets de filtre si vous souhaitez offrir plus d'options de filtrage (un widget par taxonomie fonctionne bien — par exemple, un filtre de catégorie et un filtre d'étiquette côte à côte).

Une fois que vous avez sélectionné votre filtre, cliquez sur « Mettre à jour » ou « Publier » pour enregistrer vos modifications.

Votre filtre de taxonomie Ajax apparaîtra maintenant dans la barre latérale de votre page de résultats de recherche, permettant aux visiteurs de réduire les résultats de SearchWP en temps réel.

Conseils bonus : Autres choses que vous pouvez faire avec SearchWP

Une fois que vous avez ajouté le filtrage Ajax par taxonomie, il existe encore plus de façons d'améliorer votre recherche WordPress avec SearchWP. Voici quelques fonctionnalités supplémentaires qui valent la peine d'être examinées :

🌫️ Utilisez la recherche floue pour une meilleure correspondance

Par défaut, la recherche WordPress ne recherche que les correspondances exactes. Cela signifie que si un visiteur fait une faute de frappe ou utilise une phrase légèrement différente, il pourrait ne pas trouver ce qu'il cherche.

La recherche floue résout ce problème en affichant des résultats suffisamment proches, comme pour rattraper les fautes de frappe ou les formes de mots similaires. C’est un moyen simple de personnaliser votre recherche WordPress pour la rendre plus intelligente.

Consultez notre guide sur comment ajouter la recherche floue dans WordPress pour plus de détails.

📄 Rendez les fichiers PDF consultables

Si vous partagez des PDF sur votre site, comme des manuels, des eBooks ou des brochures, SearchWP peut indexer le contenu de ces fichiers. Cela signifie que lorsqu'une personne utilise votre barre de recherche, les résultats peuvent inclure ce qui est écrit dans les PDF, pas seulement les titres des fichiers.

C’est particulièrement utile pour les sites d’entreprises, les blogs riches en ressources, et même les écoles.

Apprenez-en davantage dans notre guide sur comment ajouter l’indexation et la recherche de PDF dans WordPress.

🛍️ Améliorez la recherche de produits dans WooCommerce

Si vous gérez une boutique en ligne, SearchWP peut également améliorer la recherche de vos produits.

Au lieu de vous fier à la recherche par défaut de WooCommerce, vous pouvez créer une recherche de produits plus intelligente qui priorise les titres, les catégories, les tags, ou même les champs personnalisés. Cela aide les clients à trouver le bon produit plus rapidement, ce qui peut conduire à plus de ventes.

Consultez notre guide sur comment créer une recherche intelligente de produits WooCommerce.

Et pour plus de conseils et d’astuces, vous pouvez consulter notre guide sur comment améliorer la recherche WordPress avec SearchWP.

Questions fréquemment posées sur les filtres de taxonomie Ajax dans WordPress

Avant de conclure, voici quelques questions fréquemment posées par nos lecteurs concernant l'ajout de filtres de taxonomie Ajax dans WordPress.

Ai-je besoin de compétences en codage pour ajouter des filtres Ajax dans WordPress ?

Non, vous n'avez pas besoin de compétences en codage. Les deux méthodes ci-dessus fonctionnent sans code — SearchWP est configuré via son panneau de paramètres, et WPFilters utilise un constructeur par glisser-déposer ainsi qu'un bloc ou un widget Gutenberg.

Ai-je besoin de SearchWP et de WPFilters, ou puis-je n'en utiliser qu'un seul ?

Ils font des choses différentes. SearchWP rend le moteur de recherche WordPress lui-même conscient des taxonomies côté backend. WPFilters ajoute l'interface utilisateur de filtre visible côté frontend. Vous pouvez utiliser SearchWP seul si vous souhaitez simplement de meilleurs résultats de recherche, ou associer les deux pour une expérience de filtrage Ajax complète. Le bundle All Access inclut les deux à un prix unique.

Puis-je utiliser des filtres de taxonomie sur les produits WooCommerce ?

Oui, les filtres de taxonomie fonctionnent très bien pour les boutiques WooCommerce. Vous pouvez permettre aux clients de filtrer les produits par catégories, étiquettes, attributs (comme la taille ou la couleur), et plus encore — similaire à l'expérience de filtrage sur les grands sites de commerce électronique.

Quelle est la différence entre le filtrage Ajax et le filtrage régulier ?

Avec le filtrage Ajax, les résultats se mettent à jour instantanément sans actualiser la page. Le filtrage régulier recharge toute la page chaque fois qu'un utilisateur sélectionne une option, ce qui peut sembler plus lent.

L'ajout de filtres Ajax ralentira-t-il mon site web ?

Non, pas nécessairement. Dans la plupart des cas, les filtres Ajax améliorent l'expérience utilisateur en chargeant uniquement les résultats filtrés au lieu de rafraîchir toute la page. Assurez-vous simplement d'utiliser un plugin bien optimisé.

Améliorez votre site WordPress avec une recherche et un filtrage avancés

J'espère que cet article vous a aidé à ajouter un filtre de taxonomie alimenté par Ajax à votre recherche WordPress sur votre site.

Ensuite, vous voudrez peut-être aussi consulter nos guides sur :

• Comment permettre aux utilisateurs de filtrer les articles et les pages dans WordPress
• Comment créer un portfolio filtrable dans WordPress
• Comment configurer le filtre de produits WooCommerce
• Comment corriger la recherche WordPress qui ne fonctionne pas
• Comment consulter les analyses de recherche dans WordPress

Si vous avez aimé cet article, abonnez-vous à notre Chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.