Comment créer une recherche avec saisie semi-automatique en direct dans WordPress

Lorsque les visiteurs ne trouvent pas ce qu'ils cherchent, ils ne restent pas : ils cliquent ailleurs, souvent pour de bon.

La recherche WordPress par défaut ne facilite pas les choses. Elle est lente, peu pratique et dépassée : tapez un mot-clé, appuyez sur Entrée, attendez un rechargement complet de la page… pour obtenir des résultats qui ne sont peut-être même pas pertinents.

Imaginez maintenant le contraire… des résultats de recherche qui apparaissent instantanément, dès que le visiteur commence à taper. C'est la magie de la recherche avec saisie semi-automatique en direct (également appelée recherche Ajax). Elle donne une impression de modernité, est sans effort et maintient l'engagement des visiteurs sur votre site.

Dans ce guide, vous apprendrez exactement comment ajouter la recherche avec saisie semi-automatique en direct à WordPress, afin de fournir des résultats ultra-rapides, d'améliorer l'expérience utilisateur et de faire en sorte que les visiteurs naviguent plus longtemps.

Pourquoi ajouter la recherche avec saisie semi-automatique en direct dans WordPress ?

La recherche avec saisie semi-automatique en direct aide les visiteurs à trouver plus rapidement ce qu'ils cherchent sur votre site Web, sans recharger la page. Pendant que les utilisateurs tapent dans la barre de recherche, les résultats apparaissent instantanément dans une liste déroulante, leur permettant de cliquer et d'accéder directement au contenu dont ils ont besoin.

Ce type d'expérience rapide et utile maintient les visiteurs plus longtemps sur votre site WordPress. Ils n'ont pas à deviner le bon mot-clé ni à attendre une page de résultats lente. Et ils sont moins susceptibles de tomber sur une impasse.

Malheureusement, la recherche WordPress est assez limitée par défaut. Elle ne recherche pas toujours dans des éléments tels que les détails des produits ou les types de publication personnalisés, et elle a du mal avec les correspondances exactes.

Parfois, il affiche même une page « aucun résultat trouvé », même lorsque le contenu est présent.

C'est là que la recherche en direct peut être vraiment utile. C'est particulièrement utile pour les blogs, les sites d'actualités et les boutiques en ligne, où les visiteurs veulent trouver quelque chose de spécifique, rapidement.

Si vous voulez faciliter la découverte de votre meilleur contenu par les internautes, l'ajout de la recherche en direct est un moyen simple et efficace de le faire.

Comment ajouter une recherche avec autocomplétion en direct dans WordPress

La façon la plus simple d'ajouter une recherche avec autocomplétion en direct (Ajax) à votre site est d'utiliser un plugin. Dans ce tutoriel, j'utiliserai le plugin gratuit SearchWP Live Ajax Search, qui est l'un des meilleurs plugins de recherche WordPress.

Il fonctionne dès l'installation en améliorant automatiquement tous les formulaires de recherche existants sur votre site, tels que celui dans l'en-tête ou la barre latérale de votre thème. Cela signifie que vous pouvez obtenir des suggestions de recherche en direct instantanément sans avoir besoin de coder ou de modifier des paramètres.

Maintenant, je vais vous expliquer comment créer une recherche avec saisie semi-automatique en direct dans WordPress.

Voici un aperçu rapide de tout ce que je vais couvrir :

• Étape 1 : Installer et activer SearchWP Live Ajax Search
• Étape 2 : Configurer les paramètres de recherche de base
• Step 3: Add the Live Search Bar to Your Site (Optional)
  • Ajouter la recherche avec saisie semi-automatique en direct aux zones prêtes pour les widgets
  • Ajouter la recherche avec saisie semi-automatique en direct à l'aide de l'éditeur de site complet (FSE)
• Étape 4 : Tester et dépanner votre recherche en direct
• Astuce bonus : Mettez à niveau pour une recherche encore plus intelligente (correspondance floue)
• FAQ sur l'ajout de la recherche avec saisie semi-automatique en direct dans WordPress
• Plus de guides pour améliorer la recherche WordPress

Commençons !

Étape 1 : Installer et activer SearchWP Live Ajax Search

Tout d'abord, vous devez installer et activer le plugin SearchWP Live Ajax Search.

Vous pouvez trouver ce plugin directement dans votre tableau de bord WordPress en allant dans Plugins » Ajouter et en recherchant « SearchWP Live Ajax Search ».

Une fois que vous avez trouvé le plugin dans les résultats de recherche, cliquez sur le bouton « Installer maintenant ». Une fois l'installation terminée, cliquez sur « Activer » pour activer le plugin sur votre site.

Pour des instructions d'installation détaillées, consultez notre guide étape par étape sur comment installer un plugin WordPress.

Le plugin est entièrement gratuit et développé par la même équipe que le plugin premium SearchWP. Il fonctionne indépendamment, vous n'avez donc pas besoin d'acheter quoi que ce soit pour commencer avec la fonctionnalité de recherche en direct.

Après l'activation, un nouvel élément de menu ‘SearchWP’ apparaîtra dans votre zone d'administration WordPress. Vous l'utiliserez pour configurer vos paramètres à l'étape suivante.

Étape 2 : Configurer les paramètres de recherche de base

Maintenant que le plugin est installé, vous devez activer la fonctionnalité de recherche en direct.

Allez dans SearchWP » Paramètres dans votre tableau de bord WordPress.

Sur la page des paramètres, vous verrez quelques options différentes pour configurer votre recherche.

Assurez-vous d'être dans l'onglet « Recherche en direct » et recherchez le bouton « Activer la recherche en direct » en haut de la page.

Cliquez simplement sur le bouton pour l'activer, puis assurez-vous de cliquer sur le bouton « Enregistrer » pour sauvegarder vos paramètres.

Une fois activée, la recherche Ajax en direct commencera automatiquement à fonctionner avec vos formulaires de recherche existants sur votre site WordPress.

Le plugin utilise des paramètres intelligents qui fonctionnent bien pour différents types de sites web dès le départ. Par défaut, il recherchera dans les titres et le contenu de vos articles pour fournir des résultats pertinents.

Étape 3 : Ajoutez la barre de recherche en direct à votre site (facultatif)

Le plugin SearchWP Live Ajax Search active automatiquement la recherche en direct sur tous les formulaires de recherche existants de votre thème WordPress.

Cependant, vous voudrez peut-être aussi ajouter une barre de recherche à un nouvel emplacement, comme votre barre latérale, votre pied de page, ou une page de destination personnalisée. Cette étape vous montrera comment faire.

Ajouter la recherche avec saisie semi-automatique en direct aux zones prêtes pour les widgets

Pour ajouter une boîte de recherche aux zones de widgets comme votre barre latérale ou votre pied de page, vous devez aller dans Apparence » Widgets dans votre tableau de bord WordPress.

Cliquez sur le bouton « + » dans la zone de widget, comme la barre latérale ou le pied de page. Ensuite, recherchez le widget de recherche.

Une fois ajouté, vous pouvez personnaliser le texte d'espace réservé.

Par exemple, si vous gérez un site d'actualités, vous pourriez personnaliser le titre du widget avec quelque chose comme « Rechercher les dernières histoires » ou « Trouver des articles d'actualité ».

Ou vous pouvez simplement le laisser tel quel : « Rechercher ».

N'oubliez pas de cliquer sur le bouton « Mettre à jour » pour enregistrer vos modifications. La boîte de recherche en direct apparaîtra maintenant dans votre zone de widget.

Voici à quoi cela ressemble sur mon site de démonstration :

Ajouter la recherche avec saisie semi-automatique en direct à l'aide de l'éditeur de site complet (FSE)

Si vous utilisez un thème basé sur des blocs qui prend en charge l'Éditeur de site complet, vous pouvez alors ajouter des champs de recherche à différentes parties de votre site Web, comme l'en-tête, la barre latérale, et plus encore.

Tout d'abord, allez dans Apparence » Éditeur depuis votre tableau de bord WordPress.

Cela lancera l'Éditeur de site complet.

Ensuite, vous devez ouvrir l'onglet « Modèles ».

À partir de là, cliquez sur le modèle que vous souhaitez modifier, tel que votre en-tête ou un modèle de page.

Les options exactes dépendront du thème que vous utilisez, mais je vous recommande de choisir un modèle d'en-tête ou le menu de navigation afin que la barre de recherche apparaisse sur l'ensemble de votre site Web.

Une fois que vous avez cliqué sur le modèle, vous verrez un éditeur visuel avec des blocs.

Cliquez sur le bouton « + » pour ajouter un nouveau bloc, puis recherchez « Recherche » dans l'outil d'insertion de blocs.

Vous pouvez déplacer le bloc de recherche vers le haut et vers le bas à l'emplacement souhaité dans le modèle.

À partir d'ici, vous pouvez personnaliser l'apparence du bloc de recherche à l'aide du panneau des paramètres du bloc.

Par exemple, vous pouvez ajuster le texte d'espace réservé.

Si vous gérez un blog WordPress, vous voudrez peut-être utiliser quelque chose comme « Rechercher sur le blog » ou « Trouver des articles utiles ». Ou vous pouvez simplement le laisser tel quel « Rechercher ».

Vous pouvez également personnaliser le style de la barre de recherche et les options de mise en page pour qu'ils correspondent au design de votre site.

Une fois que vous êtes satisfait de son apparence, cliquez sur le bouton « Mettre à jour » pour enregistrer vos modifications.

Étape 4 : Tester et dépanner votre recherche en direct

Il est maintenant temps de tester votre nouvelle fonctionnalité de recherche en direct pour vous assurer qu'elle fonctionne correctement.

Je vous recommande d'ouvrir votre site Web dans une fenêtre de navigation privée et de taper quelques caractères dans la zone de recherche.

Si tout fonctionne, vous verrez les résultats apparaître instantanément dans une liste déroulante. Cela signifie qu'Ajax fonctionne correctement.

Il est conseillé de tester votre recherche en direct sur différents appareils, y compris les téléphones et les tablettes, pour vous assurer qu'elle est adaptée aux mobiles. Essayez-la également dans plusieurs navigateurs, tels que Chrome, Firefox et Safari, pour vous assurer que les résultats en direct apparaissent de manière cohérente.

Si la recherche en direct ne s'affiche pas ou ne fonctionne pas comme prévu, les causes les plus courantes sont les problèmes de mise en cache et les conflits de plugins.

Votre navigateur ou votre plugin de mise en cache peut stocker une ancienne version des fichiers de votre site (une version « mise en cache ») pour accélérer les temps de chargement. Parfois, cela peut empêcher le nouveau script de recherche en direct de s'exécuter correctement.

Vider le cache de votre WordPress et le cache de votre navigateur garantit que votre site charge la dernière version de ses fichiers, ce qui résout souvent le problème.

Un bon plugin pour cela est WP Rocket. Il est convivial pour les débutants et vous permet de vider le cache, d'optimiser les scripts et de contrôler le chargement des fichiers pour de meilleures performances.

Pour plus de détails, vous pouvez consulter notre guide sur comment vider le cache WordPress.

Si cela ne résout pas le problème, essayez de désactiver les autres plugins un par un pour vérifier les conflits. Cela peut vous aider à identifier si un autre plugin interfère avec votre recherche en direct.

Pour plus d'astuces de dépannage, veuillez consulter notre guide sur comment corriger la recherche WordPress qui ne fonctionne pas.

Astuce bonus : Mettez à niveau pour une recherche encore plus intelligente (correspondance floue)

Votre nouvelle recherche en direct offre une bien meilleure expérience utilisateur à vos visiteurs. Mais que se passe-t-il si quelqu'un fait une faute de frappe ? Par défaut, WordPress pourrait ne retourner aucun résultat pour « wordpres » au lieu de « wordpress ».

C'est là qu'intervient la recherche floue (fuzzy search), une fonctionnalité puissante disponible dans le plugin premium SearchWP .

La recherche floue aide votre site Web à comprendre ce que vos utilisateurs essaient de trouver, même s'ils font des fautes d'orthographe ou utilisent des mots partiels.

Par exemple, si quelqu'un recherche « vntage furniture », un site avec la recherche floue lui montrera toujours des résultats pertinents pour « vintage furniture ».

Cela évite aux utilisateurs de tomber sur une impasse sans résultats et les aide à trouver du contenu, améliorant l'expérience utilisateur et les maintenant sur votre site.

Pour des instructions étape par étape, vous pouvez consulter notre guide sur comment ajouter une recherche floue dans WordPress.

FAQ sur l'ajout de la recherche avec saisie semi-automatique en direct dans WordPress

Je reçois beaucoup de questions de nos lecteurs sur la fonctionnalité de recherche WordPress, j'ai donc rassemblé les réponses aux plus courantes.

Quel est le meilleur plugin de recherche WordPress ?

Pour une fonctionnalité de recherche en direct, je recommande SearchWP Live Ajax Search car il est gratuit et fonctionne parfaitement dès le départ.

Si vous avez besoin de fonctionnalités plus avancées comme la recherche par champs personnalisés ou des analyses détaillées, alors le plugin premium SearchWP est excellent.

Comment puis-je ajouter l'autocomplétion aux champs d'adresse dans WordPress ?

L'autocomplétion d'adresse est différente de la recherche de contenu. Elle utilise des services comme l'API Google Places pour suggérer de vraies adresses pendant que les utilisateurs tapent.

Vous aurez besoin d'un plugin de formulaire comme WPForms ou Gravity Forms qui inclut des fonctionnalités d'autocomplétion d'adresse. Cela se connecte aux services de cartographie pour fournir des suggestions d'adresses postales, ce qui est distinct de la recherche du contenu de votre site.

Puis-je créer un formulaire qui permet aux utilisateurs de rechercher dans une catégorie spécifique ?

Si vous souhaitez ajouter un menu déroulant pour que les utilisateurs puissent rechercher par catégorie, vous aurez besoin du plugin SearchWP Pro.

Le plugin gratuit SearchWP Live Ajax Search (celui que nous couvrons dans ce guide) affichera les noms de catégories dans les résultats en direct, mais il ne vous permettra pas de créer un formulaire de recherche complet avec des filtres de catégorie.

Pour obtenir cette fonctionnalité, vous devrez passer à la version complète du plugin SearchWP et suivre notre tutoriel sur comment rechercher par catégorie dans WordPress.

Comment puis-je ajouter une fonctionnalité de recherche à mon site WordPress ?

La plupart des thèmes WordPress incluent un widget de recherche intégré que vous pouvez ajouter à votre menu, barre latérale, en-tête ou pied de page.

Pour plus de détails, consultez notre guide sur comment ajouter une barre de recherche à votre menu WordPress.

Plus de guides pour améliorer la recherche WordPress

J'espère que ce guide vous a aidé à ajouter une recherche avec autocomplétion en direct à votre site WordPress.

Vous voudrez peut-être aussi consulter nos autres guides connexes pour améliorer la recherche de votre site :

• Comment rechercher par catégorie dans WordPress
• Comment ajouter l'indexation et la recherche de PDF dans WordPress
• Comment rendre les commentaires de votre blog consultables dans WordPress
• Comment inclure des types de publication personnalisés dans les résultats de recherche WordPress
• Comment exclure des pages, des auteurs spécifiques et plus encore de la recherche WordPress
• Comment ajouter la recherche WordPress à la page d’archives du blog
• Comment ajouter un effet de bascule de recherche dans WordPress
• Comment voir les analyses de recherche dans WordPress (moyens faciles)

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.