Une bascule de recherche propre et coulissante peut instantanément donner à votre site WordPress une apparence élégante et moderne. Au lieu d'afficher une barre de recherche complète dans votre en-tête ou de la masquer complètement, un effet de bascule maintient votre design soigné tout en rendant la recherche facile d'accès.
Nous avons constaté que ce petit détail d'interface utilisateur faisait une grande différence, donnant aux sites un aspect plus soigné et professionnel sans ajouter d'encombrement.
Le meilleur ? Il existe des moyens de le faire intelligemment et efficacement.
Dans ce tutoriel, nous vous montrerons exactement comment ajouter un effet de bascule de recherche fluide et coulissante dans WordPress. Que vous gériez un blog, un site d'entreprise ou une boutique en ligne, cette amélioration contribuera à améliorer votre expérience utilisateur avec une touche simple et élégante. 🎨
Qu'est-ce que l'effet de bascule de recherche dans WordPress ?
L'effet de bascule de recherche est une technique de conception Web qui vous permet, au lieu d'afficher un formulaire de recherche, d'afficher une icône de recherche. Lorsqu'un utilisateur clique dessus, le formulaire de recherche apparaît avec une animation coulissante.
Le formulaire de recherche WordPress par défaut n'est pas très esthétique. De nombreux thèmes WordPress populaires remplacent déjà le formulaire par défaut par leurs propres styles.
Cependant, si votre thème utilise toujours un formulaire de recherche statique et simple, vous pouvez utiliser ce tutoriel pour le rendre plus convivial.
Dans cette optique, nous vous montrerons comment ajouter facilement l'effet de bascule de recherche dans WordPress et rendre votre site plus interactif. Voici un aperçu rapide de tous les sujets que nous aborderons dans ce guide :
- Ajout d'un effet de bascule de recherche dans WordPress
- Dépannage de l'effet de bascule du formulaire de recherche
- Astuce bonus : Ajoutez une meilleure recherche WordPress pour votre site Web
- FAQ : Ajout d'un effet de bascule de recherche dans WordPress
- Plus de guides pour améliorer votre recherche WordPress
💡 Astuce d'initié : Ce tutoriel convient mieux aux utilisateurs de WordPress de niveau intermédiaire et avancé car il nécessite une compréhension de base du HTML / CSS.
Commençons.
Ajout d'un effet de bascule de recherche dans WordPress
Pour ajouter un effet de bascule de recherche dans WordPress, vous devrez placer un bloc ou un widget de formulaire de recherche sur votre site Web, puis ajouter du code CSS personnalisé.
Tout d'abord, assurons-nous que vous avez un formulaire de recherche sur votre site Web.
Ajout d'un formulaire de recherche dans un thème de bloc avec l'édition complète du site
Si vous utilisez un thème WordPress de bloc avec la fonctionnalité d'édition complète du site, voici comment ajouter le formulaire de recherche à votre site Web.
Visitez simplement Apparence » Éditeur depuis votre tableau de bord WordPress. Sur l'écran d'édition, vous voudrez ajouter le bloc « Recherche » là où vous souhaitez afficher le formulaire de recherche.
Après cela, n'oubliez pas de cliquer sur le bouton « Enregistrer » pour sauvegarder vos modifications.
Ajout d'un formulaire de recherche dans d'autres thèmes WordPress
Pour les thèmes WordPress sans la fonctionnalité d'édition complète du site, vous pouvez ajouter le bloc ou le widget de recherche à votre barre latérale ou à toute zone prête pour les widgets.
Pour ce faire, vous devrez vous rendre sur Apparence » Widgets depuis votre tableau de bord WordPress. Ensuite, vous pouvez ajouter le bloc/widget « Recherche » à la barre latérale où vous souhaitez afficher le formulaire de recherche.
Ensuite, trouvons une image transparente pour l'icône de recherche.
Pour ce tutoriel, nous utilisons cette image car elle convient aux arrière-plans sombres (n'hésitez pas à l'utiliser sur votre site Web).
Si vous avez besoin de créer votre propre icône de recherche, il serait idéal de créer une image PNG transparente avec des dimensions ne dépassant pas 50x50 pixels.
La prochaine étape consiste à télécharger l'icône sur votre site Web. Allez simplement sur Média » Ajouter et cliquez sur « Sélectionner des fichiers » pour télécharger votre image d'icône de recherche.
Une fois téléchargé, vous voudrez cliquer sur le bouton « Copier l'URL dans le presse-papiers » et coller l'URL dans un éditeur de texte brut comme le Bloc-notes ou TextEdit.
Maintenant que tout est en place, vous devrez ajouter du CSS personnalisé à votre site Web WordPress. Nous vous recommandons d'utiliser WPCode, le meilleur plugin d'extraits de code, pour enregistrer votre CSS personnalisé.
WPCode vous permet d'ajouter facilement des extraits de code personnalisé dans WordPress. Il est facile à utiliser, et votre code ne sera pas affecté par les mises à jour de thème ou lorsque vous changerez de thème.
Certaines de nos marques partenaires l'utilisent pour ajouter et gérer leurs extraits personnalisés. Cela a très bien fonctionné pour eux, et vous pouvez en savoir plus dans notre revue détaillée de WPCode.
Alors, installons et activons le plugin gratuit WPCode. Si vous avez besoin d'aide, vous pouvez consulter notre guide étape par étape sur comment installer un plugin WordPress.
Après l'activation, visitez simplement la page Extraits de code » + Ajouter un extrait dans votre tableau de bord d'administration WordPress.
Sur l'écran suivant, vous verrez la bibliothèque d'extraits WPCode.
Survolez l'option « Ajouter votre code personnalisé (Nouvel extrait) » dans la bibliothèque et cliquez sur le bouton « Ajouter un extrait personnalisé » lorsqu'il apparaît.
Après cela, une liste de types de code apparaîtra à l'écran. Vous devez sélectionner l'option « Extrait HTML » pour ce tutoriel.
C'est parce que vous chargerez le CSS personnalisé dans l'en-tête du site Web en utilisant HTML.
À partir de là, vous devez fournir un titre pour cet extrait de code.
Il peut s'agir de tout ce qui vous aide à identifier l'extrait.
Maintenant, vous pouvez coller le code suivant dans la boîte « Aperçu du code » :
<style type="text/css">
.wp-block-search__inside-wrapper
.wp-block-search__input {
background-color: transparent;
background-image: url(/url/to/search-icon.png);
background-position: 5px center;
background-repeat: no-repeat;
background-size: 24px 24px;
border: none;
cursor: pointer;
height: 37px;
margin: 3px 0;
padding: 0 0 0 34px;
position: relative;
-webkit-transition: width 400ms ease, background 400ms ease;
transition: width 400ms ease, background 400ms ease;
width: 0;
}
.wp-block-search__inside-wrapper
.wp-block-search__input:focus {
background-color: #fff;
border: 2px solid #c3c0ab;
cursor: text;
outline: 0;
width: 230px;
}
.search-form
.search-submit {
display:none;
}
</style>
⚠️ Important : N'oubliez pas de remplacer /url/to/search-icon.png par l'URL de l'image que vous avez copiée précédemment.
Après cela, vous devrez basculer le commutateur « Inactif » sur « Actif ».
Ensuite, n'oubliez pas de cliquer sur le bouton « Enregistrer le bloc-notes ».
Et c’est tout !
Si vous visitez votre site Web, vous pouvez voir votre formulaire de recherche avec l'effet de bascule en action.
Dépannage de l'effet de bascule du formulaire de recherche
La méthode ci-dessus fonctionnerait avec la plupart des thèmes WordPress modernes utilisant des blocs de widgets. Cependant, pour certains thèmes, cette méthode peut ne pas fonctionner.
Cela pourrait se produire si le formulaire de recherche de votre thème WordPress n'a pas les classes wp-block-search__inside-wrapper et wp-block-search__input .
Dans ce cas, vous devrez utiliser l'outil Inspecter pour découvrir quelles classes CSS sont utilisées par votre thème WordPress.
Par exemple, dans la capture d'écran ci-dessous, notre thème de démonstration utilise ces classes CSS pour le formulaire de recherche.
Maintenant, vous pouvez modifier le code ci-dessous et utiliser ces classes CSS à la place.
Voici un exemple :
<style type="text/css">
.search-wrap input.s {
background-color: transparent;
background-image: url(/url/to/search-icon.png);
background-position: 5px center;
background-repeat: no-repeat;
background-size: 24px 24px;
border: none;
cursor: pointer;
height: 37px;
margin: 3px 0;
padding: 0 0 0 34px;
position: relative;
-webkit-transition: width 400ms ease, background 400ms ease;
transition: width 400ms ease, background 400ms ease;
width: 0;
}
.search-wrap input.s:focus {
background-color: #fff;
border: 2px solid #c3c0ab;
cursor: text;
outline: 0;
width: 230px;
}
.search-form
.search-submit {
display:none;
}
</style>
Voici à quoi cela ressemblait sur notre site Web de test :
Astuce bonus : Ajoutez une meilleure recherche WordPress pour votre site Web
L'effet de bascule rend uniquement votre formulaire de recherche WordPress plus esthétique. Il n'affecte pas la qualité des résultats de recherche de votre site Web.
WordPress est livré avec une fonctionnalité de recherche très basique par défaut. Cette fonctionnalité est souvent lente, inexacte et peut afficher des résultats vides.
C'est là qu'intervient SearchWP, le meilleur plugin de recherche WordPress. Il vous permet de remplacer facilement la fonctionnalité de recherche par défaut par un moteur de recherche puissant.
Nous l'avons testé pour explorer toutes ses fonctionnalités, et vous pouvez consulter notre test complet de SearchWP pour en savoir plus.
SearchWP remplace automatiquement les formulaires de recherche, vous n'avez donc pas besoin de modifier les fichiers de votre thème. Il recherche des correspondances partout sur votre site Web et améliore considérablement la qualité des résultats de recherche.
Il est également livré avec une extension de recherche en direct qui affiche instantanément les résultats au fur et à mesure que les utilisateurs tapent leurs requêtes. De plus, il offre un support complet pour l'e-commerce, ce qui vous permet de créer une expérience de recherche WooCommerce intelligente sur votre boutique en ligne.
Pour des instructions étape par étape, n'hésitez pas à consulter notre guide sur comment améliorer la recherche WordPress avec SearchWP.
FAQ : Ajout d'un effet de bascule de recherche dans WordPress
Vous avez des questions sur le fonctionnement de l'interrupteur de recherche ou sur la façon de le personnaliser sur votre site WordPress ? Voici quelques questions courantes que nous recevons, avec des réponses claires pour vous aider.
Ai-je besoin de connaître le codage pour ajouter un effet d'interrupteur de recherche ?
Pas vraiment. Bien qu'une compréhension de base de HTML ou de CSS puisse aider, vous pouvez suivre les étapes de ce guide sans aucune expérience en codage.
Que se passe-t-il si mon thème n'affiche pas correctement l'effet d'interrupteur ?
Certains thèmes peuvent nécessiter des ajustements supplémentaires. Si l'interrupteur ne s'affiche pas correctement, vous pouvez utiliser l'outil Inspecter du navigateur pour trouver les classes CSS de votre thème et modifier le CSS personnalisé comme indiqué dans le tutoriel.
Cet interrupteur de recherche fonctionnera-t-il sur les appareils mobiles ?
Oui ! L'effet d'interrupteur est réactif et devrait bien fonctionner sur ordinateur et sur mobile. Assurez-vous simplement de le tester sur différentes tailles d'écran pour confirmer que tout est parfait.
Puis-je utiliser n'importe quelle image pour l'icône de recherche ?
Oui, mais il est préférable d'utiliser une icône PNG transparente qui se démarque sur l'arrière-plan de votre site. Nous vous recommandons de la garder en dessous de 50x50 pixels pour qu'elle soit nette et se charge rapidement.
Plus de guides pour améliorer votre recherche WordPress
Nous espérons que cet article vous a aidé à apprendre comment ajouter un effet d'interrupteur de recherche dans WordPress. Ensuite, vous pourriez trouver ces guides utiles :
- Comment ajouter une barre de recherche au menu WordPress
- Comment rechercher par catégorie dans WordPress
- Comment ajouter une recherche multilingue dans WordPress
- Comment inclure des types de publication personnalisés dans les résultats de recherche WordPress
- Comment créer un répertoire de membres consultable dans WordPress
- Comment créer une base de données consultable dans WordPress
- Comment exclure des pages des résultats de recherche WordPress
- Comment ajouter la fonction de recherche vocale à votre site WordPress
- Meilleurs plugins de recherche pour les utilisateurs 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.
Prad
Merci pour cela.
L'interface utilisateur du bloc de recherche par défaut est assez fade. J'aime cette implémentation. Cependant, lorsqu'il est sélectionné « Bouton uniquement », lorsque l'utilisateur clique sur l'icône de recherche, la barre de recherche apparaît à gauche, déplaçant le menu, ce qui gâche l'interface utilisateur. Existe-t-il un moyen de faire apparaître la barre de recherche sous le bouton de recherche, comme sur de nombreux sites Web ? Cette approche semble beaucoup plus propre, à mon avis.
Merci.
Support WPBeginner
That can be a little more complex depending on the implementation but we may look into something like that for a possible future update to the article
Admin
Dennis Muthomi
J'ai cet effet sur le site web d'un client.
Une chose à considérer lors de la mise en œuvre de cette fonctionnalité est l'expérience mobile.
Sur les petits écrans, il pourrait être avantageux d'ajuster le CSS pour s'assurer que la barre de recherche étendue ne chevauche pas d'autres éléments.
Jiří Vaněk
Je cherchais un moyen de gagner de la place dans mon menu principal, où la boîte de recherche prenait beaucoup de place. Honnêtement, je ne voyais pas comment gagner de la place car le menu était assez long. J'ai donc essayé de réduire la taille de la boîte de recherche. Après avoir lu cet article, j'ai appliqué votre solution et c'est exactement ce que je cherchais. La recherche sur mon site Web n'est pas très utilisée, et c'est une solution élégante pour laisser de la place au menu principal et réduire la boîte de recherche à la taille nécessaire. Excellent travail.
Support WPBeginner
Heureux que vous ayez trouvé cela utile !
Admin
James Burns
Merci beaucoup. Exactement les informations dont j'avais besoin, présentées dans un format facile à comprendre.
Support WPBeginner
You’re welcome, glad you found our content helpful
Admin
Osh
Bonjour,
J'utilise un thème enfant, dois-je ajouter ces codes aux fichiers du thème parent ?
J'ai essayé de faire ça et ça ne marche pas, s'il vous plaît aidez-moi !!!
Merci
Support WPBeginner
Vous voudrez ajouter le code à votre thème enfant
Admin
Benjamin Rutledge
Est-il possible de l'implémenter uniquement sur mobile ? Mon thème a une belle fonction de recherche animée sur ordinateur, mais seulement un interrupteur pour afficher/masquer la zone de recherche à la place de mon logo sur mobile.
Beth Terry
Bonjour. Merci beaucoup pour ce code. J'ai dû jouer avec le positionnement pour que le bouton de recherche apparaisse où je voulais, et comme je voulais qu'il n'apparaisse que dans la version mobile, j'ai également ajouté du CSS à la media query pour les écrans de plus de 800px afin d'afficher le champ de recherche complet au lieu de l'icône. Je l'ai fait fonctionner à merveille, mais je pense que c'est un peu compliqué pour ceux qui veulent juste quelque chose à brancher et à utiliser.
Vous pouvez voir les résultats ici :
À tous ceux qui doutent, JavaScript n'est absolument pas nécessaire.
Beth Terry
Je tiens également à ajouter que j'utilise un thème enfant Twenty Twelve, qui est livré avec le code de recherche HTML4. L'ajout du support HTML5 à functions.php ne l'a pas résolu, j'ai donc copié et collé le code de recherche HTML5 que vous avez posté ci-dessus dans l'en-tête de mon thème où je voulais que la boîte de recherche soit.
Emily G
Bonjour – je mets cela en œuvre sur un site web et j'aimerais utiliser FontAwesome à la place d'une image. Je n'arrive pas à faire apparaître l'icône. Avez-vous des conseils ? J'ajoute la police et la famille de polices de caractères de l'icône : FontAwesome;
content: “\f002″; à la classe .search-form input[type=”search”]
Merci !
Bradley
Essayez ceci :
font: normal normal normal 1em/1 FontAwesome;
Steve
J'espérais tellement que cela fonctionnerait pour moi. J'ai collé le code dans la zone CSS additionnel de mon thème (twentytwelvechild), j'ai ajouté search-icon.png à mon dossier de thème en utilisant FTM et j'ai ajouté add_theme_support('html5', array('search-form')); à mon fichier functions.php. Je ne vois aucun changement et je me demande ce que j'ai manqué. J'espère que quelqu'un pourra me donner un indice. Merci.
Harmandeep Singh
Ça ne fonctionne pas.
Crowd
Merci beaucoup, ça marche à merveille.
Pensez-vous qu'il y ait un moyen de faire apparaître le champ de recherche de droite à gauche (contrairement à la gauche vers la droite comme maintenant) ?
Marimar
Aligner le texte à droite
text-align: right;
Il glisse de l'autre côté.
Tony López
Merci ! Ça marche parfaitement.
Cato
Ouais… comme je le pensais, ça ne marche pas du tout. Comment est-ce censé fonctionner sans JS de toute façon ?
Cato
Hmmm, c'est un peu ancien mais… pas de javascript requis ici, vraiment ? Quelle sorte de magie noire est-ce là ?
Support WPBeginner
Au lieu de JS, cette technique utilise du CSS.
Admin
SiRetu
Merci pour le code… Est-ce responsive ? Je veux dire, je veux que le champ de recherche soit entièrement affiché sur mobile. Est-ce possible ?
Panfi
Not working for me and wonder why
Cassy
J'ai réussi à faire fonctionner ça sur Genesis, mais mon formulaire de recherche est dans ma barre de navigation, et quand la largeur de l'écran est relativement trop petite, le formulaire de recherche descend.
Sohan
Ça marche !
Merci beaucoup !
Anur
Je ne pense pas que ça marche sur Genesis
Cassy
J'ai réussi à le faire fonctionner sur Genesis. Vous devez déplacer search-icon.png dans le dossier images de votre thème enfant Genesis. Ensuite, selon l'endroit où vous placez votre formulaire de recherche, le mien est dans la barre de navigation, donc c'est légèrement différent, vous ajustez le style CSS à votre goût. J'ai dû modifier la classe ".genesis-nav-menu .search input" pour que cela fonctionne.
Laura
Salut Cassy, Peux-tu donner un peu plus d'informations sur la façon dont tu as modifié la classe .genesis-nav-menu .search input ? Je n'arrive pas à le faire fonctionner. Merci !
Maria
Salut ! J'utilise Genesis et je n'arrive pas à faire fonctionner cet effet. Des astuces pour savoir pourquoi ?
Anur
oui le même problème je suis sur genesis avec le thème enteprise pro ça ne marche pas.
Quelqu'un qui a une solution pour faire fonctionner ça sur genesis..
Roy
C'est vraiment super ! Est-il possible que l'icône soit statique à droite pendant que le formulaire glisse vers la gauche ? Je n'arrive pas à trouver comment faire !
Joshua Farr
Salutations – Merci pour ce super bout de code. J'ai essayé de l'insérer sur le site d'un client sur lequel je travaille, en utilisant la version HTML5 du code. J'ai placé le morceau supplémentaire dans functions.php et ajouté tout le CSS. J'ai mis une icône de recherche et j'ai réussi à afficher le formulaire comme je le voulais sur le site – il fait même tout l'effet de bascule comme désiré – mais lorsque j'entre le texte que je veux rechercher pour le tester, je ne peux pas soumettre la recherche pour voir les résultats. Nous utilisons un thème woocommerce, "Mystile", qui a un formulaire de recherche par défaut (qui fonctionne lorsqu'il est entré) mais je préfère de loin l'apparence et la fonctionnalité du formulaire comme mentionné sur cette page.
Nous avons essayé de placer le code du formulaire de recherche woocommerce côte à côte avec le code que vous avez donné ci-dessus, nous avons essayé d'échanger des morceaux pour "fusionner" les deux... mais sans succès.
Toute recommandation serait extrêmement utile.
Merci !
-Josh
Support WPBeginner
Il pourrait y avoir de nombreuses raisons à cela, il ne nous est pas possible de vous aider avec les problèmes de compatibilité de thèmes.
Admin
Rajeesh Nair
Voilà qui est intéressant. Bien que je sois un simple débutant et que j'utilise la fonction de recherche par défaut du thème du blog qui ressemble à une fenêtre pop-up (pas exactement une pop-up car c'est du CSS et non du Javascript) et affiche une barre de recherche.
Mais ce que je cherche exactement, c'est comment afficher la recherche Google avec la recherche du blog, comme on le trouve sur des blogs populaires comme ListVerse et d'autres. S'il vous plaît, guidez-moi !
Support WPBeginner
Jetez un œil à notre guide sur la façon d'ajouter la recherche Google dans WordPress.
Admin
adolf witzeling
Un autre excellent tutoriel. Je vais l'ajouter à mon site, juste parce que c'est cool.
alexisnicholson
Le code est fabuleux, j'apprécie vos efforts, je vais sûrement essayer celui-ci pour mon projet WordPress.
Codingbrains
Shahraar Khan
Une démo serait utile... Et à quoi sert l'attribut role="search" dans la balise form, à quoi sert l'attribut "role" ?
Susan Silver
Je cherchais un tutoriel simple sur ce sujet. Merci ! Avez-vous déjà fait un tutoriel sur les menus coulissants comme ceux de l'application mobile Facebook ? Ces menus deviennent très populaires, même pour les applications de bureau.
Support WPBeginner
En fait, nous en avons fait un, consultez comment ajouter un menu à panneau coulissant dans WordPress.
Admin