Comment ajouter la recherche Ajax en direct à votre site WordPress (de manière simple)

Nous avons beaucoup parlé de la façon dont avoir un formulaire de recherche est important pour aider les internautes à trouver du contenu sur votre site. Mais nous trouvons aussi que la recherche par défaut de WordPress peut être un peu lente et maladroite, nécessitant souvent que les utilisateurs/utilisatrices chargent une nouvelle page pour voir les résultats.

La recherche instantanée – qui affiche les résultats au fur et à mesure que l’internaute tape dans la barre de recherche, à l’instar du fonctionnement de Google – peut améliorer considérablement le compte de l’utilisateur. Cette recherche directe en Ajax aide les internautes à trouver rapidement des pages, des publications, des produits et plus encore, sans avoir à recharger la page.

Dans cet article, nous allons vous afficher comment ajouter une recherche Ajax directe à votre site WordPress.

Pourquoi ajouter la recherche directe Ajax à WordPress ?

La recherche en direct Ajax, également appelée recherche instantanée, améliore la recherche intégrée de WordPress en ajoutant une fonctionnalité de liste déroulante et d’autocomplétion qui est courante dans les moteurs de recherche tels que Google.

Voici un exemple de recherche Ajax en direct :

La recherche en direct devine ce que les utilisateurs recherchent au fur et à mesure qu’ils tapent, ce qui les aide à trouver un contenu pertinent plus rapidement. Cela permet souvent d’améliorer l’expérience de l’utilisateur, d’augmenter le nombre de pages vues et de réduire le taux de rebond.

Avec la recherche en direct Ajax, vous pouvez afficher des résultats pertinents sans même recharger la page. C’est donc un excellent choix pour les boutiques de commerce électronique, car les acheteurs peuvent voir instantanément les produits qui correspondent à leur recherche. Ainsi, la recherche instantanée peut vous aider à créer une recherche de produits plus intelligente.

Ceci étant dit, voyons comment vous pouvez ajouter à WordPress une fonctionnalité de recherche en direct alimentée par Ajax.

Étape 1 : Activer la recherche Ajax avec un plugin WordPress

La façon la plus simple d’ajouter une recherche Ajax en temps réel à WordPress est d’utiliser SearchWP Live Ajax Lite Search. Ce plugin gratuit ajoute automatiquement une recherche instantanée en temps réel à votre site web et fonctionne parfaitement avec n’importe quel thème WordPress.

La première chose à faire est d’installer et d’activer l’extension. Pour plus de détails, consultez notre guide étape par étape sur l’installation d’une extension WordPress.

Après l’activation, vous pouvez aller dans SearchWP «  Settings. Cliquez ensuite sur l’option « Activer Live Search ».

Cliquez ensuite sur « Enregistrer » pour sauvegarder vos modifications.

Maintenant, votre bloc de recherche par défaut de WordPress aura une recherche Ajax en direct activée.

Étape 2 : Ajouter le formulaire Ajax Live Search sur votre site WordPress

Après avoir activé le plugin, toutes les barres de recherche de votre site utiliseront automatiquement la recherche Ajax en direct, y compris les formulaires de recherche personnalisés que vous avez créés dans WordPress.

La plupart des thèmes WordPress disposent d’une barre de recherche intégrée. Cependant, après avoir activé la recherche Ajax directe, vous souhaiterez peut-être ajouter une barre de recherche à d’autres parties de votre site WordPress.

Ajout d’une recherche Ajax directe dans les pages de WordPress

Il se peut que vous souhaitiez ajouter une boîte de recherche Ajax à certaines pages de votre site web. Par exemple, vous pouvez ajouter une barre à votre page d’archives personnalisée afin que les visiteurs puissent facilement effectuer une recherche dans les archives.

Pour ce faire, vous devrez ouvrir la publication ou la page où vous souhaitez ajouter la barre de recherche. Pour cet exemple, nous allons vous afficher comment ajouter la recherche directe à une page WordPress, mais les étapes seront similaires pour les publications.

Tout d’abord, allez dans Pages  » Toutes les pages « , puis sélectionnez la page que vous souhaitez modifier.

Dans l’éditeur WordPress Gutenberg, cliquez sur l’icône  » + « .

Le menu des blocs s’affiche.

Tapez « Recherche » dans le champ et cliquez sur l’icône « Recherche » pour l’ajouter à votre page.

WordPress placera automatiquement la barre de recherche pour vous.

Par défaut, le titre de la boîte est « Rechercher ». Vous pouvez le modifier en tapant dans le champ du libellé ou en le supprimant complètement.

Vous pouvez également saisir un espace réservé facultatif, qui est le texte que WordPress affichera avant que les internautes ne commencent à saisir leur requête de recherche. Par exemple, si vous gérez un magasin en ligne, vous pouvez utiliser quelque chose comme « Rechercher des produits » ou « Trouver des bonnes affaires ».

Lorsque vous êtes satisfait de la façon dont la barre de recherche est configurée, cliquez sur le bouton « Mettre à jour ».

Désormais, vos internautes peuvent utiliser la barre de recherche directe pour trouver rapidement ce qu’ils recherchent.

Vous pouvez utiliser le même processus pour ajouter une barre de recherche à n’importe quelle publication ou page.

Ajout d’une recherche Ajax directe dans la colonne latérale de WordPress

De nombreux propriétaires de sites Web ajoutent une barre de recherche à la colonne latérale de leur site.

Cela permet aux internautes d’effectuer une recherche quel que soit l’endroit où ils se trouvent sur votre site.

Pour ajouter le widget de recherche à WordPress, il suffit d’aller dans Apparence  » Widgets.

Cette page affiche les différentes zones de votre thème WordPress où des widgets peuvent être ajoutés. Les options que vous voyez peuvent varier, mais la plupart des thèmes auront soit une colonne latérale, une barre latérale droite, une barre latérale gauche ou une section similaire.

Cliquez simplement pour déplier la zone où vous souhaitez ajouter la barre de recherche Ajax en direct. Cliquez ensuite sur l’icône « + ».

Dans la fenêtre qui s’affiche, recherchez et sélectionnez le bloc « Recherche » lorsqu’il apparaît.

Cela ajoutera automatiquement le widget de recherche Ajax direct à la colonne latérale ou à une section similaire.

Lorsque vous avez terminé, cliquez sur le bouton « Mettre à jour » pour enregistrer vos modifications et faire en sorte que la barre de recherche Ajax soit en direct sur votre blog ou site WordPress.

Désormais, si vous visitez votre site, vous verrez une barre de recherche Ajax en direct dans la colonne latérale ou une section similaire.

Vous pouvez suivre le même processus pour ajouter la barre de recherche à toute autre zone prête à recevoir un widget.

Note : Pour ajouter une barre de recherche à votre menu de navigation, consultez notre guide sur l ‘ajout d’une barre de recherche à votre menu WordPress.

Ajout d’une recherche directe dans la colonne latérale de WordPress à l’aide de l’éditeur/éditrices de site complet

Si vous utilisez un thème basé sur des blocs comme ThemeIsle Hestia Pro, vous pouvez ajouter une recherche Ajax directe à n’importe quelle zone de votre thème en utilisant l’éditeur/édititrice de site complet.

Vous pouvez même ajouter une barre de recherche à des zones que vous ne pouvez pas modifier à l’aide de l’éditeur de contenu standard de WordPress. Par exemple, vous pouvez ajouter un champ de recherche à votre modèle de page 404.

Pour Premiers, allez dans Apparence  » Éditeur dans le Tableau de bord WordPress.

Par défaut, l’éditeur de site complet affiche le modèle d’accueil de votre thème, mais vous pouvez ajouter un bloc de recherche à n’importe quel modèle.

Pour voir toutes les options disponibles, sélectionnez « Modèles » dans le menu de gauche.

Vous pouvez maintenant cliquer sur le Modèle où vous souhaitez ajouter la recherche Ajax directe.

WordPress affiche maintenant un aperçu du design et des paramètres de la page que vous pouvez modifier. Pour modifier ce modèle, cliquez sur le petit crayon et ouvrez l’éditeur de blocs.

Cliquez ensuite sur l’icône bleue « + ».

Dans le panneau qui apparaît, tapez « Rechercher ».

Lorsque le bloc « Recherche » apparaît, faites-le glisser jusqu’à l’endroit où vous souhaitez afficher le champ.

Pour personnaliser le titre du bloc ou le Texte indicatif, il suffit de personnaliser la nouvelle messagerie dans le bloc de recherche.

Lorsque vous êtes satisfait de l’aspect du bloc, cliquez sur « Enregistrer » pour activer la barre de recherche Ajax.

Astuce bonus : Personnaliser votre moteur de recherche WordPress instantané

SearchWP En direct Ajax Search s’intègre parfaitement à la recherche intégrée de WordPress. Cependant, cette recherche par défaut est assez limitée et ne permet pas d’afficher des résultats de recherche précis.

C’est là que SearchWP entre en jeu. C’est le meilleur plugin de recherche WordPress sur le marché, utilisé par plus de 30 000 sites web.

Cette extension permet aux internautes de rechercher du contenu que WordPress ignore par défaut, notamment des champs personnalisés, des fichiers texte, des documents PDF, des produits WooCommerce, des types de publication personnalisés, etc.

En installant SearchWP, vous pouvez personnaliser complètement la nouvelle fonctionnalité instantanée de votre site avant d’écrire le moindre code.

SearchWP dispose également d’analyses et de statistiques avancées qui vous permettent de savoir ce que recherchent vos internautes.

Vous pouvez utiliser cet aperçu pour affiner la façon dont la recherche de votre site est configurée et identifier le contenu le plus populaire sur votre site. Cela peut vous aider à générer de nouvelles idées de publications de blog basées sur ce que les internautes recherchent déjà.

Pour plus d’informations, vous pouvez consulter ces guides :

• Comment améliorer la recherche sur WordPress avec SearchWP (rapide et facile)
• Comment personnaliser la page des résultats de recherche dans WordPress

Nous espérons que cet article vous a aidé à apprendre comment ajouter la recherche Ajax directe à votre site WordPress. Vous pouvez également consulter notre guide sur la façon d’exclure des pages des résultats de recherche WordPress et notre article sur l’utilisation de plusieurs formulaires de recherche dans WordPress.

Si vous avez aimé cet article, veuillez alors vous abonner à notre chaîne YouTube pour obtenir des tutoriels vidéo sur WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.