Astuces & Snippets WordPress

Mettre en évidence les termes dans les résultats de recherche

Pour rendre plus convivial le résultat d'une recherche sur WordPress, découvrez la méthode à suivre pour mettre en évidence le terme recherché dans les résultats de la page de recherche.

S'inscrire à la newsletter

Pour rendre plus convivial une recherche sur WordPress, vous pouvez mettre en évidence les termes recherchés sur la page des résultats. Dans cet article, nous allons vous expliquer comment réaliser cela d’une manière simple et efficace.

D’abord, ouvrez votre fichier search.php et ajoutez les lignes suivantes au début de votre fichier :

$keys = implode('|', explode(' ', get_search_query()));
$title = preg_replace('/('.$keys .')/iu', '<span class="search-term">\0</span>', get_the_title());
$excerpt = preg_replace('/('.$keys .')/iu', '<span class="search-term">\0</span>', get_the_excerpt());

Ensuite, recherchez les codes suivants :

<?php the_title(); ?>
<?php the_excerpt(); ?>

Remplacez-le par :

<?php echo $title; ?>
<?php echo $excerpt; ?>

Maintenant qu’on a inséré une class sur nos termes de recherche, on ajoute un peu de CSS pour les mettre en évidence. Copiez le code ci-dessous dans votre feuille de style (CSS) :

.search-term {
    background-color: #CCCCCC;
    color: #FFFFFF;
    padding: 3px 5px;
}

Si vous utilisez le contenu de votre article à la place de l’extrait, la technique est exactement la même !

Aperçu de la mise en évidence

Aperçu de la mise en évidence sur la page de recherche

13 commentaires
  1. slowflex le
  2. Philippe le

    A priori cela ne supporte pas les accents, comme pour vidéo par exemple.

  3. Philippe le

    arghh, je dois avoir une erreur dans mon header.

  4. zet le

    pour ceux en html5, remplacer la balise span par mark (dont le rôle est de surligner un contenu)

  5. olivM le

    pour le titre et l’extrait ca marchera très bien
    mais attention, dans le cas où on affiche le contenu de l’article :
    si le terme recherché est un tag ou un attribut html ( a, div, href, … ) ou même le , cette méthode risque de faire beaucoup de dégat…

    <p>un article qui parle de <a href="http://google.com/">google</&gt;.</p>

    va devenir :
    <p>un article qui parle de <a href="http://<span class="search-term">google</span>.com/"><span class="search-term">google</span></>.</p>

  6. krysttof le

    Pour que cela fonctionne, je suis obligé de mettre le code dans ma boucle if…while…

  7. krysttof le

    Je me suis mal exprimé, je dois placer les 3 premières lignes de code ($keys=…) dans ma boucle.
    Je ne parlais pas des 2 variables $title et $excerpt

Poster un commentaire

Les champs obligatoires sont indiqués avec *

Ici, on utilise KeywordLuv. Entrez YourName@YourKeywords dans le formulaire "Pseudo" pour bénéficier des avantages SEO d'un mot-clef ciblé. Attention, tous les commentaires non-constructifs ne bénéficieront pas d'une ancre optimisée.

Prévenez moi de tous les nouveaux commentaires par email.

Ne plus afficher|Fermer
Suivez-nous sur Facebook !