[WordPress] Montrez le nombre de résultats d’une recherche

Lorsqu’un visiteur de votre site utilise la recherche, c’est soit qu’il sait qu’un article existe sur un sujet particulier, soit qu’il est sur le point de partir parce qu’il n’a pas trouvé ce qu’il souhaite.

Autant dire que la fonctionnalité de recherche est le dernier moyen de retenir ce visiteur. Mieux vaut la rendre pratique et agréable.

Sur WordPress, la recherche par défaut est pas mal, même si certains préfèrent la remplacer par un moteur Google Custom Search.

 
L’une des choses qui me gênent le plus est que le moteur de recherche de WordPress ne dit pas combien de résultats ont été trouvés. C’est pourtant une information importante.

Une page classique de résultats affichera simplement un titre du genre « Résultats de la recherche ».

 
Nous pouvons améliorer ceci et rendre ce titre plus dynamique. Par exemple : « N résultats pour la recherche mes termes« .
 

Il suffit pour cela d’éditer le fichier search.php de votre thème.

Vous y trouverez quelque chose du genre (dans la plupart des thèmes, c’est le cas):

<h1 class="page-title"><?php _e( 'Search Results, 'websourcing' )?></h1>

Changez ce titre par ce qui suit :

<h1 class="page-title">
<?php
   $search =& new WP_Query("s=$s & showposts=-1");
   $count = $search->post_count;
   printf( __( '%d search results for %s', 'websourcing' ), $count, the_search_query() ); ?>
</h1>

Lors d’une recherche, vous verrez maintenant apparaitre : 257 résultats pour la recherche xxx.

Mieux, si vous voulez faire ressortir les termes de la recherche, ajoutez y une classe spécifique, que vous définirez dans votre feuille de styles. par exemple la classe terms.

<h1 class="page-title">
<?php
   $search =& new WP_Query("s=$s & showposts=-1");
   $count = $search->post_count;
   printf( __( '%d search results for %s', 'websourcing' ), $count, '<span class="terms">' . get_search_query() . '</span>' ); ?>
</h1>

Il vous suffit ensuite de définir le style .terms et le tour est joué :

.terms{
color: red;
font-style:italic;
}

et le résultat :