Dernières nouvelles de SeedProd

Tutoriels, conseils et ressources WordPress pour développer votre activité

Comment ajouter une barre de recherche à WordPress

Comment ajouter une barre de recherche personnalisée à WordPress (étapes faciles) 

Écrit par : avatar de l'auteur Stacey Corrin
avatar de l'auteur Stacey Corrin
Stacey écrit sur WordPress et le marketing numérique depuis plus de 10 ans et sur d'autres sujets depuis bien plus longtemps. Parallèlement, elle est fascinée par la conception de sites web, l'expérience utilisateur et le référencement.
     Reviewed By : avatar de l'évaluateur Turner John
avatar de l'évaluateur Turner John
John Turner est le cofondateur de SeedProd. Il a plus de 20 ans d'expérience dans le domaine des affaires et du développement et ses plugins ont été téléchargés plus de 25 millions de fois.

Lorsque j'ai commencé à utiliser WordPress, j'étais frustré par la fonction de recherche de base. Elle renvoyait souvent des résultats non pertinents ou passait complètement à côté de certains contenus.

En gérant mes propres sites WordPress, je sais maintenant qu'une bonne fonction de recherche aide les visiteurs à trouver ce qu'ils cherchent, ce qui les incite à rester plus longtemps sur votre site. Au final, ils sont plus heureux et plus enclins à revenir sur votre site.

C'est pourquoi, dans ce guide, vous apprendrez à ajouter une barre de recherche à WordPress. À la fin, vous aurez une fonction de recherche puissante que vos visiteurs aimeront utiliser, et qui servira à améliorer votre site web.

Pourquoi ajouter une barre de recherche à WordPress ?

Imaginez que vous venez d'arriver sur un site web à la recherche d'informations spécifiques. Vous parcourez la page d'accueil et cliquez sur quelques onglets, mais vous ne trouvez pas ce que vous cherchez.

Frustrant, n'est-ce pas ? Pensez maintenant à votre propre site web WordPress. Vos visiteurs ne sont pas différents : ils veulent des informations, et ils les veulent rapidement. C'est là que la magie d'une barre de recherche entre en jeu.

L'ajout d'une barre de recherche à votre site WordPress facilite l'expérience de l'utilisateur. Lorsque les visiteurs d'un site web peuvent trouver rapidement ce qu'ils recherchent, ils sont plus enclins à rester et à explorer.

En fait, les personnes qui effectuent des recherches sur le site ont 1,8 % plus de chances de se convertir que celles qui n'utilisent pas cette fonction. La barre de recherche est donc essentielle pour transformer les visiteurs en abonnés et en clients.

Exemple d'utilisation d'une barre de recherche dans WordPress

Mieux encore, si les utilisateurs restent plus longtemps sur votre site, cela peut réduire votre taux de rebond, un facteur de classement en matière de référencement.

Cependant, les avantages ne se limitent pas à l'expérience de l'utilisateur. Une bonne barre de recherche ou un bon widget de recherche peut également vous aider à savoir ce qui intéresse votre public. En examinant les requêtes de recherche, vous pouvez adapter votre stratégie de contenu pour répondre aux demandes et aux questions de vos visiteurs.

Comment ajouter une barre de recherche à WordPress : 2 méthodes faciles

Bien que la fonction de recherche par défaut de WordPress soit adaptée aux situations simples, il est difficile de la personnaliser sans écrire du code CSS ou sans faire appel à un développeur. Une approche plus personnalisée vous permet d'ajouter une barre de recherche WordPress aux zones de widgets, aux menus et aux pages WooCommerce. Dans certains cas, vous pouvez inclure des champs personnalisés, des résultats de recherche sur mesure, etc.

Dans cette optique, nous allons voir comment ajouter une barre de recherche à votre site web, étape par étape :

La première méthode que je vais vous présenter consiste à utiliser un constructeur de pages pour intégrer de manière transparente une barre de recherche sur votre site WordPress. C'est plus simple que vous ne le pensez, et vous n'avez pas besoin d'être un as de la technologie pour y parvenir.

Méthode 1. Ajouter un formulaire de recherche personnalisé à WordPress avec SeedProd

Tout d'abord, parlons de SeedProd.

SeedProd Constructeur de site web WordPress Drag and Drop

Si vous ne le connaissez pas, SeedProd est l'un des meilleurs constructeurs de pages WordPress, vous permettant de personnaliser votre site web sans toucher à une seule ligne de code. De la fonctionnalité "glisser-déposer" aux modèles pré-fabriqués, SeedProd facilite la conception de votre site comme vous le souhaitez.

Et oui, cela inclut l'ajout d'une barre de recherche sur votre site.

Avant d'entrer dans le vif du sujet, vous devez installer SeedProd. Bien qu'il offre une version gratuite et plusieurs options premium, j'utiliserai SeedProd Pro pour ce guide. Allez-y, choisissez votre option et téléchargez le plugin.

Après l'avoir téléchargé, vous pouvez suivre les étapes suivantes pour installer le plugin SeedProd sur votre site WordPress.

Avec SeedProd activé, votre prochaine étape est de choisir où ajouter la barre de recherche dans WordPress. Avec SeedProd, vous pouvez personnaliser n'importe quelle partie de votre site web, qu'il s'agisse d'un thème WordPress personnalisé ou d'une page d'atterrissage spécifique.

Le constructeur de pages d'atterrissage est idéal pour créer des pages autonomes afin d'augmenter le nombre de prospects et de conversions.

Tableau de bord du constructeur de pages d'atterrissage SeedProd

Par ailleurs, le constructeur de thèmes est parfait pour créer un thème WordPress personnalisé sans faire appel à un développeur.

Tableau de bord du constructeur du thème SeedProd

Pour trouver ces options, naviguez vers SeedProd dans votre tableau de bord WordPress et choisissez soit Theme Builder soit Landing Pages, en fonction de vos besoins. À partir de là, vous pouvez sélectionner un modèle de page d'atterrissage prédéfini ou un kit de site web complet qui correspond à votre vision et commencer à personnaliser votre site.

kits pour le site web de seedprod

Vous avez besoin de toutes les étapes ? Voici un guide sur la création d'un thème WordPress personnalisé et sur la création d'une page d'atterrissage dans WordPress, qui devrait vous faciliter la tâche.

Ajouter un champ de recherche à une page WordPress

C'est maintenant qu'il faut ajouter la barre de recherche.

Dans le constructeur de pages SeedProd, vous trouverez un panneau sur la gauche avec différents blocs à ajouter à votre page. Faites défiler vers le bas jusqu'à ce que vous trouviez le bloc Formulaire de recherche

Bloc du formulaire de recherche SeedProd

Ensuite, faites glisser et déposez le bloc où vous souhaitez ajouter la recherche WordPress à votre page.

Glisser-déposer le bloc du formulaire de recherche

Dans les paramètres du bloc de recherche, vous pouvez personnaliser son apparence, sa taille et l'icône de recherche, et même ajouter un texte d'insertion comme "Rechercher ici..." pour guider vos visiteurs.

Options de personnalisation du bloc de formulaire de recherche

Dans l'onglet "Avancé" du formulaire de recherche, vous disposez d'une multitude d'options de personnalisation. Vous pouvez modifier les couleurs du bouton et du champ de recherche pour les adapter au thème de votre site, ajuster l'espacement pour une mise en page optimale, contrôler la visibilité de l'appareil et même ajouter des animations pour une touche d'élégance supplémentaire.

Options avancées de personnalisation du bloc de formulaire de recherche

Lorsque vous êtes satisfait de vos modifications, cliquez sur le bouton Enregistrer et publier, puis visitez votre page pour voir votre nouvelle barre de recherche.

Exemple de barre de recherche sur une page WordPress

Ajouter une barre de recherche à l'en-tête de WordPress

Peut-être pensez-vous que la recherche de site serait plus efficace dans l'en-tête, où elle est facilement accessible sur chaque page. Vous avez tout à fait raison, et avec SeedProd, ajouter une barre de recherche dans l'en-tête de votre site WordPress est un jeu d'enfant.

Pour ce faire, vous devrez utiliser la fonction Theme Builder, qui vous permet de personnaliser différentes parties de votre site web, notamment l'en-tête, le pied de page, la barre latérale, les archives, etc. 

Si vous n'avez pas encore configuré votre thème WordPress à l'aide de SeedProd, vous pouvez suivre les étapes suivantes pour personnaliser votre en-tête WordPress.

modifier votre modèle d'en-tête SeedProd

Une fois que vous êtes en mode édition pour votre en-tête, vous verrez l'interface familière du constructeur de page SeedProd. Comme précédemment, trouvez le bloc Formulaire de recherche dans le panneau de gauche et faites-le glisser à l'endroit de votre choix dans l'en-tête.

Ajouter un bloc de formulaire de recherche à l'en-tête de WordPress

N'oubliez pas d'ajuster la barre de recherche pour qu'elle s'intègre parfaitement à votre en-tête. Passez à l'onglet "Avancé" dans les paramètres du formulaire de recherche. Vous pouvez y ajuster le style et paramétrer la barre de recherche pour qu'elle s'affiche différemment selon les appareils.

Une fois que vous avez enregistré vos modifications, vous pouvez consulter votre site web pour voir que votre barre de recherche d'en-tête est bien vivante.

Comment ajouter une barre de recherche à l'en-tête de WordPress

Ajouter le widget de recherche à la barre latérale de WordPress

Parfois, la barre latérale est l'endroit idéal pour une barre de recherche, surtout si vous voulez qu'elle soit accessible mais pas trop visible. Avec SeedProd, l'ajout d'une barre de recherche dans la barre latérale de votre site WordPress est aussi simple que de l'ajouter dans l'en-tête.

Voyons les différentes étapes.

Comme précédemment, accédez à votre tableau de bord WordPress et cliquez sur SeedProd, puis sur Theme Builder. De là, cliquez sur le lien "Edit Design" sur votre modèle de barre latérale pour ouvrir le constructeur de pages.

Modifier le modèle de barre latérale de SeedProd

Si vous n'avez pas encore ce modèle, suivez les étapes suivantes pour créer une barre latérale personnalisée dans WordPress.

Une fois que vous êtes dans le constructeur de pages pour votre barre latérale, trouvez le bloc Recherche dans le panneau de gauche et faites-le glisser à l'endroit où vous souhaitez que la barre de recherche se trouve dans votre barre latérale.

Ajouter une barre de recherche à la barre latérale de WordPress

Il ne reste plus qu'à personnaliser son apparence et à cliquer sur le bouton Enregistrer pour que vos modifications soient prises en compte.

Exemple de barre de recherche dans la barre latérale de WordPress

Méthode 2. Ajouter la recherche de site à WordPress avec un plugin de barre de recherche

Si vous cherchez une solution dédiée pour ajouter une barre de recherche à votre site WordPress, un plugin de recherche WordPress comme SearchWP est un excellent choix.

searchwp meilleur plugin WordPress eCommerce pour les téléchargements numériques

Les plugins de recherche comme celui-ci vous permettent d'ajouter facilement des boîtes de recherche, avec des fonctionnalités avancées telles que la recherche en direct alimentée par Ajax et des résultats de recherche personnalisables.

La recherche Ajax en direct donne aux utilisateurs des résultats de recherche en temps réel, au fur et à mesure qu'ils tapent. Cela réduit le temps d'attente des résultats, tout en améliorant l'expérience globale de la recherche.

Ajouter une barre de recherche au menu de navigation de WordPress

Tout d'abord, accédez à votre tableau de bord WordPress, cliquez sur Plugins, puis sur Ajouter un nouveau plugin. Recherchez le "SearchWP Modal Search Form" et installez et activez le plugin. Vous pouvez également télécharger le plugin depuis WordPress.org et le charger manuellement.

Plugin SearchWP Modal Search Form

Après l'activation, allez dans Apparence et Menus depuis votre tableau de bord et sélectionnez un menu à modifier dans la liste déroulante.

formulaire de recherche modale dans le menu de WordPress

Ensuite, trouvez la boîte "SearchWP Modal Search Forms" sur le côté gauche de l'écran et cliquez dessus pour développer ses options. Cochez la case "Native WordPress" et cliquez sur le bouton " Ajouter au menu" .

Case à cocher du formulaire de recherche modale native de WordPress

Vous verrez maintenant un élément "Native WordPress" dans votre menu, sur lequel vous pourrez cliquer pour le personnaliser. Par exemple, vous pouvez changer l'intitulé de la navigation en "Recherche" pour plus de clarté.

Personnaliser l'étiquette de navigation du formulaire de recherche modale

Cliquez ensuite sur le bouton Enregistrer les modifications pour enregistrer votre menu et visitez votre site web pour voir la fonction de recherche de menu en action.

Exemple de barre de recherche dans le menu de WordPress

Pour une expérience de recherche plus interactive, vous pouvez ajouter des résultats de recherche en direct à l'aide de la technologie Ajax. Cela vous permet d'afficher des résultats de recherche pertinents au fur et à mesure que les utilisateurs saisissent leurs requêtes, à l'instar de Google Search et d'autres moteurs de recherche.

Pour ce faire, installez et activez le plugin "SearchWP Live Ajax Search". Il fonctionne de manière transparente avec le formulaire de recherche modale de SearchWP et n'a aucun paramètre à configurer.

SearchWP Live Ajax Search plugin

Une fois activé, le plugin ajoutera automatiquement la recherche en direct à tous vos formulaires. Vous pouvez le voir en action en visitant votre formulaire de recherche sur le front-end de votre site et en tapant une requête.

Exemple de recherche ajax en direct dans WordPress

Personnaliser les résultats de recherche de WordPress

Ajouter une barre de recherche à votre menu WordPress est un bon début, mais vous pouvez aller beaucoup plus loin avec le plugin premium SearchWP. Le plugin premium dispose de fonctions de recherche avancées, vous permettant de personnaliser les résultats de la recherche et de mettre en évidence les éléments promus, comme les produits de commerce électronique.

Fonctionnalités et options de personnalisation de la barre de recherche avancée de SearchWP

Pour un guide complet, voir ces conseils sur la façon d'améliorer la recherche sur WordPress avec SearchWP.

Et voilà !

Ajouter une barre de recherche à votre site WordPress est une décision intelligente. Elle facilite l'utilisation de votre site et aide les visiteurs à trouver ce qu'ils cherchent. Que vous utilisiez SeedProd ou SearchWP, les deux méthodes sont simples et efficaces.

N'hésitez donc pas à ajouter cette barre de recherche : vos visiteurs l'apprécieront !

Si vous êtes à la recherche d'autres tutoriels WordPress faciles, veuillez consulter les guides suivants :

Merci de votre lecture ! Nous aimerions connaître votre avis, alors n'hésitez pas à laisser un commentaire pour nous faire part de vos questions et de vos réactions.

Vous pouvez également nous suivre sur YouTube, X (anciennement Twitter) et Facebook pour obtenir d'autres contenus utiles au développement de votre entreprise.

avatar de l'auteur
Stacey Corrin Rédacteur
Stacey écrit sur WordPress et le marketing numérique depuis plus de 10 ans et sur d'autres sujets depuis bien plus longtemps. Parallèlement, elle est fascinée par la conception de sites web, l'expérience utilisateur et le référencement.

Divulgation : Notre contenu est soutenu par les lecteurs. Cela signifie que si vous cliquez sur certains de nos liens, il se peut que nous recevions une commission. Nous ne recommandons que des produits dont nous pensons qu'ils apporteront une valeur ajoutée à nos lecteurs.