Comment Mettre en Surbrillance Les Termes Recherchés Sur WordPress ?

Lorsqu’un visiteur se trouve sur votre site, il pourrait vouloir obtenir des termes recherchés précis. De ce fait, il a la possibilité d’avoir recours à la barre de recherche pour se procurer ces renseignements. Ainsi, celui-ci gagne beaucoup de temps dans la mesure où il n’a pas besoin de fouiller dans toutes les pages de votre site. Véritablement, ce raccourci s’avère très avantageux pour mettre la main sans effort sur des mots-clés en particulier.

Or, si je vous disais que vous pouvez rendre cette barre de recherche encore plus intéressante ? En effet, avez-vous pensé à mettre en surbrillance les termes recherchés afin de les mettre plus en valeur ? Cette solution permettrait de faciliter à vos visiteurs la lecture des mots qu’ils ont obtenus lors des résultats de recherche sur votre page. Restons donc avec nous pour découvrir un remarquable snippet qui va vous aider à réaliser cette tâche.

Mettre en Surbrillance Les Termes Recherchés Avec un Snippet

Pour rendre à vos visiteurs les résultats de leur recherche plus lisibles et plus aisés, vous pouvez faire appel à un snippet. Ce dernier indiquera tous les termes demandés lors de la recherche en surbrillance. Si un visiteur tape par exemple le mot « miel » dans la barre de recherche, tous les mots « miel » de la page s’afficheront en surbrillance. Autrement dit, ce dernier pourra cibler plus facilement les résultats les plus efficaces.

Comment Procéder ?

Pour mettre en pratique cette technique, il convient de suivre la marche suivante. Tout d’abord, copiez le fichier « search.php » de votre thème, puis collez celui-ci dans votre thème enfant. Dans certains thèmes, vous le trouverez sous le nom d’ « index.php ».

Deux options s’offrent donc à vous. Dans votre thème enfant, vous pouvez dupliquer le fichier « index.php » et le renommer « search.php ». Sinon, vous avez la possibilité de télécharger directement le template de page de recherche sur le site de votre thème.

Une fois que vous avez réalisé cela, il vous faudra modifier la ligne de code suivante :

<?php the_title(); ?>

À la place, insérez la ligne de code ci-dessous :

<?php echo $title; ?>

Placez-la au-dessus la ligne ci-bas :

<?php $title = get_the_title(); $keys= explode(" ",$s);

Enfin, il vous suffit d’optimiser le CSS en fonction du graphisme de votre site. Vous pouvez par exemple appliquer le code CSS ci-après :

/* CSS terme recherché en surbrillance */
strong.search-excerpt { 
  background-color: yellow;
  color: #666;
  padding: 0px 10px
}