Resaltar las palabras que un usuario ha buscado puede mejorar significativamente la experiencia de usuario (UX) en tu sitio web. También ayuda a que los visitantes encuentren más fácilmente lo que están buscando, lo cual puede reducir la tasa de rebote y mejorar tu posicionamiento SEO.
En este artículo aprenderás cómo resaltar automáticamente las palabras clave dentro de los títulos y extractos en los resultados de búsqueda de WordPress.
¿Qué vamos a hacer?
Vamos a usar los filtros the_title y the_excerpt para buscar las palabras clave ingresadas en el buscador de WordPress y envolverlas en una etiqueta personalizada, que puedes estilizar con CSS para destacarlas visualmente.
Código actualizado (formato escapado para blog)
// Resaltar palabras clave en los títulos y extractos de los resultados de búsqueda
function resaltar_palabras_clave_en_busqueda( $texto ) {
if ( is_search() ) {
$busqueda = get_query_var( 's' );
$palabras = explode( ' ', $busqueda );
$patron = '/(' . implode( '|', array_map( 'preg_quote', $palabras ) ) . ')/iu';
$texto = preg_replace( $patron, '<strong class="search-highlight">$1</strong>', $texto );
}
return $texto;
}
add_filter( 'the_excerpt', 'resaltar_palabras_clave_en_busqueda' );
add_filter( 'the_title', 'resaltar_palabras_clave_en_busqueda' );Estilo CSS sugerido
Agrega este CSS a tu tema o en el personalizador de WordPress para que el texto resaltado sea visualmente llamativo:
.search-highlight {
background-color: yellow;
padding: 0 2px;
}