Comment ajouter une barre de recherche à WordPress (5 façons)

Publié: 2023-07-12

Si vous gérez un site Web volumineux ou complexe, vous avez probablement de nombreuses pages à trier par les visiteurs. Parfois, il peut être frustrant et long pour eux de trouver ce qu'ils recherchent.

Une barre de recherche est un excellent moyen de lutter contre ce problème, et en ajouter une à WordPress est simple. Si vous êtes débutant, vous pouvez utiliser la fonction Search Block ou installer un plugin. Si vous recherchez quelque chose d'un peu plus avancé, vous pouvez ajouter une icône de recherche à votre menu de navigation ou modifier vos fichiers de thème pour inclure les personnalisations que vous souhaitez.

Dans cet article, nous examinerons de plus près le rôle que joue une barre de recherche sur votre site Web. Ensuite, nous vous montrerons cinq méthodes pour en ajouter une dans WordPress.

Pourquoi il est important d'inclure une barre de recherche sur votre site WordPress

Si votre site Web ne comporte que quelques pages, il est probablement facile pour les visiteurs de trouver le contenu ou les informations qu'ils recherchent. D'autre part, pour les sites commerciaux en croissance, les magasins de commerce électronique complexes ou les blogs populaires, les visiteurs peuvent mettre beaucoup de temps à naviguer sur vos pages en utilisant uniquement le menu.

Barre de recherche Nalgene

La règle des trois clics est un principe utilisé par la plupart des webdesigners. Cette règle suggère qu'un utilisateur devrait être en mesure de trouver toutes les informations souhaitées sur votre site en trois (ou moins) clics de souris. Sinon, ils peuvent devenir frustrés et abandonner votre site.

Cela signifie qu'une barre de recherche est un excellent moyen d'améliorer l'expérience utilisateur (UX).

Grâce à cette fonctionnalité, vous pouvez proposer à votre public le contenu qu'il souhaite beaucoup plus rapidement, en réduisant les taux de rebond et en augmentant le temps qu'il passe sur votre site Web.

Mieux encore, vous pouvez surveiller les données de recherche de votre site pour suivre les termes et expressions que les visiteurs utilisent le plus souvent. C'est un excellent moyen de découvrir les écarts entre ce que vos clients recherchent et ce que vous leur proposez. Grâce à ces connaissances, vous pouvez planifier en toute confiance de nouvelles initiatives pour servir vos visiteurs et accroître vos efforts.

Où placer votre barre de recherche

Il est important de vous assurer que votre barre de recherche est facilement accessible. Par conséquent, vous voudrez qu'il occupe une place de choix. Mais vous ne voulez pas non plus que cette fonctionnalité détourne l'attention de votre contenu principal, comme les articles de blog et les pages de produits.

Dans cet esprit, il est généralement judicieux de placer une barre de recherche dans l'en-tête de votre site Web. De cette façon, ce sera l'un des premiers éléments que vos visiteurs verront.

Barre de recherche Rolling Stone

De plus, cela vous permet de placer votre barre de recherche à côté de votre menu de navigation. Ceci est efficace car il vous permet de garder l'expérience de l'utilisateur cohérente. Lorsqu'ils arriveront sur votre site, ils sauront se diriger automatiquement vers le haut de la page.


D'un autre côté, vous préférerez peut-être utiliser votre pied de page ou votre barre latérale pour accueillir la fonctionnalité de recherche. Ces positions sont également largement utilisées pour prendre en charge les menus de navigation, car elles n'interfèrent pas trop avec le contenu de la page. Si vous optez pour cette approche, il est préférable de vous assurer que la fonction de recherche est particulièrement visible, afin qu'elle ne soit pas manquée.

Comment ajouter une barre de recherche à WordPress (5 façons)

Voyons maintenant cinq façons d'ajouter une barre de recherche dans WordPress. Nous allons commencer par l'approche la plus simple, puis passer à des options plus personnalisables. C'est une bonne idée de vous familiariser avec toutes ces approches, afin de pouvoir sélectionner celle qui correspond le mieux à vos besoins et à votre expérience.

1. Ajoutez une barre de recherche à l'aide du bloc Recherche

La première façon d'ajouter une barre de recherche à WordPress consiste à utiliser le bloc de recherche. Étant donné que tout utilisateur de WordPress connaît déjà les blocs, c'est l'une des options les plus rapides et les plus simples.

Il existe deux façons d'ajouter un bloc de recherche à votre site Web. Tout d'abord, vous pouvez ajouter le bloc à une page ou à un article spécifique. Deuxièmement, vous pouvez ajouter le bloc de recherche à une partie de modèle (comme votre en-tête) à l'aide de l'éditeur de site. Explorons comment ces deux techniques fonctionnent.

Ajouter un bloc de recherche à un article ou à une page

Une façon d'utiliser la fonctionnalité de bloc de recherche consiste à l'ajouter à une publication ou à une page spécifique (comme votre page d'accueil). Pour ce faire, vous devrez ouvrir la publication ou la page concernée pour la modifier, ou en créer une nouvelle.

Cliquez ensuite sur le plus (+) icône pour ajouter un nouveau bloc. Entrez "rechercher" et sélectionnez l'option Rechercher .

Bloc de recherche

Cela placera une barre de recherche directement sur votre page. Vous pouvez ensuite utiliser la barre d'outils pour modifier la position du bouton, ajouter une icône de bouton et ajuster l'alignement.

Bloc de recherche

De plus, vous pouvez utiliser les paramètres de bloc à gauche de l'écran pour modifier la largeur de votre barre de recherche, changer ses couleurs et même échanger la sélection de police.

Ajouter un bloc de recherche à l'aide de l'éditeur de site

Si vous utilisez un thème de bloc, vous pouvez également ajouter le bloc de recherche à une partie de modèle comme votre en-tête. De cette façon, vous pouvez afficher la barre de recherche sur toutes les pages de votre site.

Tout d'abord, vous devez vous assurer qu'un thème de bloc est activé. Sinon, vous ne pourrez pas accéder à l'éditeur de site.

Ensuite, accédez à Apparence → Éditeur dans votre tableau de bord WordPress. Cliquez sur Pièces de modèle → En-tête et sélectionnez l'icône en forme de crayon pour modifier l'en-tête de votre site Web actuel.

Cela ouvrira votre en-tête dans l'éditeur de blocs, où vous pourrez apporter de nombreuses personnalisations à votre partie de modèle.

Partie de modèle d'en-tête

Choisissez l'icône plus ( + ) pour parcourir vos blocs WordPress pour l'option de recherche .

Partie de modèle d'en-tête

Maintenant, tout ce que vous avez à faire est de faire glisser le bloc de recherche dans votre zone d'en-tête.

Partie de modèle d'en-tête

Vous pouvez utiliser les flèches de la barre d'outils pour déplacer votre barre de recherche vers le bord de votre menu. Vous pouvez ensuite accéder aux mêmes paramètres que lorsque vous ajoutez le bloc de recherche à une page ou à un article.

Ainsi, vous pouvez modifier l'icône du bouton, ajuster la position et basculer l'étiquette de recherche à partir de la barre d'outils. De plus, dans les paramètres de bloc, vous pouvez modifier la largeur du bloc et modifier les couleurs et les polices.

Une fois que vous êtes satisfait de votre barre de recherche, cliquez sur Enregistrer . Ensuite, visitez votre site Web dans un navigateur pour afficher la barre de recherche sur le front-end.

Page d'accueil

Si vous souhaitez apporter d'autres modifications, vous pouvez revisiter l'éditeur de site à tout moment. Vous pouvez également utiliser cette méthode pour placer votre barre de recherche ailleurs, comme dans votre pied de page.

2. Ajoutez une barre de recherche à l'aide du panneau de widgets

Une autre façon d'ajouter une barre de recherche à WordPress consiste à utiliser le panneau de widgets. Il s'agit d'une option conviviale pour les débutants qui convient le mieux à ceux qui utilisent des thèmes WordPress classiques.

Pour ajouter une barre de recherche à l'aide du panneau de widgets, vous commencerez dans votre tableau de bord WordPress. Ensuite, dirigez-vous vers Apparence → Widgets .

Ici, développez la section où vous souhaitez ajouter un widget de recherche. Et cliquez sur l'icône + en bas. Cela ouvrira une liste de blocs pour votre site. Recherchez "Rechercher". Sélectionnez le bloc de recherche.

Rechercher des widgets

Maintenant, vous pouvez styliser et personnaliser le bloc de recherche comme vous le souhaitez et enregistrer pour l'ajouter à cette section de votre site.

Style du widget de recherche

Si vous souhaitez modifier le bouton, la position ou le style de votre widget de recherche, revenez à l'écran Widgets et utilisez la barre d'outils pour personnaliser votre barre de recherche.

3. Ajouter une barre de recherche à l'aide d'un plugin

Si vous recherchez une option plus flexible mais toujours simple, vous préférerez peut-être utiliser un plugin pour ajouter une barre de recherche à WordPress. L'utilisation d'un plugin est rapide et ne nécessite aucun savoir-faire particulier, mais vous donne plus de contrôle sur votre barre de recherche que vous n'obtiendrez avec les paramètres WordPress par défaut.

Ajouter une barre de recherche avec Jetpack Search

Jetpack Search, par exemple, permet aux propriétaires de sites de pousser les visiteurs dans la bonne direction en personnalisant les résultats et en fournissant des options de filtrage faciles à utiliser et intuitives à utiliser. Il est également assez intelligent pour comprendre ce que les visiteurs recherchent, même s'ils ont mal orthographié un mot ou saisi une recherche complexe à multiples facettes comme "Bocaux en vrac d'assaisonnement pour volaille piquante pour moins de 50 $".

Architecte d'intérieur de premier plan, Kylie. M. Interiors utilise Jetpack Search pour diriger plus efficacement les visiteurs vers l'un des plus de 3 000 articles et réduire la charge de travail pour elle et son équipe.

Jetpack Search prend également en charge des dizaines de langues et fonctionne très rapidement, fournissant des résultats logiques qui se mettent à jour au fur et à mesure que les visiteurs tapent. Ainsi, les gens peuvent trouver les bonnes réponses avant même d'avoir fini de soumettre leur recherche.

Il s'intègre également de manière transparente à votre site WordPress pour la cohérence de la marque et fournit aux propriétaires de sites des informations sur ce que les visiteurs recherchent.

Peut-être le plus impressionnant, toute cette puissance a un impact minimal sur les performances de votre site car il fonctionne sur le cloud. Ainsi, même si des milliers de nouveaux visiteurs recherchent du contenu chaque jour, les ressources de votre serveur n'en souffriront pas.

Vous devrez commencer par installer Jetpack Search sur votre site, et vous avez deux options ici :

  • Ajoutez le plug-in Jetpack Search. Cela ajoute uniquement la fonctionnalité de recherche à votre site et propose des plans gratuits et premium en fonction de votre utilisation.
  • Achetez le plan Jetpack Complete. Jetpack Search est inclus dans ce plan, ainsi que des fonctionnalités de site supplémentaires pour la sécurité, la croissance, etc.

Dans les étapes suivantes, supposons que vous choisissiez le plugin Jetpack Search. Dans le tableau de bord WordPress, accédez à Plugins → Ajouter nouveau et recherchez « Jetpack Search ». Ensuite, cliquez sur Installer maintenant → Activer.

Vous serez invité à vous connecter à un compte WordPress.com et pourrez acheter un forfait premium si vous le souhaitez. Une fois le plugin configuré, allez dans Jetpack → Rechercher dans votre tableau de bord. Ici, vous pouvez activer la fonctionnalité, activer la recherche instantanée, afficher des données sur les recherches effectuées sur votre site, etc.

Activer la recherche Jetpack

Si vous souhaitez personnaliser l'expérience de recherche, cliquez sur le bouton Personnaliser les résultats de recherche . Cela ouvrira un nouvel écran avec de nombreuses options supplémentaires pour le style, les types de publication inclus, etc. Par exemple, vous pouvez choisir de mettre en surbrillance les termes de recherche dans la couleur de votre marque, d'afficher des informations supplémentaires pour les résultats de produit et d'exclure les fichiers multimédias des résultats.

Personnaliser les résultats de recherche

Ajoutez votre barre de recherche à votre site

Désormais, vous pouvez ajouter la nouvelle expérience Jetpack Search où vous le souhaitez sur votre site, comme nous l'avons fait précédemment dans cet article. Vous ajouterez simplement un bloc de recherche à l'aide de l'éditeur de blocs, de l'éditeur de site ou du panneau Widget en fonction de votre situation spécifique. Jetpack Search remplacera automatiquement la configuration par défaut de WordPress par la nouvelle expérience de recherche instantanée.

Recherche de produit

4. Ajoutez une icône de recherche à votre en-tête ou menu sans thème de bloc

Un en-tête ou un menu de navigation est un endroit idéal pour une icône de recherche, car il est instantanément visible pour tous ceux qui atterrissent sur votre site Web.

Si vous utilisez un thème de bloc, vous pouvez ajouter une barre de recherche à votre en-tête en suivant les étapes décrites ci-dessus. Si vous utilisez un thème classique, vous devrez installer un plugin comme Ivory Search.

Pour commencer, vous devrez installer et activer Ivory Search dans WordPress. Ensuite, allez dans Ivory Search → Menu Search , et choisissez le menu où vous souhaitez afficher votre barre de recherche.

Recherche d'ivoire

Cliquez sur Enregistrer pour afficher tous les paramètres disponibles. Par exemple, vous pouvez sélectionner des styles de formulaire de recherche tels que la liste déroulante et la pleine largeur.

Plus bas, utilisez la bascule pour afficher une icône de fermeture du formulaire de recherche. Cliquez ensuite sur Sélectionner une couleur pour appliquer une couleur d'icône de loupe de menu.

Icône de fermeture ivoire

Vous pouvez également ajouter un titre de menu à afficher à la place de l'icône de recherche.

Enfin, sélectionnez le formulaire de recherche qui contrôlera la fonctionnalité de recherche du menu. Utilisez le menu déroulant pour faire votre sélection.

Options de la fonctionnalité de recherche

Ensuite, cliquez sur Créer nouveau . Cela vous amènera à un nouvel écran où vous pourrez donner un nom à votre formulaire de recherche et configurer votre contenu consultable.

Configuration de la recherche

Choisissez Enregistrer le formulaire pour générer le shortcode de votre formulaire de recherche. Ensuite, vous pouvez l'ajouter à une zone de widget, comme votre en-tête.

Vous pouvez afficher votre site sur le front-end pour voir les résultats :

Recherche de page d'accueil

Vous devriez voir l'icône de recherche dans votre couleur préférée. Lorsque vous cliquez sur cette icône, une barre de recherche complète apparaît.

5. Ajoutez une barre de recherche manuellement à l'aide d'un code personnalisé

Toutes les méthodes que nous avons examinées jusqu'à présent conviennent aux débutants. Cependant, cette option suivante nécessite certaines connaissances techniques, car vous devrez ajouter et modifier du code dans vos fichiers de thème. Vous souhaiterez apporter toutes les modifications à l'aide d'un thème enfant, de sorte que lorsque vous mettrez à jour votre thème ultérieurement, votre code ne sera pas perdu.

Avant de vous lancer, il est important de faire une sauvegarde de votre site WordPress. De cette façon, si vous entrez une mauvaise ligne de code, vous pourrez facilement restaurer votre site vers une version précédente.

Pour ajouter une barre de recherche manuellement, connectez-vous à votre site via FTP ou le cPanel de votre hébergeur. Accédez aux fichiers de votre site Web (généralement le dossier public_html ), puis choisissez /wp-content/themes/your-theme. Parcourez les fichiers et trouvez le header.php ou footer.php fichier (selon l'endroit où vous souhaitez ajouter votre barre de recherche).

Une fois que vous avez trouvé le fichier que vous souhaitez utiliser, ouvrez-le et ajoutez cette fonction :

<?php get_search_form(); ?>

Cela appellera le formulaire de recherche à partir de votre modèle searchform.php . Si vous n'avez pas encore ce modèle, la fonction en créera un.

Votre barre de recherche devrait maintenant être visible sur le front-end.

Recherche à partir de la fonction php

À partir de là, vous pouvez continuer à modifier votre formulaire de recherche via un code personnalisé pour qu'il ressemble et fonctionne exactement comme vous le souhaitez.

Comment offrir la meilleure expérience de recherche à vos visiteurs

L'expérience de recherche est un élément crucial de votre site Web, car elle affecte la façon dont les clients trouvent et interagissent avec votre contenu. L'un des moyens les plus simples de faire passer votre expérience de recherche au niveau supérieur consiste à utiliser un outil pratique comme Jetpack Search.

Recherche Jetpack

Jetpack Search est une superbe solution pour les sites Web volumineux et complexes. Une fois installé, vous pouvez présenter des résultats de recherche instantanés avec un filtrage avancé pour aider les visiteurs à trouver exactement ce qu'ils recherchent.

Il existe une version gratuite qui peut gérer 5 000 enregistrements et 500 demandes par mois.

La version premium peut gérer des sites plus grands et un plus grand volume de recherche, et vous pouvez afficher une barre de recherche sans marque, de sorte que l'expérience s'intègre parfaitement au reste de votre site.

Pour démarrer avec Jetpack Search, il vous suffit de l'installer et de l'activer. Ensuite, allez dans Jetpack → Rechercher et faites défiler jusqu'aux paramètres.

Activer la recherche Jetpack

Ici, vous pouvez utiliser la bascule pour activer la recherche Jetpack. Vous pouvez également activer l'expérience de recherche instantanée. Cela permettra une superposition dynamique pour la recherche, le tri et le filtrage, sans forcer les visiteurs à recharger la page. Vos modifications seront mises à jour automatiquement, offrant aux visiteurs une expérience de recherche avancée immédiatement.

Foire aux questions (FAQ) sur la recherche WordPress

Au cas où vous auriez encore quelques questions, examinons quelques requêtes courantes des lecteurs concernant la fonctionnalité de recherche.

Pourquoi devrais-je ajouter une barre de recherche dans WordPress ?

Une barre de recherche est un moyen simple d'améliorer votre expérience utilisateur. Les petits sites Web peuvent être en mesure de faire correspondre les visiteurs avec le contenu qu'ils recherchent assez rapidement.

Cependant, les sites volumineux et complexes comme les magasins de commerce électronique peuvent avoir des centaines, voire des milliers de pages. Par conséquent, les visiteurs peuvent être frustrés en essayant de trouver du contenu en utilisant uniquement le menu de navigation.

Une barre de recherche peut fournir des résultats instantanés et diriger les visiteurs vers l'endroit où ils souhaitent se trouver sur votre site. De cette façon, vous pouvez réduire les taux de rebond et augmenter le temps passé sur le site.

Quelle est la différence entre une barre de recherche et un champ de recherche ?

'Barre de recherche' et 'zone de recherche' sont des termes interchangeables. Les deux décrivent un champ placé sur votre site Web (généralement dans votre menu ou votre en-tête). Les visiteurs peuvent entrer des termes de recherche et des mots-clés dans ce champ pour découvrir le contenu de votre site.

Il est important de noter qu'une barre de recherche est différente d'une barre d'adresse. Une barre d'adresse est le champ situé en haut de votre navigateur dans lequel vous pouvez saisir une URL spécifique ou saisir des termes de recherche. Ensuite, un moteur de recherche (comme Google) vous met en correspondance avec le contenu de son index. La barre d'adresse effectue une recherche sur l'ensemble du Web, tandis que la barre (ou boîte) de recherche est liée à un seul site Web.

Comment puis-je améliorer l'expérience de recherche WordPress pour mes visiteurs ?

Une barre de recherche est un excellent moyen de fournir une expérience utilisateur exceptionnelle, mais il existe également des moyens d'optimiser l'expérience de recherche.

Par exemple, vous pouvez placer votre barre de recherche à un endroit facilement accessible, comme votre en-tête, votre pied de page ou votre barre latérale. De plus, vous pouvez améliorer l'expérience de recherche WordPress en fournissant des suggestions de recherche en direct.

La correction orthographique est un autre excellent outil pour rendre l'expérience de recherche plus précise. De plus, vous pouvez prendre en charge les recherches filtrées, afin que les clients puissent trouver du contenu en recherchant des balises, des catégories, des dates spécifiques, etc.

Jetpack Search : un plugin de recherche WordPress puissant et personnalisable

L'un des moyens les plus simples de garder les visiteurs sur votre site est de rationaliser la navigation. Une barre de recherche vous permet de le faire car elle connecte rapidement les visiteurs au contenu qu'ils recherchent. Mieux encore, il existe de nombreuses façons simples d'ajouter une barre de recherche à votre site Web.

Par exemple, vous pouvez ajouter une barre de recherche à WordPress en utilisant le bloc de recherche ou utiliser un code personnalisé et le modifier pour répondre à vos besoins.

Alternativement, vous préférerez peut-être créer cette fonctionnalité avec un plugin, qui peut être l'un des meilleurs moyens d'implémenter une fonction de recherche puissante sur votre site. Avec une solution comme Jetpack Search, vous pouvez implémenter des résultats rapides et un filtrage puissant pour garder les visiteurs sur votre site.

De plus, vous pouvez activer une expérience de recherche instantanée avec une superposition dynamique, pour générer des résultats encore plus rapidement. Consultez les plans aujourd'hui pour commencer!