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 :
-
Affichage de l'intitulé de recherche dans la balise
<title>
de notre document - Affichage d'un titre explicite sur notre document ("XX résultats pour la recherche termes")
-
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
- 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 "<?php the_title(); ?>"">
<?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" ).'[…]' ;
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" ) . '…'; ?>
// 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érentsid
- 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('« Résultats précédents') ?></li>
<li class="nex_link"><?php next_posts_link('Résultats suivants »','') ?></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
Merci bien ! Ça m'a été utile :)