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.