aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

En WeblogToolsCollection publican un artículo con el que nos muestran como realzar los resultados de nuestras búsquedas mediante el uso de un pequeño script con jQuery. Simplemente tendremos que realizar dos pasos muy sencillos para que nuestro theme ayude al usuario a encontrar esa palabra que está buscando.

1. Añadimos jQuery y la palabra a buscar

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');

Añadiendo este código al fichero functions.php de nuestro theme dispondremos de jQuery en nuestro theme, y además tendremos una variable javascript (hls_query) con el valor de la búsqueda que jQuery deberá encontrar en el texto y resaltar.

2. Añadimos el script a nuestro header.php

 <style type="text/css" media="screen">
    .hls { background: #D3E18A; }
  </style>
  <script type="text/javascript">
  jQuery.fn.extend({
    highlight: function(search, insensitive, 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=\""+ class +"\">" + c + "</strong>";
      }));
    }
  });
  jQuery(document).ready(function($){
    $("#post-area").highlight(hls_query, 1, "hls");
  });
  </script>

Este código se encargará de buscar en nuestro contenido, concretamente en el id #post-area (hay que reemplazarlo por nuestro el contenedor de nuestros posts), y resaltará el texto buscado con la clase CSS .hls que está definida al inicio del código.

Importante

1. Reemplaza #post-area por el valor del contenedor de posts.
2. Cambia el color del resaltado reemplazando el valor (#D3E18A) por uno que se ajuste a tu diseño.

Alternativa

Si quieres resaltar los resultados sin necesidad de usar javascript, puedes usar WP-Resalta Busqueda.