Imaginez : un visiteur arrive sur votre site, tape une question dans la barre de recherche et appuie sur Entrée. Il attend le rechargement de la page. Il parcourt une simple liste de résultats. Puis il repart.
Nous avons vu ce schéma se répéter sur d'innombrables sites, et le plus frustrant est que la plupart des propriétaires de sites ignorent que cela se produit.
Le problème n'est pas que votre contenu manque. Le problème est que WordPress n'a pas de recherche instantanée intégrée.
Chaque formulaire de recherche par défaut fonctionne de la même manière : le visiteur soumet une requête, WordPress recharge la page et les résultats apparaissent. C'est lors de ce rechargement que vous perdez des gens.
La bonne nouvelle est que vous pouvez ajouter la recherche instantanée à WordPress gratuitement, sans clés API, sans compte cloud et sans toucher une seule ligne de code.
Dans cet article, nous allons vous montrer comment ajouter la recherche instantanée à WordPress gratuitement.
Qu'est-ce que la recherche instantanée dans WordPress ?
La recherche instantanée, également appelée recherche AJAX ou recherche au fur et à mesure de la frappe, affiche les résultats dans une liste déroulante sous le formulaire de recherche pendant que le visiteur tape.
Il n'y a pas de touche Entrée, pas de rechargement de page, pas d'attente. Les résultats se mettent à jour à chaque frappe.
Par exemple, tapez simplement « con » dans une barre de recherche instantanée activée, et vous verrez immédiatement apparaître des options telles que « Contactez-nous », « Guide du marketing de contenu » et « Chaise contour » sous le champ de saisie en temps réel.
Pour les visiteurs, l'expérience est familière car c'est ainsi que fonctionne la recherche sur Google, YouTube et la plupart des sites Web modernes. Lorsque votre site offre le même retour d'information instantané, les visiteurs sont plus susceptibles de continuer à chercher au lieu de repartir.
Pourquoi votre site WordPress a besoin de la recherche instantanée
Ajouter une recherche instantanée à votre site Web n'est pas seulement une question de suivi des tendances technologiques.
Voici quelques façons dont la recherche instantanée vous permet de mieux servir vos clients et vous aide à garder une longueur d'avance sur vos concurrents :
- Résultats rapides : Les utilisateurs voient les résultats instantanément lorsqu'ils tapent, ce qui accélère considérablement le processus de recherche. Cela leur permet de savoir si vous avez ce qu'ils recherchent. En respectant leur temps, vous valorisez vos clients.
- Taux de rebond réduits : Des résultats rapides et pertinents maintiennent les utilisateurs engagés et intéressés. Cet engagement réduit les chances qu'ils quittent votre site par frustration, diminuant ainsi les taux de rebond de votre site.
- Conversions accrues : Des recherches plus rapides aident les utilisateurs à prendre des décisions plus rapidement. Cette vitesse peut entraîner des taux de conversion plus élevés, car les utilisateurs sont plus susceptibles d'effectuer des achats ou des inscriptions sans hésitation.
- Accessibilité améliorée : La recherche instantanée est particulièrement bénéfique pour les utilisateurs qui ne se souviennent peut-être pas des termes exacts ou de l'orthographe correcte de ce qu'ils recherchent sans la requête complète. Il leur est ainsi plus facile et plus rapide de trouver les articles qu'ils désirent.
- Expérience utilisateur améliorée : La recherche instantanée transforme l'expérience de recherche en offrant un parcours interactif et réactif. Cette approche moderne rend votre site Web plus dynamique et convivial.
- Les outils payants créent des coûts et une complexité inutiles : Nous avons travaillé avec de nombreux propriétaires de sites qui ont examiné des services tels qu'Algolia ou ElasticPress et se sont retirés car la configuration de l'API, la tarification à l'usage et le stockage externe des données semblaient excessifs pour leurs besoins. Vos données doivent rester sur votre propre serveur.
Prêt à résoudre ce problème ? Voyons comment.
Comment ajouter la recherche en direct à WordPress gratuitement
Une fois que vous avez décidé d'ajouter la recherche instantanée à votre site Web, le reste est facile ! Tout ce que vous avez à faire est d'utiliser le plugin gratuit SearchWP Live Ajax Search.
C'est un puissant plugin de recherche WordPress qui rend la tâche complexe d'ajouter la recherche instantanée à WordPress très facile et conviviale pour les débutants.
N'importe qui peut ajouter la recherche instantanée à son site Web WordPress en utilisant le plugin Live Ajax Search en quelques clics ; aucune connaissance en codage n'est requise.
Voyons comment ajouter la recherche instantanée à WordPress gratuitement, étape par étape.
Étape 1 : Installer le plugin SearchWP Live Ajax Search
Pour commencer, allez dans Extensions » Ajouter depuis votre tableau de bord WordPress.
À partir d'ici, tapez « SearchWP Live Ajax Search » dans le champ de recherche et trouvez le plugin par SearchWP.
Cliquez sur Installer maintenant, puis sur Activer une fois l'installation terminée.
Vous ne savez pas comment installer un plugin ? Consultez ce guide pour débutants sur l'installation d'un plugin WordPress.
Une fois le plugin actif, vous verrez la page des paramètres.
Vous remarquerez que le bouton Activer la recherche instantanée sera activé par défaut.
Étape 2 : Créer un formulaire de recherche
Ensuite, il est temps de créer votre premier formulaire de recherche instantanée.
Pour commencer, vous pouvez aller dans SearchWP » Formulaires de recherche depuis le tableau de bord WordPress.
Ici, vous pouvez ajouter de nouveaux formulaires ou sélectionner des formulaires existants.
Pour commencer, cliquez sur Ajouter pour créer votre premier formulaire de recherche instantanée.
Après cela, donnez un nom approprié à votre formulaire de recherche. Dans ce cas, appelons-le « Recherche d'accueil ».
Ensuite, vous pouvez choisir un thème pour votre formulaire de recherche parmi les thèmes de mise en page prédéfinis.
Après avoir sélectionné une mise en page, vous pouvez modifier davantage le formulaire.
Personnalisez simplement le style du formulaire de recherche pour qu'il corresponde à l'esthétique de votre site. Vous pouvez ajuster tout, des couleurs aux tailles de police.
Lorsque vous avez terminé, cliquez sur Enregistrer pour finaliser la création de votre formulaire de recherche instantanée.
C'est tout, votre formulaire de recherche est prêt.
Consultez notre guide sur comment ajouter une boîte de recherche à une page WordPress pour une présentation complète.
Étape 3 : Personnaliser l'apparence des résultats de recherche
Vous pouvez également personnaliser l'apparence des résultats de recherche pour vous assurer qu'ils s'affichent comme vous le souhaitez.
Pour ce faire, naviguez simplement vers SearchWP » Paramètres depuis le tableau de bord WordPress.
Ensuite, vous pouvez faire défiler vers le bas pour choisir un thème.
SearchWP propose 4 thèmes de mise en page prédéfinis pour l'apparence des résultats.
Ensuite, vous pouvez faire défiler vers le bas jusqu'à la section Résultats.
Ici, vous pouvez définir la position du panneau de résultats par rapport au formulaire de recherche, ajuster le nombre de résultats affichés par page, définir le nombre minimum de caractères avant que la recherche instantanée ne se déclenche, et personnaliser le message que les visiteurs voient lorsqu'aucun résultat n'est trouvé.
La section Style personnalisé ci-dessus contrôle le style visuel de chaque résultat : taille de l'image, couleur du titre et (si WooCommerce ou EDD est actif) style du prix et du bouton ajouter au panier.
Lorsque vous avez terminé, faites simplement défiler vers le haut.
Cliquez ensuite sur « Enregistrer » pour appliquer les modifications.
Étape 4 : Affichage du formulaire de recherche
Maintenant que vous avez créé votre premier formulaire de recherche instantanée et personnalisé l'apparence des résultats. L'étape suivante consiste à l'afficher sur votre site web.
Il existe plusieurs façons d'ajouter des formulaires de recherche à votre site web. Voyons comment ajouter un formulaire de recherche instantanée à WordPress à l'aide du bloc Gutenberg.
Pour ce faire, modifiez la page où vous souhaitez afficher le formulaire de recherche.
Ensuite, trouvez l'emplacement souhaité et cliquez sur le bouton + Ajouter un bloc. Après cela, recherchez le bloc « Formulaire SearchWP » et sélectionnez-le.
Ensuite, vous devrez choisir le formulaire que vous avez créé pour l'afficher à cet endroit dans le menu déroulant « Sélectionner un formulaire ».
Lorsque vous avez terminé, cliquez simplement sur le bouton Enregistrer ou Mettre à jour et rendez le formulaire de recherche en direct disponible pour vos visiteurs.
Maintenant, confirmons que tout fonctionne. Pour ce faire, vous pouvez visiter le front-end de votre site et cliquer sur n'importe quel formulaire de recherche.
Commencez à taper une requête partielle et regardez le menu déroulant des résultats apparaître sous le champ de saisie au fur et à mesure que vous tapez. Vous devriez voir les titres des articles et des pages se mettre à jour en temps réel avec chaque caractère que vous ajoutez.
Voici le formulaire de recherche instantanée en action !
Lorsque vous effectuez la mise à niveau vers SearchWP, vous pouvez créer plusieurs moteurs de recherche qui affichent différents contenus et attribuer un moteur différent à chaque formulaire de recherche sur votre site.
Bonus : Améliorez votre recherche en direct avec SearchWP
SearchWP Live Ajax Search utilise la requête de recherche native de WordPress, qui correspond aux titres des articles, aux extraits et au contenu.
Si un visiteur recherche un SKU de produit, une valeur de champ personnalisé ou du contenu dans un PDF, le plugin gratuit ne le trouvera pas.
C'est là qu'intervient le plugin complet SearchWP.
L'installation de SearchWP améliore les résultats de recherche en direct avec un moteur de pertinence personnalisé qui recherche les champs personnalisés, les attributs de produits WooCommerce, les tags, les catégories, les PDF, et plus encore.
Les sites exécutant WooCommerce peuvent ajouter l'extension WooCommerce pour également rechercher les attributs et les SKU de produits.
Pour une présentation complète de la mise à niveau, consultez notre guide sur comment ajouter une recherche avec saisie semi-automatique en direct à WordPress.
FAQ sur la recherche en direct dans WordPress
1. La recherche en direct ralentit-elle mon site WordPress ?
SearchWP Live Ajax Search utilise des requêtes AJAX légères qui sont débouncées, ce qui signifie qu'elles ne se déclenchent qu'après que le visiteur a fait une courte pause en tapant. Chaque requête ne récupère que les résultats de recherche, pas une page entière. Sur la plupart des sites WordPress, la charge ajoutée par la recherche en direct est négligeable par rapport à un rechargement complet de page, et l'expérience semble plus rapide pour les visiteurs même si une requête serveur est toujours impliquée.
2. La recherche en direct fonctionnera-t-elle avec mon thème WordPress existant ?
Oui. D'après nos tests, cela fonctionne avec Elementor, Divi, Astra, Kadence, GeneratePress, et la plupart des autres thèmes et constructeurs de pages populaires dès la sortie de la boîte. Aucune modification de thème n'est requise.
3. Puis-je afficher les produits WooCommerce dans le menu déroulant de recherche en direct ?
Oui. Lorsque WooCommerce est actif sur votre site, SearchWP Live Ajax Search le détecte automatiquement. Pour une configuration complète de la recherche WooCommerce, consultez notre guide sur comment ajouter un widget de recherche WooCommerce personnalisé.
4. Quelle est la différence entre le plugin gratuit et SearchWP ?
SearchWP Live Ajax Search est gratuit et fournit des menus déroulants de recherche en direct alimentés par la requête de recherche native de WordPress, qui correspond aux titres et au contenu des articles. Le plugin payant SearchWP améliore ces résultats avec un moteur de pertinence personnalisé qui recherche également les champs personnalisés, les taxonomies et les documents PDF au niveau Standard. L'ajout de l'extension WooCommerce (Pro et supérieur) étend la recherche aux attributs et aux SKU des produits WooCommerce.
5. Comment ajouter une barre de recherche en direct à l'en-tête ou au menu de mon WordPress ?
Ajoutez un widget de formulaire de recherche à une zone de widget qui apparaît dans votre en-tête, ou placez un bloc de formulaire de recherche dans votre modèle d'en-tête à l'aide de l'éditeur de blocs. Une fois qu'un formulaire de recherche est présent n'importe où sur la page, SearchWP Live Ajax Search le met à niveau avec une liste déroulante en direct automatiquement, sans configuration supplémentaire nécessaire.
C'est tout ! Vous avez ajouté la recherche en direct à votre site WordPress gratuitement, sans clés API, sans comptes cloud et sans code. Les visiteurs peuvent désormais obtenir des résultats instantanés à partir de n'importe quel formulaire de recherche sur votre site dès qu'ils commencent à taper.
Nous espérons que cet article vous a aidé à apprendre comment ajouter la recherche en direct à WordPress gratuitement. Vous voudrez peut-être aussi consulter nos guides sur comment créer des formulaires de recherche avancés dans WordPress et comment personnaliser la page des résultats de recherche WordPress.
Prêt à aller plus loin avec votre recherche en direct ? Vous pouvez commencer avec SearchWP ici.
