Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Coupe WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

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

Note éditoriale : Nous percevons une commission sur les liens des partenaires sur WPBeginner. Les commissions n'affectent pas les opinions ou les évaluations de nos rédacteurs. En savoir plus sur Processus éditorial.

Voulez-vous ajouter une recherche Ajax directe à votre site WordPress ?

La recherche instantanée affiche les résultats au fur et à mesure que l’internaute tape dans la barre de recherche, à l’instar de Google. Cela aide les internautes à trouver rapidement des pages, des publications, des produits, etc.

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

How to add live Ajax search to your WordPress site (the easy way)

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 :

Google search live example

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 ».

Enabling live Ajax search with SearchWP

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.

Saving SearchWP settings

É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.

Open up WordPress page

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

Le menu des blocs s’affiche.

Adding a new block to a WordPress blog or website

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.

Adding a search block to a WordPress page or post

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 ».

Customizing the WordPress search block

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.

Live search page example

Ajouter une recherche Ajax en direct dans la barre latérale de WordPress

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

Live widget search example

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.

Customize widget blocks

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 « + ».

Add sidebar widget block

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.

Adding a search block to a widget area

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.

Adding live Ajax search using the full-site editor (FSE)

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.

Adding live Ajax search to your WordPress blog or website

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.

Adding live Ajax search to a block-based WordPress theme

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

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

Adding a search bar to the full-site editor (FSE)

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.

Adding live ajax search to a full-site WordPress theme

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.

Ce plugin permet aux visiteurs de rechercher des contenus que WordPress ignore par défaut, notamment les champs personnalisés, les fichiers texte, les documents PDF, les produits WooCommerce, les types d’articles 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.

The SearchWP WordPress search plugin

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à.

The SearchWP metrics and statistics page

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

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 de suivre les internautes et nos choix d’experts pour les extensions WordPress incontournables pour les sites professionnels.

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.

Divulgation : Notre contenu est soutenu par les lecteurs. Cela signifie que si vous cliquez sur certains de nos liens, nous pouvons gagner une commission. Consultez comment WPBeginner est financé, pourquoi cela compte et comment vous pouvez nous soutenir. Voici notre processus éditorial.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

L'ultime WordPress Toolkit

Accédez GRATUITEMENT à notre boîte à outils - une collection de produits et de ressources liés à WordPress que tous les professionnels devraient avoir !

Reader Interactions

4 commentairesLaisser une réponse

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Mrteesurez says

    Thanks for this post.
    I love Ajax search as it makes users search and find the content in real time. I recommend this to all blogs to have it implemented.
    I also support adding an ajax search field to a 404 page, the user landed on the page can just search and find a post related to what he is looking for.

  3. Eric Malta says

    Hi, after activated this comment function in ajax, my server CPU usages went high, so i have to terminated it. I thing this is for big hosting servers.

    • WPBeginner Support says

      Sadly, any ajax solution will increase your CPU usage but thank you for sharing this for anyone who has concerns for their hosting CPU usage :)

      Administrateur

Laisser une réponse

Merci d'avoir choisi de laisser un commentaire. Veuillez garder à l'esprit que tous les commentaires sont modérés selon notre politique de commentaires, et votre adresse e-mail ne sera PAS publiée. Veuillez NE PAS utiliser de mots-clés dans le champ du nom. Ayons une conversation personnelle et significative.