Avez-vous vu l’icône de recherche avec effet de bascule sur de nombreux sites Web populaires ? Jetez un œil à notre projet frère Liste25 à titre d’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 permet également d’économiser de l’espace et permet à vos utilisateurs de se concentrer sur le contenu. Sans oublier que c’est idéal pour les thèmes réactifs mobiles. Dans cet article, nous allons vous montrer comment ajouter un effet de bascule de recherche dans les thèmes WordPress.
Noter: Ce didacticiel est destiné aux utilisateurs intermédiaires ayant une connaissance pratique des balises de modèles WordPress, HTML et CSS. Il est conseillé aux utilisateurs de niveau débutant de s’entraîner d’abord sur le serveur local.
Affichage du formulaire de recherche WordPress
WordPress ajoute des classes CSS par défaut au HTML généré par diverses balises de modèle à l’intérieur d’un thème. Utilisation des thèmes WordPress <?php get_search_form(); ?> balise modèle pour afficher le formulaire de recherche. Il peut générer deux formulaires de recherche différents, un pour les thèmes HTML4 et un pour les thèmes prenant en charge HTML5. Si votre thème a add_theme_support('html5', array('search-form')) ligne dans le fichier functions.php, cette balise de modèle produira un formulaire de recherche HTML5. Sinon, il produira un formulaire de recherche HTML4.
Une autre façon de savoir quel formulaire votre thème génère est de regarder le code source du formulaire de recherche.
Il s’agit de la forme que la balise de modèle get_search_form() s’affichera lorsque votre thème ne prend pas en charge HTML5 :
<form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
<div><label class="screen-reader-text" for="s">Search for:</label>
<input type="text" value="" name="s" id="s" />
<input type="submit" id="searchsubmit" value="Search" />
</div>
</form>
Et c’est le formulaire qu’il générera pour un thème prenant en charge HTML5.
<form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>"> <label> <span class="screen-reader-text">Search for:</span> <input type="search" class="search-field" placeholder="Search …" value="" name="s" title="Search for:" /> </label> <input type="submit" class="search-submit" value="Search" /> </form>
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 bascule.
Ajout de l’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 par défaut Twenty Thirteen 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 sur le Web. Assurez-vous simplement que le fichier est nommé search-icon.png.
Vous devez maintenant télécharger cette icône de recherche dans le dossier 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ème.
C’est maintenant 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 à noter à propos de ce CSS, ce sont les effets de transition CSS3 qui nous permettent de créer facilement l’effet de bascule. Notez également que vous devrez tout de même ajuster le positionnement de l’icône et du formulaire de recherche en fonction de la mise en page de votre thème.
Nous espérons que cet article vous a aidé à ajouter un effet de bascule de recherche dans votre thème WordPress. Que pensez-vous du formulaire de recherche à bascule ? Nous voyons de plus en plus de sites utilisant cet effet. Laissez vos commentaires et questions dans les commentaires ci-dessous ou rejoignez-nous dans la conversation à Google+.
