Créer une barre de recherche avec Effet Toggle sous WordPress

Vous avez bien remarqué sur de nombreux sites populaires une barre de recherche avec effet Toggle, c’est à dire une icône de recherche  simple qui s’affiche,mais lorsque l’utilisateur clique sur elle une barre de recherche glisse automatiquement pour afficher le champs de saisie.

Dans cet article, nous allons vous montrer comment ajouter un effet « Toggle »  à votre formulaire de recherche de WordPress.

Afficher le formulaire de recherche dans WordPress

Les Thèmes de  WordPress utilisent <?php get_search_form(); ?> pour afficher le formulaire de recherche. Il peut produire deux formulaires de recherche différents, l’un pour les thèmes HTML4 et un  autre pour les thèmes HTML5.

Si votre thème avait cette ligne dans le fichier functions.php : add_theme_support('html5', array('search-form')) , alors elle va afficher un formulaire de recherche en HTML5. Sinon, il va afficher un  formulaire de recherche en HTML4.

Une autre façon de savoir quelle formulaire utilisé par votre thème, c’est de voir le code source du formulaire de recherche en utilisant une extension comme « firebug » .

Si votre thème ne prend pas en charge HTML5 , vous allez trouver ce code:

<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>

Si votre thème prend en charge HTML5 , vous allez trouver ce code:

 <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>

Dans ce tutoriel nous allons utiliser le formulaire de recherche en HTML5. Si votre thème génère un formulaire de recherche en HTML4 , il faut ajoutez cette ligne dans le fichier functions.php de votre thème:

add_theme_support('html5', array('search-form'));

Une fois terminé, on va passer à la prochaine étape pour afficher le formulaire de recherche où vous le souhaitez :

Créer une barre de recherche avec Effet Toggle

Maintenant il faut chercher une icône de recherche, ou bien utilisez l’une des deux icones ci-dessous (clique droit et télécharger):

Toutefois, n’hésitez pas à créer votre propre icône en utilisant un logiciel comme Photoshop ou la télécharger en cherchant sur internet.

Assurez-vous que l’icône est nommée search-icon.png.

Maintenant, vous devez envoyer cette  icône dans le dossier images de votre thème. Connectez-vous à votre site en utilisant un client FTP comme Filezilla.

Maintenant, c’est la dernière étape et la plus importante. Vous devez ajouter cette 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;
}

Notez que vous aurez encore à régler le positionnement de l’icône de recherche selon la disposition de votre thème.