Contenido

Resalta los resultados de búsqueda en tu WordPress con JQuery

10 abr

+ 2

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.

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.