Si votre barre de recherche est reléguée dans une barre latérale ou un pied de page, vos visiteurs pourraient avoir du mal à trouver votre contenu ou à naviguer sur votre site.
D'après notre expérience dans la gestion de nombreux sites WordPress, une barre de recherche bien placée peut faire une grande différence en termes d'engagement des utilisateurs et de navigation sur le site.
Nous avons testé cela sur des dizaines de sites Web, et les résultats sont toujours les mêmes : lorsque les utilisateurs peuvent rechercher directement depuis le menu principal, ils interagissent davantage et restent plus longtemps. C'est une petite modification qui entraîne de grandes améliorations.
Prêt à rendre votre site WordPress plus convivial ? Dans ce guide étape par étape, nous vous montrerons exactement comment ajouter une barre de recherche à votre menu WordPress, sans aucun codage.
Pourquoi ajouter une barre de recherche au menu de navigation WordPress ?
Une barre de recherche aide les utilisateurs à trouver ce qu'ils cherchent sans quitter votre site WordPress. Cela peut améliorer l'expérience utilisateur, maintenir les visiteurs plus longtemps sur votre site et augmenter l'engagement.
C'est pourquoi la plupart des concepteurs de sites Web et des experts recommandent d'ajouter une barre de recherche au menu de navigation, où les utilisateurs peuvent facilement la trouver.
Selon le thème que vous utilisez, la manière d'ajouter une barre de recherche à votre menu sera différente. Si vous utilisez un thème classique, vous aurez besoin d'un plugin de recherche WordPress.
Quant aux utilisateurs de thèmes de blocs, ils peuvent simplement utiliser l'éditeur complet du site (FSE).
Dans cette optique, nous allons passer en revue les deux méthodes une par une. Vous pouvez utiliser les liens rapides ci-dessous pour accéder à la section souhaitée :
- Méthode 1 : Ajouter une barre de recherche dans le menu d'un thème WordPress classique
- Méthode 2 : Ajouter une barre de recherche dans le menu d'un thème WordPress de type bloc
- Astuce bonus : Utilisez SearchWP pour améliorer votre recherche WordPress
Commençons.
Méthode 1 : Ajouter une barre de recherche dans le menu d'un thème WordPress classique
Cette première méthode s'adresse à ceux qui utilisent un thème WordPress classique. Cela signifie que vous voyez le menu Apparence » Personnaliser dans votre tableau de bord WordPress et que vous pouvez accéder à l'outil de personnalisation du thème.
Si vous utilisez un thème classique, vous ne pouvez ajouter le widget de recherche WordPress qu'aux zones prêtes pour les widgets, comme la barre latérale, et non au menu WordPress.
Pour contourner ce problème, vous aurez besoin d'un plugin qui vous permette d'ajouter une barre de recherche à d'autres zones de votre site, y compris les menus de navigation.
SearchWP Modal Search Form est notre meilleure recommandation. Ce plugin gratuit est facile à utiliser, s'intègre parfaitement à n'importe quel thème et n'affectera pas négativement les performances de votre site. De plus, il ne nécessite pas le plugin premium SearchWP.
La première chose à faire est d'installer et d'activer le plugin SearchWP Modal Search Form. Pour plus de détails, consultez notre guide étape par étape sur comment installer un plugin WordPress.
Après l'activation, vous devez ajouter la barre de recherche à votre menu WordPress. Allez simplement dans Apparence » Menus, puis assurez-vous de sélectionner le menu Principal dans le menu déroulant « Sélectionner le menu à modifier ».
Après cela, cliquez sur le bouton « Sélectionner ».
Ensuite, cliquez sur la case SearchWP Modal Search Forms sur le côté gauche de l'écran.
Vous pouvez voir que le plugin a automatiquement ajouté un modèle de recherche « Native WordPress ». Cochez la case « Native WordPress ».
Ensuite, cliquez sur le bouton « Ajouter au menu ».
WordPress ajoutera maintenant un nouvel élément « Native WordPress » au menu.
Pour configurer cet élément, cliquez dessus. Pour commencer, il est conseillé de changer l'étiquette de navigation en « Recherche » afin que les visiteurs sachent qu'il s'agit d'un champ de recherche.
Pour apporter cette modification, tapez simplement « Search » dans le champ « Navigation Label ».
Après cela, cliquez sur le bouton « Save Menu » pour enregistrer vos modifications. Maintenant, si vous visitez votre blog WordPress, vous verrez une nouvelle barre de recherche dans le menu de navigation.
SearchWP stylisera automatiquement la recherche pour qu'elle corresponde à votre thème WordPress, comme vous pouvez le voir sur les images suivantes.
Méthode 2 : Ajouter une barre de recherche dans le menu d'un thème WordPress basé sur des blocs
Si vous utilisez un thème WordPress basé sur des blocs, vous pouvez utiliser l'éditeur complet de site pour ajouter une barre de recherche à votre menu de navigation.
Pour ce faire, allez simplement dans Apparence » Éditeur dans la zone d'administration de WordPress.
Vous verrez maintenant une liste d'options pour personnaliser votre thème.
Ici, cliquez simplement sur « Navigation ».
Ensuite, cliquez sur le bouton « Modifier » en forme de crayon.
Cela vous dirigera vers l'éditeur de blocs.
À ce stade, vous pouvez cliquer sur le bouton « + Ajouter un bloc » n'importe où sur l'écran.
Après cela, choisissez le bloc Recherche.
Votre menu de navigation devrait maintenant avoir une barre de recherche.
De plus, vous pouvez modifier le texte d'espace réservé et le changer en quelque chose comme « Que recherchez-vous ? ». Sur la barre latérale des paramètres du bloc, n'hésitez pas à personnaliser l'apparence de la barre de recherche.
Une fois que vous êtes satisfait du bloc de recherche, cliquez simplement sur « Enregistrer ».
Astuce bonus : Utilisez SearchWP pour améliorer votre recherche WordPress
En plus d'ajouter une barre de recherche à votre menu de navigation, il existe de nombreuses autres façons d'améliorer votre expérience de recherche WordPress.
L'une d'elles consiste à utiliser SearchWP. C'est le meilleur plugin de recherche WordPress pour personnaliser votre algorithme de recherche sans toucher au code.
Apprenez-en davantage sur le plugin dans notre avis détaillé sur SearchWP.
Par exemple, vous pouvez rendre votre formulaire de recherche encore plus convivial en ajoutant des résultats de recherche en direct à l'aide de la technologie Ajax. Cela montrera automatiquement au visiteur les résultats de recherche pertinents au fur et à mesure qu'il tape la requête, tout comme Google.
Pour plus d'informations, vous pouvez lire notre article sur comment ajouter une recherche Ajax en direct à votre site WordPress.
L'ajout d'une barre de recherche SearchWP est également facile. Si vous utilisez le formulaire de recherche SearchWP Search Modal dans la méthode 1, vous pouvez également utiliser le plugin SearchWP avec celui-ci.
Si vous utilisez un thème basé sur des blocs, SearchWP est livré avec un bloc de formulaire de recherche intégré que vous pouvez ajouter n'importe où sur votre site, y compris dans le menu de navigation.
Voici d'autres astuces et conseils pour améliorer la recherche WordPress :
- Comment personnaliser la page de résultats de recherche dans WordPress
- Comment rechercher par catégorie dans WordPress
- Comment utiliser plusieurs formulaires de recherche dans WordPress
- Comment ajouter une recherche multilingue dans WordPress
- Comment exclure des pages des résultats de recherche WordPress
- Comment ajouter la fonction de recherche vocale à votre site WordPress
Nous espérons que cet article vous a aidé à apprendre comment ajouter une barre de recherche à un menu WordPress. Vous voudrez peut-être aussi consulter nos guides sur la façon de styliser les menus de navigation et comment laisser les utilisateurs filtrer les articles et les pages dans WordPress.
Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.
Angel Rodriguez
Merci pour cela, ce plugin a très bien fonctionné et m'a évité de devoir remplacer ou modifier à nouveau mon thème.
Support WPBeginner
Nous sommes heureux que notre recommandation vous ait été utile !
Admin
Maricel
Merci ! Très utile et très facile.
Support WPBeginner
Heureux d'apprendre que notre article vous a été utile !
Admin
Rawan
Ces plugins n'ont pas été testés pour la version 5.8.1 de WP
Est-il toujours possible de les installer ou existe-t-il d'autres plugins testés pour cette version ?
jafrin
salut
Cette vidéo m'est très utile. Mais je veux que le menu de barre ressemble à la page d'Amazon. S'il vous plaît, aidez-moi. Comment créer une grande barre de recherche comme sur la page d'Amazon.
Support WPBeginner
Cela dépendrait des spécificités que vous recherchez, mais pour commencer, nous vous recommandons de consulter notre article ci-dessous :
https://www.wpbeginner.com/plugins/how-to-let-users-filter-posts-and-pages-in-wordpress/
Admin
Erin
Y a-t-il un moyen d'afficher les résultats générés par le plugin différemment ? J'obtiens une liste d'images et de descriptions, mais les images s'affichent dans des tailles très différentes. Je voudrais qu'elles s'affichent de la même manière que mes pages de produits, avec 24 résultats par page et 4 colonnes.
merci
Support WPBeginner
Pour personnaliser la page de résultats, vous devriez contacter le support du plugin et ils devraient être en mesure de vous aider.
Admin
Okereke Divine
Comme d'habitude, wpbeginner a toujours été utile. Merci beaucoup
Support WPBeginner
You’re welcome, glad our guide could be helpful
Admin
Parwez
Monsieur, comment avez-vous créé le logo, la barre de recherche et le menu dans l'en-tête côte à côte
Support WPBeginner
Our theme is custom created so we manually set that up with the creation of the theme
Admin
Angelica
Vraiment utile ! Je trouve que le style par défaut n'est pas visuellement agréable, mais l'option de glissement fonctionne à merveille. Merci pour cela.
Support WPBeginner
You’re welcome, glad our article could be helpful
Admin
Rochelle
Je voudrais que l'élément de recherche apparaisse comme premier élément du menu, pas le dernier. Est-ce possible ?
Support WPBeginner
It would depend on your specific theme but if you reach out to the plugin’s support they will be able to help you change the placement
Admin
Anupam Kumar
Bonjour,
Comment styliser les icônes sociales comme vous l'avez fait sur votre site, avec ces espaces et ces lignes, je ne connais pas le CSS.
Merci
Support WPBeginner
Pour comprendre le CSS et comment nous avons configuré nos icônes, vous devriez consulter notre article ici : https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Admin
Rubb
L'explication n'est pas correcte, les images de l'écran sont fausses et je pense que c'est le mauvais plugin
Support WPBeginner
Il semble que le plugin ait été mis à jour depuis la dernière mise à jour de cet article, nous allons examiner la mise à jour de ce post.
Admin
James King
Ça ne marche pas les gars. Il n'y a pas un tel plugin pour commencer.
Support WPBeginner
Thank you for letting us know, it appears the plugin has been renamed since we created this article. We’ll look into updating this
Admin
Raymond
Pourquoi chaque solution sur ce site est-elle un plugin ? Les plugins gonflent les sites web et les ralentissent ; on s'attendrait à ce que vous le sachiez. Il existe de meilleures solutions que d'installer un plugin pour tout !
Support WPBeginner
Nous nous efforçons de rendre les solutions aussi simples que possible pour nos utilisateurs, c'est pourquoi nos articles tendent vers les plugins. De cette façon, si un utilisateur n'est pas à l'aise avec la modification des fichiers de son site, il a une option de plugin qui peut être facilement supprimée de son site si elle ne lui convient pas.
De plus, ce n'est pas aussi simple que tous les plugins ralentissent votre site. Les plugins mal codés ralentissent votre site. https://www.wpbeginner.com/opinion/how-many-wordpress-plugins-should-you-install-on-your-site/
Admin
Ann
pourquoi mes paramètres n'ont-ils pas d'AJOUTER AU MENU DE RECHERCHE
Dan Conway
Je ne sais pas si c'est dû à une mise à jour, mais j'ai remarqué la même chose. Mais il semble que l'option se trouve sous « Ivory Search > Paramètres », puis vous devriez voir les premiers paramètres qui sont « Recherche dans le menu » et la première option développable pour sélectionner un menu auquel l'ajouter.
Aditi Bisen
Bonjour,
Pouvons-nous choisir si la recherche apparaît uniquement pour la version mobile/tablette et non pour le bureau ?
Ihsan
Malheureusement, il ne s'affiche pas correctement car il interfère avec le menu de navigation. J'ai essayé différents plugins et tous sont identiques. Pour un débutant, il semble qu'il n'y ait pas d'autre moyen que de demander au développeur du thème ou à un professionnel de le coder manuellement.
Damith
Non, vous n'avez pas besoin de devenir développeur ou professionnel pour faire une petite personnalisation CSS.