Vous avez l'impression que la barre de recherche de votre site prend beaucoup de place et que votre navigation est encombrée ? Mais si elle pouvait être un peu plus attrayante, un peu plus moderne ?
Au fil des ans, nous avons modifié la conception de notre site web à plusieurs reprises et expérimenté pour rendre le formulaire de recherche plus attrayant. Et d'après notre expérience, l'utilisation d'un formulaire de recherche modal peut transformer l'expérience de recherche sur votre site.
Ces petites boîtes de recherche pop-up astucieuses peuvent sérieusement améliorer l'expérience utilisateur de votre site web, et elles ne sont pas aussi compliquées à mettre en place que vous pourriez le penser.
Dans cet article, nous allons vous montrer comment ajouter un formulaire de recherche modal dans WordPress sans modifier le code.
Qu'est-ce qu'un formulaire de recherche modal et pourquoi l'utiliser ?
Un formulaire de recherche modal est une fenêtre pop-up qui se superpose à votre page actuelle. Lorsqu'un utilisateur clique sur une icône de recherche sur votre site WordPress, une fenêtre apparaît directement au-dessus de la page, ne contenant que le champ de saisie de recherche et le bouton de soumission. Pensez-y comme à un projecteur, qui met l'accent sur ce contenu spécifique.
C'est différent d'une barre de recherche traditionnelle qui pourrait être située dans votre en-tête ou votre barre latérale, et qui est toujours visible. Les formulaires de recherche modaux sont masqués par défaut et n'apparaissent que lorsqu'un utilisateur souhaite activement rechercher.
Par exemple, sur SearchWP, nous utilisons un formulaire de recherche modal pour offrir une expérience de recherche sans distraction à nos utilisateurs. Voici à quoi cela ressemble sur notre site web :
Un formulaire de recherche modal permet de garder la mise en page de votre site propre et épurée. Fini les barres de recherche volumineuses qui occupent un espace précieux. De plus, l'attention de l'utilisateur est immédiatement attirée par la fonction de recherche lorsqu'elle apparaît. Il est difficile de la manquer, ce qui est idéal pour améliorer l'engagement.
De plus, un formulaire de recherche modal offre une flexibilité de conception. Que votre site ait un design minimaliste ou une mise en page complexe, il peut s'intégrer harmonieusement.
Maintenant, voyons comment ajouter un formulaire de recherche modal à votre site WordPress.
Ajouter un formulaire de recherche modal dans WordPress
Le moyen le plus simple d'afficher un formulaire de recherche modal est d'utiliser le plugin SearchWP Modal Search Form.
Le meilleur, c'est que le plugin de recherche WordPress est entièrement gratuit et s'appuie sur le style de votre thème WordPress actif. Vous n'avez pas à toucher une seule ligne de code pour modifier son apparence ou son style.
Pour commencer, vous devrez installer et activer le plugin SearchWP Modal Search Form. Si vous avez besoin d'aide, veuillez consulter ce guide sur comment installer un plugin WordPress.
Après l'activation, vous pouvez accéder à la page SearchWP » Modal Form depuis le tableau de bord WordPress. De là, vous verrez que l'option « Activer le formulaire modal » sera active.
Ensuite, vous pouvez faire défiler vers le bas et sélectionner le fichier CSS à charger pour votre site. Par exemple, SearchWP Modal Search Form vous permettra de choisir entre le positionnement et le style visuel, le style de positionnement, ou aucun style.
Nous recommandons d'utiliser le paramètre par défaut « Positionnement et style visuel ». De cette façon, vous aurez plus de contrôle sur l'endroit où le formulaire de recherche apparaîtra et sur son apparence.
En plus de cela, il existe également des options pour activer le mode plein écran et désactiver le défilement.
Le Mode Plein Écran couvrira tout l'écran lorsqu'un utilisateur ouvrira le formulaire, offrant une expérience sans distraction.
Vous pouvez également activer l'option Désactiver le défilement. Cela améliore encore l'expérience de recherche en réduisant le mouvement de fond lorsqu'un utilisateur fait défiler accidentellement.
Lorsque vous avez terminé, cliquez simplement sur le bouton « Enregistrer les paramètres ».
Afficher le formulaire de recherche modal sur votre site Web
Ensuite, vous devrez afficher le formulaire de recherche modal n'importe où sur votre site Web. SearchWP vous permet d'ajouter le formulaire au menu de votre site, d'utiliser un bloc Gutenberg ou un shortcode.
Examinons chaque méthode pour afficher le formulaire de recherche modal dans WordPress.
1. Ajouter un formulaire de recherche modal au menu WordPress
Selon votre thème WordPress, vous pouvez ajouter le formulaire de recherche modal à n'importe quel menu de votre site.
Accédez simplement à Apparence » Menus depuis le tableau de bord WordPress. SearchWP ajoutera maintenant un nouveau groupe appelé « Formulaires de recherche modaux SearchWP » sous les éléments de menu.
Allez-y et sélectionnez le formulaire modal et cliquez sur le bouton « Ajouter au menu ».
Lorsque vous avez terminé, n'oubliez pas de cliquer sur le bouton « Enregistrer le menu ».
Après cela, vous pouvez visiter votre site pour le voir en action.
2. Afficher le formulaire de recherche modal dans les articles de blog et les pages
Vous pouvez également ajouter le formulaire de recherche modal à n'importe quel article de blog ou page de destination en utilisant le bloc Gutenberg ou un shortcode. C'est parfait si vous souhaitez afficher une option de recherche dans le contenu de votre site.
Tout d'abord, vous devrez visiter la page ou l'article où vous souhaitez afficher le formulaire de recherche. Une fois dans l'éditeur de contenu, cliquez simplement sur le bouton « + » et ajoutez le bloc « Formulaire modal ».
Après cela, vous pouvez modifier les paramètres du bloc Formulaire modal depuis le panneau de droite.
Par exemple, il existe des options pour modifier le texte, choisir un modèle et sélectionner si le formulaire sera un lien ou un bouton.
Lorsque vous avez terminé, cliquez simplement sur le bouton Enregistrer ou Publier.
À partir de là, vous pouvez visiter la page ou l'article pour voir le formulaire modal dans votre contenu.
Si vous préférez utiliser des shortcodes, vous pouvez entrer le shortcode suivant pour afficher le formulaire modal n'importe où sur votre site.
[searchwp_modal_search_form]
Vous pouvez également appliquer des personnalisations qui contrôlent divers attributs du modal lui-même. Par exemple, le shortcode suivant affichera un bouton avec le texte « Ouvrir la recherche » :
[searchwp_modal_search_form engine="my_searchwp_engine" template="My Custom Template" text="Open Search" type="button"]
Vous pouvez modifier chaque attribut du shortcode pour personnaliser le formulaire de recherche modal. Par exemple, remplacez simplement le type par un lien si vous ne souhaitez pas afficher de bouton et modifiez le texte.
3. Afficher le formulaire de recherche modal dans la zone des widgets
Vous pouvez également ajouter un formulaire de recherche modal à la zone des widgets de votre thème WordPress, telle que la barre latérale ou le pied de page.
Pour commencer, accédez simplement à Apparence » Widgets depuis le panneau d'administration WordPress. Après cela, vous pouvez cliquer sur le bouton « + » et ajouter le bloc de widget Formulaire modal.
Ensuite, vous verrez différentes options pour modifier les paramètres du formulaire modal dans le panneau de droite.
Il existe des options pour changer le texte, choisir un modèle et le transformer d'un lien en bouton.
Lorsque vous avez terminé, cliquez sur le bouton « Mettre à jour ».
À partir d'ici, vous pouvez visiter votre site et voir le formulaire modal dans la zone des widgets. Par exemple, nous l'avons ajouté à la barre latérale de notre site de démonstration.
Et ensuite…
Maintenant que vous savez comment ajouter facilement un formulaire de recherche modal à votre site, vous pouvez aller plus loin et améliorer l'expérience de recherche globale de vos visiteurs.
La recherche WordPress par défaut présente de nombreuses limitations et n'inclut pas des informations telles que les catégories, les tags, les champs personnalisés, les détails des produits, et plus encore dans le processus de recherche. Cependant, vous pouvez changer cela en utilisant SearchWP et remplacer les paramètres de recherche par défaut.
Le plugin vous aidera à créer des moteurs de recherche personnalisés illimités pour votre site Web, à configurer des formulaires de recherche personnalisés et à inclure des taxonomies, des champs personnalisés, des fichiers multimédias et d'autres informations importantes lors de la recherche de contenu sur votre site.
Le meilleur, c'est que vous pouvez utiliser le plugin SearchWP Modal Search Form avec SearchWP et exploiter tout le potentiel de la recherche de votre site Web.
Nous espérons que cet article vous a aidé à apprendre comment ajouter un formulaire de recherche modal dans WordPress. Vous voudrez peut-être aussi consulter notre guide sur comment créer un modèle de page de résultats de recherche Divi et comment configurer les paramètres de recherche WordPress pour de meilleurs résultats.
Prêt à créer une expérience de recherche WordPress meilleure et plus personnalisée ? Commencez dès aujourd'hui avec SearchWP !
