Surligner les résultats de recherche WordPress avec jQuery

Ce hack PHP pour WordPress vous apprendra comment mettre en surbrillance les mots-clés dans les résultats de recherche de votre site WordPress. Nous utiliserons jQuery, un langage intégré en natif dans WordPress.

Étape n°1 – Ajout d’une commande PHP dans functions.php

A partir du menu Apparence puis Éditeur, ouvrez le fichier intitulé functions.php ou passez par votre client FTP favori en localisant ce dernier dans le répertoire /wp-content/themes/NOM_DU_THEME/

L’utilisation d’un client FTP permet d’effectuer une sauvegarde préalable et d’éditer le fichier directement ce qui permet d’annuler une erreur de manipulation.

Collez ensuite les lignes de code suivantes en fin de fichier si vous utilisez le thème Twenty Ten (par défaut) :

function hls_set_query() {
  $query  = attribute_escape(get_search_query());

  if(strlen($query) > 0){
    echo '
      <script type="text/javascript">
        var hls_query  = "'.$query.'";
      </script>
    ';
  }
}

function hls_init_jquery() {
  wp_enqueue_script('jquery');
}

add_action('init', 'hls_init_jquery');
add_action('wp_print_scripts', 'hls_set_query');

Pour les autres thèmes, il est souvent nécessaire d’englober celles-ci de balises PHP selon ce modèle :

<?php CODE A INSERER ICI ?>

N’oubliez pas de faire Mettre à jour le fichier pour valider les changements opérés.

Étape n°2 – Édition du fichier header.php

Toujours dans le module Éditeur, ouvrez le fichier header.php qui correspond à l’en-tête de votre site.

Utilisez la commande de recherche de votre navigateur via le raccourci Ctrl + F sous Windows / Linux ou cmd + F sous MacOS X. Saisissez /head puis faites Entrer.

Collez les lignes de code ci-dessous juste avant cette balise que nous venons de rechercher :

 <style type="text/css" media="screen">
    .hls { background: #D3E18A; }
  </style>
  <script type="text/javascript">
  jQuery.fn.extend({
    highlight: function(search, insensitive, hls_class){
      var regex = new RegExp("(<[^>]*>)|(\\b"+ search.replace(/([-.*+?^${}()|[\]\/\\])/g,"\\$1") +")", insensitive ? "ig" : "g");
      return this.html(this.html().replace(regex, function(a, b, c){
        return (a.charAt(0) == "<") ? a : "<strong class=\""+ hls_class +"\">" + c + "</strong>";
      }));
    }
  });
  jQuery(document).ready(function($){
    if(typeof(hls_query) != 'undefined'){
      $("#post-1").highlight(hls_query, 1, "hls");
    }
  });
  </script>

Étape n°3 – Adaptations visuelles nécessaires

Pour rendre opérationnel ce bout de code, vous devez indiquer la classe ou l’ID de la balise qui affichera les résultats de recherche.

Pour Twenty Ten, il s’agit de #post-1 comme indiqué dans cette ligne de code :

$("#post-1").highlight(hls_query, 1, "hls");

Je vous recommande l’utilisation de l’extension Firebug pour Mozilla Firefox qui vous permettra d’identifier rapidement la balise concernée – également possible via l’affichage du code source de la page dans le navigateur Web de votre choix.

Pour changer la couleur de surlignage, modifiez la valeur hexadécimale de la ligne ci-après :

.hls { background: #D3E18A; }

Cette valeur peut être obtenue facilement via n’importe quel logiciel de retouche photo ou une extension Firefox comme ColorZilla.

Voici le résultat avec le mot-clé wordpress :

Capture d'écran - Module de recherche WordPress
Les mots-clés recherchés seront surlignés en jaune où qu'ils se trouvent dans les résultats

Le module de recherche intégré de base dans WordPress n’offre aucune identification visuelle des termes recherchés dans la page de résultats. La technique présentée ici comblera ce manque à moins que vous ne préfériez intégrer le moteur de recherche Google dans votre site !

Crédits photo : Yahoo! – Service de presse

17 commentaires

  1. Joze

    Bjr,

    je suis d’accord avec Boby, ça ne fonctionne pas, cependant pouvez-vous être plus précis quant à la 3ème étape « vous devez indiquer la classe ou l’ID de la balise qui affichera les résultats de recherche » en nous précisant dans quel fichier intégrer ce code ????

    Merci

    1. Aurélien Denis auteur de l’article

      Ce bout de code est directement tiré de l’étape 2. Il n’y a rien à ajouter si ce n’est de faire en sorte que l’ID ou la classe CSS corresponde à ton thème.

      Dans l’exemple, il s’agit de l’ID #post-1.

      Je ne peux être plus clair… il faut effectivement un minimum de connaissances en HTML / CSS.

  2. olive oem

    Salut tes tutos sont super sympas et les podcast aussi. j’aime
    mais là moi non plus je ne comprends pas bien ou on cherche la class ou l’ID.
    j’ai beau utiliser l’inspecteur (SAFARI) je ne vois pas ou ni quoi chercher ?

    donc lancer une recherche quand le résultat (la page) s’affiche il faut trouver l’ID du premier post ?
    je suis paumé…

  3. olive oem

    OK autant pour moi
    j’ai loadé twentyten pour chercher et comprendre et j’ai trouvé pour mon theme !

    Pour info avec elegantthemes ‘Theprofessional’ il faut remplacer #post-1
    par
    .entry

    ça marche nickel

  4. olive oem

    ha ben non en fait !

    j’ai bien le terme highlighted mais il me duplique à l’infini un seul post dans les résulats. donc non je n’ai pas trouvé mais je suis pas loin…

  5. olive oem

    Heuuuuu…

    j’ai fait 99,999999 % de ce que tu as dit, mais au lieu de mettre :

    #post-1

    il faut remplacer par :

    #content-area

    Si tu parles de inspecteur safari…
    click droit => inspecter cet element.
    mais vu tes podcasts ça tu dois le savoir

  6. FranckRouanet

    J’avoue que, moi aussi, j’ai eu du mal à comprendre l’étape 3 ! :-s
    Mais, à force de patience et de persévérance, j’ai testé avec le code source de ma page de résultat de recherche et j’ai fini par trouver : il s’agit de la classe de la partie qui englobe l’affichage de la zone article –
    #content-main pour mon thème Graphene !
    Et cela fonctionne !

  7. Emy

    Bonjour,
    Me concernant le code fonctionne mais le résultat d’affiche autant de fois qu’il y a le mot recherché dans le résultat…Il y a de la redondance partout . . . Savez-vous comment régler ce problème ?

Laisser un commentaire