Niveau : Confirmé

Améliorer l'affichage des résultats de recherche sur WordPress

Tutoriel par (WebDesigner grapilleur de Kiwiz, Strasbourg)
Créé le , mis à jour le (41367 lectures)
Tags : php, cms, recherche, wordpress, search

Wordpress Logo

WordPress vous permet, grâce au fichier search.php, de contrôler l'affichage de vos résultats de recherche. C'est donc principalement ce fichier qui va nous servir dans ce tutoriel qui vise à entreprendre diverses actions pour l'amélioration de la présentation et de l'efficacité de ces résultats.

Liste des modifications à prévoir

Avant de nous lancer à l'aveuglette sur la modification de notre page, commençons par lister nos besoins :

  1. Affichage de l'intitulé de recherche dans la balise <title> de notre document
  2. Affichage d'un titre explicite sur notre document ("XX résultats pour la recherche termes")
  3. Listing de nos résultats sous la forme :
    • Titre/lien
    • Résumé/extrait de l'article
    • Lien en clair de l'article
    • Date de publication
  4. La pagination

Notre plan et nos idées succinctement définies, nous allons procéder étape par étape.

Étapes de modification

Le titre <title> du document HTML

Pour optimiser le titre de notre document se trouvant dans l'en-tête entre les balises <head>, nous allons devoir modifier le fichier header.php (si vous l'utilisez dans votre template WordPress). Quel que soit son emplacement, le procédé reste le même.
Nous allons vérifier que nous sommes bien sur une page de recherche, puis dans ce cas proposer un affichage légèrement différent.

<title><?php
 if ( is_search() ) :
 echo 'Résultats de recherche pour "'.get_search_query().'" | ';
 
 else :
 wp_title('|', true, 'right');
 endif;

 bloginfo('name'); 
?></title>

Notre titre ressemblera à cela :

  • Pour une page de recherche : Résultats de recherche pour "Terme" | Titre du site
  • Les autres cas : Titre du post | Titre du site

get_search_query() permet de retourner les termes recherchés.

Optimisation du titre de la page

Il serait intéressant d'afficher un bref résumé de notre recherche dans un titre (<hn>). Ce titre, comme le reste des prochains codes que je fournirai, nous allons le placer sur le fichier search.php qui affiche les résultats de recherche.

<h2>
 <?php 
   $count = $wp_query->found_posts;
   $several = ($count<=1) ? '' : 's'; //pluriel

   if ($count>0) : $output =  $count.' résultat'.$several.' pour la recherche';
   else : $output = 'Aucun résultat pour la recherche';
   endif;
   
   $output .= ' "<span class="terms_search">'. get_search_query() .'</span>"';
   
   echo $output;
 ?>
</h2>

L'objet $wp_query est une variable globale contenant les résultats de la requête en cours, ici de multiples informations sur notre recherche.

Sur la première ligne nous comptons le nombre de posts trouvés, puis, sur la deuxième $several vaut "s" si nous avons plus de 1 post. Ce dernier point nous permet de gérer le pluriel sur le mot "résultat". Enfin, nous composons notre phrase ($output) sur les conditions de présence ou non de résultats à la recherche.

Affichage des résultats

Nos résultats seront affichés grâce à la célèbre Loop de WordPress. Nous n'aurons ainsi qu'à composer la structure d'un élément comme modèle aux différents résultats.
La boucle se compose ainsi :

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<!-- 1) S'il y a au moins un résultat -->
<?php 
endwhile; 
else: 
?>
<!-- 2) Si pas de résultat -->
<?php endif; ?>
1) S'il y a au moins un résultat

Nous allons récupérer les informations de nos articles, info que nous avons listées au début du tutoriel.

<article class="article_found" id="post-<?php the_ID(); ?>">
   <h3>
      <a href="<?php the_permalink(); ?>" title="Lire l'article &quot;<?php the_title(); ?>&quot;">
         <?php the_title(); ?>
      </a>
   </h3>
   <p class="the_excerpt">
      <?php
            // si on utilise le résumé alors on l'affiche
            if( get_the_excerpt() != '' ) : the_excerpt();

            // sinon on le crée à partir du contenu de l'article
            else : echo mb_substr( strip_tags( get_the_content() ), 0, 300, "UTF-8" ).'[&hellip;]' ;

            endif;
         ?>
   </p>
   <footer class="metadata">
      <a class="url" href="<?php the_permalink(); ?>">
         <?php
             $permalink = get_permalink();
             
             // si le permalien fait plus de 60 caractères de long on le coupe
             if( strlen($permalink) > 60 ) : echo mb_substr( $permalink, 0, 60, "UTF-8" ) . '&hellip;'; ?>

             // sinon on l'affiche simplement
             else : echo $permalink;
             endif;
      </a>
      <time datetime="<?php the_time('Y-m-d'); ?>">
         <?php the_time('l d F'); ?>
      </time>
   </footer>
</article>

Ici j'utilise <time> et son attribut datetime, ainsi que les éléments article et footer de HTML5. Bien entendu si vous n'êtes pas sur un Doctype HTML5 il faudra remplacer tout ça par un petit <span> et une classe qui va bien ;)
Le cas du résumé dépend de l'utilisation que vous faites de vos articles. Si vous utilisez les résumés, alors on va les utiliser pour les afficher. Autrement on récupère le contenu que l'on "nettoie" (avec la fonction strip_tags()) et qu'on limite à 300 caractères ( avec la fonction substr()).
Pour le cas du permalien, on l'affiche naturellement s'il fait moins de 60 caractères de long, autrement on le coupe pour ne pas qu'il prenne trop de place. La fonction strlen() permet de compter le nombre de caractères qui composent une chaîne.

2) Si pas de résultat

Là c'est à vous de voir...
La solution la plus simple est d'afficher une petite phrase invitant à reformuler la recherche infructueuse. Mais vous n'êtes pas comme ça, vous allez proposer un nouveau formulaire de recherche à votre visiteur, en plus de cette phrase compatissante !

C'est là que vous me dites "Super ! WordPress prévoit la chose avec la fonction get_search_form(), il n'y a plus qu'à…".
Et je vous dis oui, c'est exactement ça... dans le cas simple où vous n'avez pas déjà un formulaire de recherche dans un coin de votre site par exemple.

En effet si vous dupliquez simplement votre formulaire contenu dans le fichier searchform.php (qui contient normalement la structure du formulaire de recherche), vous risquez de vous retrouver avec deux formulaires porteurs du même id.

L'astuce se découpe en quelques points :

  • dupliquer searchform.php
  • renommer le fichier searchform-new.php (le tiret+slug est important)
  • éditez votre fichier en changeant les valeurs de for du <label> et les différents id
  • n'oubliez pas d'enregistrer vos modifications

Il nous suffira ensuite d'utiliser la fonction WordPress get_template_part() :

<p>Navré mais votre recherche semble infructueuse.<br />Vous pouvez toujours retenter votre chance avec de nouveaux termes ;)</p>
<?php
  // Affiche le contenu du fichier searchform-new.php
  get_template_part( 'searchform', 'new' );
?>

Et voilà, l'affichage est terminé pour le cas où nous aurions aucun résultat lors d'une recherche.

Affichage de la pagination

Il ne reste plus qu'à afficher la pagination en dehors de la boucle, juste après endwhile; avant else:.

echo '<ul class="pagination">
    <li class="prev_link"><?php previous_posts_link('&laquo; Résultats précédents') ?></li>
    <li class="nex_link"><?php next_posts_link('Résultats suivants &raquo;','') ?></li>
</ul>';

Petits plus

Nous en parlons sur le forum ;) N'oubliez pas de consulter le Codex de WordPress qui est le point de départ pour la documentation des fonctions.

Commentaires

Manumanu a dit le

Merci bien ! Ça m'a été utile :)