Alléger l’affichage du champ de recherche sous WordPress

Le widget de recherche fourni en standard par WordPress affiche un champ de recherche sous un titre. Un peu bêtement, il faut le dire. L’utilité du champ serait aussi bien indiquée à l’intérieur de ce champ.

Avec l’aide de JQuery, voici comment améliorer ce champ de recherche.

Commençons par ajouter JQuery dans le thème. Il faut le télécharger depuis le site officiel (choisir de préférence la version « minified » puis renommer le fichier en « jquery.js ») et le déposer dans le thème.

Éditer un nouveau fichier « widget-fixes.js » à déposer aussi dans votre thème WordPress, puis y coller :

$(document).ready(function() {
	var $searchInput = $("li.widget_search form input[name='s']");
	var val = $searchInput.val();
	if (val == '') {
		val = "rechercher…";
		$searchInput.val(val);
	}
	$searchInput.focus(function () {
		if ($searchInput.val() == val)
			$searchInput.val("");
	});
	$searchInput.blur(function () {
		if ($searchInput.val() == '')
			$searchInput.val(val);
	});
});

Ne pas hésiter à remplacer la chaîne de caractère "rechercher…" par une autre. Il faudrait d’ailleurs que j’internationalise ça. Prochainement.

Dans le fichier « header.php » du thème, référencer JQuery et notre script JavaScript :

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/widget-fixes.js"></script>

Et le tour est joué ! Le champ de recherche standard de WordPress affiche désormais « rechercher… », et l’efface lorsqu’on clique dedans.

Le titre et le libellé du widget sont devenus redondants. Ignorons-les au moyen d’un peu de CSS :

li.widget_search h3, li.widget_search form label, li.widget_search form input#searchsubmit {
	display: none;
}

Leave a Reply

Your email address will not be published. Required fields are marked *

Mesure anti-spam. Merci de copier le code « zkCHQL » dans le champ ci-dessous :