Avez-vous vu l’icône de recherche à bascule sur de nombreux sites Web populaires? Jetez un œil à notre projet sœur List25 pour voir un exemple. L’idée est d’afficher une simple icône de recherche, et lorsque l’utilisateur clique dessus, les formulaires de recherche glissent, également connus sous le nom d’effet de bascule. C’est un effet soigné qui économise également de l’espace et permet aux utilisateurs de se concentrer sur le contenu. Sans oublier, c’est idéal pour les sujets qui répondent aux appareils mobiles. Dans cet article, nous vous montrerons comment ajouter un effet de bascule de recherche dans les thèmes WordPress.
Remarque: Ce tutoriel est destiné aux utilisateurs intermédiaires ayant une connaissance pratique des balises de modèle WordPress, HTML et CSS. Les utilisateurs de niveau débutant sont encouragés à s’exercer d’abord sur le serveur local.
Afficher le formulaire de recherche WordPress
WordPress ajoute des classes CSS par défaut au code HTML généré par diverses balises de modèle au sein d’un thème. Utilisez le modèle de balise de thème WordPress pour afficher le formulaire de recherche. Vous pouvez générer deux formulaires de recherche différents, un pour les thèmes HTML4 et un pour les thèmes pris en charge HTML5. Si votre thème a la ligne add_theme_support (‘html5’, array (‘search-form’)) dans le fichier functions.php, cette balise de modèle générera un formulaire de recherche HTML5. Sinon, il générera le formulaire de recherche HTML4.
Une autre façon de découvrir le formulaire généré par votre sujet consiste à consulter le code source du formulaire de recherche.
Voici la balise de modèle de formulaire get_search_form () qui sera affichée lorsque votre thème ne prend pas en charge HTML5:
Et c’est ainsi qu’il va générer pour un thème avec prise en charge HTML5.
Pour les besoins de ce tutoriel, nous utiliserons le formulaire de recherche HTML5. Si votre thème génère un formulaire de recherche HTML4, ajoutez cette ligne de code dans le fichier functions.php de votre thème:
add_theme_support('html5', array('search-form'));
Une fois que vous vous êtes assuré que votre formulaire de recherche génère un formulaire HTML5, l’étape suivante consiste à placer le formulaire de recherche là où vous souhaitez l’afficher avec l’effet de bascule.
Ajouter un effet de bascule au formulaire de recherche WordPress
La première chose dont vous aurez besoin est une icône de recherche. Le thème Twenty Thirteen par défaut dans WordPress est livré avec une très jolie petite icône, et nous l’utiliserons dans notre tutoriel. Cependant, n’hésitez pas à créer le vôtre dans Photoshop ou à en télécharger un à partir du Web. Assurez-vous simplement que le fichier est nommé search-icon.png.
Vous devez maintenant charger cette icône de recherche dans le dossier d’images de votre thème. Connectez-vous à votre site Web à l’aide d’un client FTP comme Filezilla et ouvrez votre répertoire de thèmes.
Maintenant, c’est l’étape finale et la plus cruciale. Vous devez ajouter ce CSS à la feuille de style de votre thème:
.site-header .search-form {
position: absolute;
right: 200px;
top: 200px;
}
.site-header .search-field {
background-color: transparent;
background-image: url(images/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;
}
.site-header .search-field:focus {
background-color: #fff;
border: 2px solid #c3c0ab;
cursor: text;
outline: 0;
width: 230px;
}
.search-form
.search-submit {
display:none;
}
La chose importante à garder à l’esprit à propos de ce CSS est les effets de transition CSS3 qui nous permettent de créer facilement l’effet de bascule. Notez également que vous devrez toujours ajuster la position de l’icône de recherche et du formulaire en fonction de la conception de votre thème.
Nous espérons que cet article vous a aidé à ajouter un effet de bascule de recherche à votre thème WordPress. Que pensez-vous du formulaire de recherche à bascule? Nous voyons de plus en plus de sites utiliser cet effet. Laissez vos commentaires et questions dans les commentaires ci-dessous ou rejoignez-nous dans la conversation sur Google+.
