Contexte
Pourquoi styler son champ de recherche? Vous utilisez un thème en français, mais certains dysfonctionnements se produisent. Par exemple, le mot rechercher dans le widget de recherche de WordPress est coupé comme ça :
La première chose à faire, si ce n’est pas déjà fait, est d’utiliser un thème enfant. Si vous ne connaissez pas les thèmes enfants, allez voir ici :
- tous les avantages des thèmes enfant.
- et comment faire, notamment avec un générateur de thème enfant.
Incorporer une police de caractères spéciaux
Le mot rechercher en tant que libellé du bouton est trop long à mon goût, et le mot search, comment dire, trop anglais.
Il faut donc remplacer ce mot par un pictogramme.
La solution que j’ai choisie pour mon site est d’incorporer une police de caractères spéciaux, awesome, bien connue sur le web, afin d’utiliser des icônes standards et immédiatement reconnaissables. Cette police étant absente de mon thème, il faut donc la rajouter.
Dans le fichier functions.php de mon thème, je rajoute le code suivant.
[php]
/*************************************************************************/
// Ajoute notre css contenant la police awesome, trouvée sur le net
function enqueue_our_required_stylesheets(){
wp_enqueue_style(‘font-awesome’, ‘//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css’);
}
add_action(‘wp_enqueue_scripts’,’enqueue_our_required_stylesheets’);
[/php]
A noter que cette étape est inutile si vous désirez utiliser des images en lieu et place des pictogrammes. Mais cette police étant incorporée une bonne fois pour toutes, elle pourra servir de nouveau, ce qui augmentera l’homogénéité de la présentation de votre site.
Modifier le template du formulaire
Dans le répertoire de mon thème enfant, je rajoute le fichier suivant, que je nomme searchform.php.
Le nom est important puisque c’est grâce à celui-ci que WordPress fera la substitution de son mécanisme par défaut.
[php]
<?php
/**
* Template for displaying search forms in MonDivi
*
* @package WordPress
*/
?>
<form role="search" method="get" class="search-form" action="<?php echo esc_url( home_url( ‘/’ ) ); ?>">
<label>
<input type="text" class="search-field" placeholder="Rechercher …" value="<?php echo get_search_query(); ?>" name="s" id="s"/>
</label>
<button type="submit" id="searchsubmit">
<span class="awesome">
<i class="fa fa-search" aria-hidden="true"></i>
</span>
</button>
</form>
[/php]
Et le style ?
On y arrive enfin. Dans le fichier style.css de mon thème enfant, je rajoute les lignes suivantes :
[php]
/***********************************/
/* Widget de recherche */
/***********************************/
.widget_search .screen-reader-text {
display:none;
}
.widget_search {
position:relative;
height:60px;
}
.widget_search input#s {
position:absolute;
top:30px;
height: 40px!important;
margin: 0;
padding: .7em;
border: 1px solid #ddd;
color: #666;
font-size: 14px;
line-height: normal!important;
}
.widget_search .awesome {
font-size: 1.5rem;
}
.widget_search #searchsubmit {
top:30px;
left:197px;
width:40px;
height:40px;
border: none;
background-color:#FFFFFF;
}
.widget_search #searchsubmit:hover {
background-color:#AAAAAA;
border: none;
}[/php]
Et voilà, le tour est joué, voici mon nouveau champ :
Affichage normal :
Avec le curseur par dessus : 
Bien entendu, le css produit ici n’est fourni qu’à titre d’exemple.
Si vous préférez utiliser une image plutôt qu’un pictogramme issu de la police awesome, vous n’effectuez pas la première étape (INCORPORER UNE POLICE DE CARACTÈRES SPÉCIAUX), et vous ajoutez une propriété background-image dans le sélecteur .widget_search #searchsubmit
