Tout savoir sur WordPress
Tutoriel 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.

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 :

[pastacode lang=”php” message=”” highlight=”” provider=”manual”]


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

[/pastacode]

Ensuite, recherchez les codes suivants :
[pastacode lang=”php” message=”” highlight=”” provider=”manual”]


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

[/pastacode]

Remplacez-le par :
[pastacode lang=”php” message=”” highlight=”” provider=”manual”]


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

[/pastacode]

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) :

[pastacode lang=”php” message=”” highlight=”” provider=”manual”]


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

[/pastacode]

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
Cet article a été mis à jour il y a 4471 jours - Il n'est peut être plus à jour !

Article écrit par Jonathan B.

Jonathan est le co-fondateur de WP Media, startup connue pour être l’auteur de WP Rocket et Imagify. Il est aussi co-organisateur du WordCamp Lyon et Paris.

13 Commentaires

  1. @Slowflex : Ca fait appel à un fichier javascript et ce n’est vraiment pas nécéssaire dans ce cas de figure.

    Une class et un petit peu CSS, le tour est joué !

  2. @ Phillipe : ça marche très bien avec les accents, je viens de faire un essai. N’oubliez pas d’ajouter du CSS pour mettre le terme en évidence, ça ne va pas se faire tout seul :)

  3. @Zet : Bonne remarque !

    Par contre, est-ce vraiment pertinent puisque les pages de résultats de recherche ne sont pas indéxées ?

  4. 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>

  5. @Olivm : La remarque n’est pas fausse.

    Dans ce cas, il faut mettre un petit coup de strip_tags dans le contenu ^^

  6. Oui c’est normal, je dis bien qu’il faut “rechercher” et “remplacer” et non pas de copier les 2 lignes sans la boucle :)

  7. 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