Cómo subrayar términos de búsqueda en WordPress

Siempre es interesante poder ofrecer a nuestros usuarios una página de resultados de búsqueda que permita seleccionar, rápidamente, cuál es el artículo más ajustado a lo que pretenden encontrar.

Para ello, una de las posibilidades que WordPress nos brinda es la de hacer que los términos de búsqueda, que se han sometido en el formulario con un click, se vean resaltados en la página subsiguiente de resultados, de modo que el lector podrá percatarse del contexto inmediato en el que son usados y ganar así un poco de agilidad al navegar la página en cuestión.

Para ello, deberemos en primer lugar de disponer de un archivo en el template llamado search.php.

search.php, que no debe tener más que lo esencial (header, loop, footer), es un template con la siguiente función: mostrar resultados de búsqueda (si no lo tenemos, y vemos que nos funcionan igual las búsquedas, es que seguramente WordPress redirige los resultados de búsqueda a index.php).

Atención, no lo confundamos con searchform.php, que es el template que albergará la caja de búsqueda (y que puede ser invocado desde index.php, sidebar.php o donde queramos con el tag <?php get_search_form(); ?> ).

Recordemos también que si nuestro tema acepta “Widgets”, en la pantalla de Administración correspondiente en WordPress podremos enchufar la caja de búsqueda directamente en una zona widgeteada u otra.

Volviendo ahora a search.php, vamos a añadir cierto código para que los artículos listados contengan los términos de búsqueda (en el título y el extracto) subrayados.

Sustituiremos the_title en el loop de nuestro template search.php con:

<?php // highlight search terms in title
$title = get_the_title();
$keys = explode(" ", $s);
$title = preg_replace('/('.implode('|',$keys).')/iu','<span class="search-terms"></span>',$title);
echo $title;
?>

Aquí hemos preparado a los términos coincidentes con una clase de CSS especial, dejándonos lista la tarea de asignar para ella el color, background o tamaño de texto que queramos.

Lo mismo para los extractos, reemplazamos the_excerpt por :

<?php // highlight search terms in content
$excerpt = get_the_excerpt();
$keys = explode(" ", $s);
$excerpt = preg_replace('/('.implode('|',$keys).')/iu','<span class="search-terms"></span>',$excerpt);
echo $excerpt;
?>

En nuestro ejemplo, la clase que asignaremos a los términos de búsqueda es .search-terms.
Finalmente, nos dirigiremos a style.css y añadiremos, por ejemplo :

span.search-terms {
	background: yellow;
	font-weight: bold;
	}

Lo que nos dará un amarillo tirando a “chillón” que podremos por supuesto cambiar por los colores que queramos.

Comentarios
  1. Veremos que resulta :)

    Escrito el14/01/2010
  2. ammm en realidad lo que hizo fue borrar las palabras de los resultados, esta bien el código?

    Escrito el14/01/2010
  3. Qué valiente eres Doctor :) Te aparecen en el código fuente ?

    Escrito el14/01/2010
  4. Mmmm no me fijé en el código (ouch), lo que si hice fue cambiar el
    < span class….
    por un <strong.. a ver si me salía algo en negrita (en caso de que algo pasara con la css), pero no funcionó.

    Como decia antes, si en la búsqueda ingresaba "a", dentro de los resultados me mostraba "cs" (en caso de que la palabra fuese casa). ¿Algo extraño verdad? =/

    Escrito el15/01/2010
  5. Marcos

    No tengo bases en programación , pero buscando y buscando encontré que parte del código es incorrecto (o en todo caso a mi no me funcionó)

    Y cambiandolo por:

    <?php // highlight search terms in content
    $excerpt = get_the_excerpt();
    $keys = explode(" ", $s);
    $excerpt = preg_replace('/('.implode('|',$keys).')/iu',
    '’,$excerpt); echo $excerpt; ?>

    La parte ” es la que debe corregirse.

    Aunque después de corregir todo ello, tengo una duda y un problema más grande, porque si la busqueda coincide con el título del artículo en el enlace “Lee más” del tema Twenty Ten (en WP 3 Beta2) aparece esa parte del título en el link de “Lee más”, no se si será parte del get_permalink (porque de esa manera subraya y destaca algo que coincide en su búsqueda) Me he explicado bien ¿Alguna ayuda al respecto? Gracias !

    Escrito el10/05/2010
  6. paul

    bueno pero es bastante estenso y espeso

    Escrito el14/05/2010
  7. hey gracias muy util

    Escrito el10/06/2010

DEJA TU COMENTARIO