Comment ajouter une barre de recherche dans WordPress (4 façons)

Publié: 2022-01-25

Vous souhaitez ajouter une barre de recherche à votre site WordPress ?

Il s'agit d'une fonctionnalité utile qui permet aux visiteurs du site Web de trouver le contenu qu'ils recherchent en quelques secondes.

Malheureusement, tous les thèmes WordPress n'ont pas une barre de recherche par défaut. Et il peut être difficile de comprendre comment l'ajouter si vous êtes débutant.

Mais ne vous inquiétez pas, car dans cet article, nous vous montrerons comment ajouter une barre de recherche à votre site WordPress sans aucun code.

Comme cet article contient un ensemble de guides étape par étape pour plusieurs façons d'ajouter une barre de recherche, voici une table des matières pour vous aider à naviguer :

  • Ajouter une barre de recherche en tant que widget
  • Ajouter une barre de recherche manuellement
  • Ajouter une barre de recherche prise en charge par votre thème
  • Comment ajouter une barre de recherche au menu WordPress

Plongeons-y !

Pourquoi ajouter une barre de recherche à votre site Web ?

Une barre de recherche permet non seulement aux visiteurs de votre site Web de trouver le contenu plus rapidement. Il apporte également de nombreux avantages cachés qui améliorent considérablement les performances de votre site Web.

Voici quelques exemples de la raison pour laquelle vous avez besoin d'une barre de recherche sur votre site Web :

  • Augmentez le taux de conversion : plus il est facile pour les internautes de trouver le produit qu'ils recherchent sur votre site, plus ils ont de chances d'acheter chez vous.
  • Augmentez la découvrabilité du contenu : créer un contenu de qualité demande beaucoup de travail et beaucoup de temps. La barre de recherche vous permet de maximiser vos efforts et d'augmenter l'engagement des visiteurs.
  • Améliorez l'expérience utilisateur : si les visiteurs ont passé un bon moment à explorer votre site Web, cela les fait revenir encore et encore. Un public fidèle est précieux car il veut consommer autant de votre contenu que possible.
  • Skyrocket SEO : rassurez-vous, tout ce qui précède n'échappera pas à l'attention de Google. Ces choses réduisent le taux de rebond, l'un des facteurs de classement essentiels. Vous voulez le garder aussi bas que possible pour obtenir un meilleur classement et attirer plus de visiteurs des moteurs de recherche.

Maintenant que nous connaissons les avantages d'avoir une barre de recherche, ajoutons-la à votre site Web WordPress.

Comment ajouter une barre de recherche dans WordPress

Il existe plusieurs façons d'ajouter une barre de recherche à un site Web WordPress.

Dans cet article, nous allons examiner les moyens les plus populaires, comparer leurs avantages et leurs inconvénients et vous aider à trouver le moyen le plus simple de le faire.

Ajouter une barre de recherche en tant que widget

La façon la plus populaire d'ajouter la barre de recherche est probablement de l'ajouter en tant que widget. Pour ce faire, il vous suffit de faire glisser et de déposer le widget approprié dans la zone où vous souhaitez qu'il apparaisse.

Cependant, cette méthode présente un inconvénient notable. Le fait est que tous les thèmes ne prennent pas en charge les widgets.

Même si c'est le cas, l'ensemble des zones de widgets disponibles est généralement assez limité. Par exemple, vous souhaiterez peut-être ajouter un widget à l'en-tête, mais votre thème ne comporte que des zones de widget au niveau du pied de page et de la barre latérale.

Gardez cela à l'esprit et voyons comment ajouter un widget de recherche au site Web WordPress.

1. Allez dans l'onglet Widgets

La toute première étape consiste à ouvrir votre tableau de bord WordPress et à accéder à l'onglet Widgets sous Apparence .

go to widgets tab

Ensuite, vous devez décider à quelle zone de widget vous souhaitez ajouter votre widget. Par exemple, seules 2 zones sont disponibles dans le thème officiel gratuit WordPress Twenty Twenty.

footer section

2. Ajouter un nouveau widget

Pour ajouter un widget de recherche à la zone souhaitée, appuyez sur le bouton Plus en haut à gauche.

Trouvez le widget de recherche et faites-le glisser vers la zone où vous souhaitez qu'il apparaisse sur votre site Web.

find the search widget

Voici à quoi cela devrait ressembler :

drag and drop the search widget

N'oubliez pas d'appuyer sur le bouton Mettre à jour en haut à droite pour enregistrer les modifications.

press the update button

Nous devons maintenant nous assurer que la barre de recherche commence réellement à s'afficher dans la zone du widget de pied de page où nous l'avons ajoutée.

3. Découvrez votre nouvelle barre de recherche sur votre site

Le moyen le plus rapide de le faire est d'appuyer sur le bouton Visiter le site sous le nom de votre site en haut à gauche.

visit your website

Comme vous pouvez le constater, la barre de recherche fonctionne parfaitement.

the search bar works

C'était donc l'un des moyens d'ajouter une barre de recherche au site Web WordPress. Passons à autre chose et parlons de la prochaine façon de le faire manuellement ci-dessous.

Ajouter une barre de recherche manuellement

La prochaine façon que nous allons examiner est de savoir comment ajouter une barre de recherche manuellement en modifiant le code du thème WordPress.

Il y a un énorme inconvénient à cette méthode. Vous devez être suffisamment calé en technologie pour savoir comment modifier le code du thème WordPress.

Mais ce n'est pas aussi difficile qu'il y paraît, et nous vous montrerons comment le faire étape par étape ci-dessous.

Avant de modifier manuellement le code de votre thème, vous devez garder à l'esprit quelques éléments :

  • Le processus suivant dépend entièrement du thème spécifique que vous utilisez : bien que chaque thème ait son propre ensemble unique de fichiers, la plupart d'entre eux contiennent des fichiers typiques tels que header, footer et sidebar.php.
  • Évitez d'apporter des modifications au thème parent : le fait est que vous perdrez toutes les modifications une fois que vous l'aurez mis à jour. Il est préférable de créer un thème enfant et d'y ajouter des modifications. Vous pouvez apprendre comment créer un thème enfant WordPress ici.

Pour les besoins de ce didacticiel, nous utiliserons le thème Twenty Twenty-One, car il s'agit de l'un des thèmes WordPress gratuits les plus populaires. Le processus peut être légèrement différent, selon votre thème.

Étant donné que la grande majorité des propriétaires de sites Web ont tendance à ajouter un champ de recherche à l'en-tête, nous ferons de même.

Par exemple, ajoutons une barre de recherche à côté de la barre de navigation, car c'est l'endroit le plus courant.

1. Allez dans l'éditeur de thème

La première étape consiste à accéder à l' éditeur de thème sous Apparence .

go to the theme editor

Sur le panneau de droite, vous pouvez trouver la liste complète des fichiers de thème modifiables.

Nous allons ajouter une barre de recherche à l'en-tête, alors cliquez sur le fichier header.php .

find the theme header

2. Ajoutez le code du formulaire de recherche

Trouvez la ligne de code :

<?php get_template_part( 'template-parts/header/site-header' ); ?>

Et mettez le code suivant juste après :

<?php get_search_form(); ?>

Voici à quoi cela devrait ressembler :

paste the search form code

Appuyez sur le bouton Mettre à jour le fichier en bas une fois que vous avez terminé.

press update file

Cliquez sur le bouton Visiter le site sous le nom de votre site Web pour voir le résultat.

go back to your website

3. Découvrez votre barre de recherche nouvellement ajoutée

Comme vous pouvez le constater, une barre de recherche apparaît désormais à côté de la barre de navigation :

Ajouter une barre de recherche prise en charge par votre thème

Certains thèmes WordPress prennent en charge l'activation ou la désactivation d'une barre de recherche.

Par exemple, l'un des thèmes WordPress gratuits populaires appelé GeneratePress a une telle fonctionnalité.

Habituellement, vous pouvez vérifier si votre thème a ce paramètre dans l'onglet Personnaliser sous Apparence .

Voyons comment ajouter une barre de recherche prise en charge par un thème avec un exemple de GeneratePress.

1. Allez dans l'onglet Personnaliser

La première étape consiste à accéder à l'onglet Personnaliser .

go to customize tab

Ensuite, allez dans Mise en page » Navigation principale .

Go to primary navigation

Activez la recherche de navigation.

enable the navigation search

N'oubliez pas d'appuyer sur le bouton Publier en haut une fois terminé.

press publish

2. Découvrez votre nouvelle barre de recherche

Allons visiter notre site Web et vérifier si tout fonctionne bien. Nous avons maintenant l'icône de la loupe après avoir cliqué sur laquelle la barre de recherche apparaît.

magnifying glass icon

Vous connaissez déjà les 3 façons les plus populaires d'ajouter une barre de recherche à votre site Web WordPress. Mais que se passe-t-il si vous souhaitez ajouter une barre de recherche à votre menu de navigation WordPress ?

Parlons de la façon dont vous pouvez le faire ci-dessous.

Comment ajouter une barre de recherche au menu WordPress

Le moyen le plus simple d'ajouter une barre de recherche au menu de navigation de WordPress consiste à installer le plug-in SearchWP Modal Search Form.

En l'utilisant, vous pouvez ajouter un formulaire de recherche modal léger à côté de vos éléments de menu en quelques clics.

De plus, si vous souhaitez améliorer davantage les possibilités de recherche de WordPress, envisagez d'obtenir une version premium de SearchWP.

En tant que meilleur plugin de recherche pour WordPress, SearchWP est utilisé par plus de 30 000 sites Web dans le monde entier. Certaines de ses fonctionnalités incluent :

  • Recherche par saisie semi-automatique : voulez-vous que votre barre de recherche commence à deviner les requêtes de recherche des visiteurs, comme le fait Google ? SearchWP vous permet de réaliser cela en quelques clics.
  • Résultats de la recherche en direct : WordPress affiche les résultats de la recherche en ouvrant une nouvelle page distincte par défaut. Cela prend du temps et peut dérouter certains visiteurs. En utilisant SearchWP, vous pouvez fournir à vos visiteurs des résultats de recherche en direct.
  • Moteur de recherche amélioré : le moteur de recherche natif de WordPress ne prend pas en compte les champs personnalisés, le contenu des documents, les codes abrégés et bien d'autres. SearchWP résout ce problème en fournissant à votre visiteur des résultats de recherche complets.
  • Informations sur l'activité de recherche sur site : grâce à SearchWP, vous pouvez consulter ce que les visiteurs de votre site Web recherchaient. Il ouvre un large éventail d'opportunités et vous permet d'obtenir de nouvelles idées de contenu.
  • Intégration WooCommerce : SearchWP prend en charge l'indexation des champs personnalisés, rendant les attributs, les balises et les avis des produits WooCommerce consultables.

Vous pouvez récupérer la version premium de SearchWP ici.

Ajoutons maintenant une barre de recherche au menu de navigation de WordPress en quelques étapes simples.

Étape 1 : Installer et activer le plug-in de formulaire de recherche modale SearchWP

Tout d'abord, vous devez vous rendre dans l'onglet Plugins de votre tableau de bord WordPress et cliquer sur Ajouter nouveau .

add a new plugin

Ensuite, recherchez le formulaire de recherche modale SearchWP.

searchwp modal form search

Trouvez le plugin et cliquez sur Installer maintenant . N'oubliez pas de l'activer après l'installation.

Pour plus de détails sur la façon de procéder, consultez notre guide étape par étape sur la façon d'installer un plugin WordPress.

install searchwp modal search form

Étape 2 : Ajouter une barre de recherche au menu

Une fois que vous avez installé et activé le formulaire de recherche modale SearchWP, à partir de votre tableau de bord WordPress, cliquez sur l'onglet Apparence et accédez à Menus .

go to appearance menus

Une fois que vous y êtes, cliquez sur les formulaires de recherche modale SearchWP .

click searchwp modal search forms

Cochez la case Par défaut et appuyez sur Ajouter au menu .

click add to menu

Cliquez sur votre nouvel élément de menu appelé Par défaut et modifiez son nom dans le champ Étiquette de navigation pour quelque chose de plus approprié. Par exemple, appelons-le "Recherche".

rename to search

Une fois cela fait, appuyez sur le bouton Enregistrer le menu en bas à droite.

press save menu

Étape 3 : Testez votre nouvelle barre de recherche

Examinons maintenant la nouvelle barre de recherche. Cliquez sur le bouton Visiter le site sous le nom de votre site.

press the visit site button

Consultez votre zone de menu de navigation. Vous avez maintenant un nouvel élément de menu appelé "Rechercher".

new menu item

Une fois que vous aurez cliqué dessus, vous verrez apparaître le formulaire de recherche modale, comme ceci :

modal search form

C'est ça. Vous venez d'ajouter une barre de recherche au menu de navigation de votre site WordPress.

Dans cet article, vous avez appris comment ajouter une barre de recherche dans WordPress de différentes manières.

Si vous êtes prêt à renforcer votre recherche WordPress, vous pouvez récupérer votre copie de Search WP ici.

Vous pourriez également être intéressé par la personnalisation du widget de recherche dans WordPress si vous souhaitez ajuster son algorithme de recherche.

De plus, si vous avez déjà rencontré des problèmes avec la recherche WordPress, il peut être utile de consulter notre guide sur la façon de réparer la recherche WordPress qui ne fonctionne pas.