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

posté le 30 décembre 2011 par Jonathan | 13 commentaires | 574 vues | Ajouter à mes favoris

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 montrer 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 ajouté une class sur nos termes de recherche, on ajoute un peu de CSS pour les mettre en evidence. Copier 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 sur la page de recherche

Si vous avez aimé cet article, n'oubliez pas de vous abonner à notre flux RSS ou à notre newsletter au contenu exclusif.