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 :

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 !