Cómo resaltar los términos de búsqueda en los resultados en WordPress (2 métodos)

Piensa en la última vez que buscaste algo en un sitio. Probablemente escaneaste los resultados buscando tus palabras clave, ¿verdad? 🔍

Eso es exactamente lo que hacen los visitantes de tu sitio web cuando buscan en tu sitio. Excepto que WordPress no resalta esos términos por defecto.

Configurar términos de búsqueda resaltados es una de esas mejoras sencillas que inmediatamente hacen que tu sitio se sienta más pulido y fácil de usar.

Cuando los visitantes pueden ver rápidamente por qué cada resultado coincide con su búsqueda, es más probable que hagan clic y se involucren con tu contenido.

A lo largo de los años construyendo y administrando sitios de WordPress, he descubierto que estos pequeños ajustes en la experiencia del usuario pueden tener un gran impacto. 📝

Es por eso que te guiaré a través de 2 formas sencillas de resaltar términos de búsqueda en tu sitio de WordPress, ya sea que prefieras usar un plugin o agregar algo de código personalizado.

¿Por qué debería resaltar los términos de búsqueda en mi sitio web?

Resaltar los términos de búsqueda ayuda a los visitantes a identificar rápidamente el contenido que buscan.

Cuando los usuarios escriben una palabra clave en la barra de búsqueda de tu sitio, escanean los resultados en busca de esas palabras exactas. Si nada destaca, podrían pasar por alto contenido útil sin darse cuenta.

Al enfatizar sus términos de búsqueda, haces que los resultados sean más fáciles de leer y muestras instantáneamente qué artículos son los más relevantes.

Esto mejora la experiencia del usuario, ayuda a los visitantes a encontrar información más rápido y les asegura que están en el lugar correcto. Incluso puede animar a los usuarios a permanecer más tiempo en tu sitio.

En WPBeginner, ponemos en negrita las palabras clave coincidentes en nuestros resultados de búsqueda; funciona de manera similar a resaltar. Es un pequeño detalle, pero realmente ayuda a las personas a encontrar lo que buscan más rápido.

Dicho esto, te mostraremos cómo resaltar fácilmente los términos de búsqueda en WordPress. Discutiré 2 métodos. Puedes usar los enlaces a continuación para saltar al método de tu elección.

• Método 1: Resaltar términos de búsqueda usando SearchWP – Recomendado
• Método 2: Resaltar términos de búsqueda usando código personalizado – Gratis
• Extra: Haz tu búsqueda aún más rápida con Búsqueda Ajax en Vivo 🚀
• Preguntas frecuentes: Resaltar términos de búsqueda en WordPress

Método 1: Resaltar términos de búsqueda usando SearchWP – Recomendado

Si buscas una forma rápida y sin complicaciones de resaltar los términos de búsqueda en tus resultados de WordPress, entonces usar SearchWP es tu mejor opción.

En mi opinión, SearchWP es una de las mejores herramientas para mejorar la experiencia de búsqueda de tu sitio.

Te ofrece resultados mucho más relevantes que la búsqueda predeterminada de WordPress, ¿y la mejor parte? Hace que resaltar los términos de búsqueda sea increíblemente fácil. Simplemente activas un interruptor y listo.

He probado SearchWP a fondo en nuestro sitio de demostración y los resultados fueron impresionantes. Funciona a la perfección y la función de resaltado integrada ahorra mucho tiempo en comparación con la configuración manual.

También tenemos una reseña completa de SearchWP si quieres ver todas sus características y cómo funciona.

Primero, necesitas instalar y activar el plugin SearchWP. Para obtener instrucciones paso a paso, consulta nuestro tutorial sobre cómo instalar un plugin de WordPress.

Una vez que hayas activado el plugin, dirígete a la página SearchWP » Ajustes en tu panel de WordPress.

Aquí, deberás ingresar tu clave de licencia.

Puedes encontrar esta clave de licencia en tu cuenta en el sitio web de SearchWP. Simplemente cópiala y pégala.

Después de eso, desplázate hacia abajo hasta ‘Configuración general’ y activa el interruptor ‘Resaltar términos’ a ‘Activado’.

Tan pronto como se habilite, las palabras clave que usen tus visitantes se resaltarán automáticamente en los resultados de búsqueda, lo que facilitará mucho la localización de contenido relevante.

En esta sección, también encontrarás configuraciones adicionales que pueden mejorar tus resultados de búsqueda.

Funciones como Búsqueda difusa y Búsqueda entre comillas son especialmente útiles para blogs de WordPress con mucho contenido.

Esta función permite a los visitantes encontrar el contenido correcto incluso si cometen un pequeño error tipográfico. Esto puede evitar que terminen en una frustrante página de “no se encontraron resultados”.

Por otro lado, la Búsqueda entre comillas permite a los usuarios buscar una frase exacta poniéndola entre comillas, al igual que en Google.

Ten en cuenta que todas tus configuraciones se guardarán automáticamente.

Una vez que estés satisfecho con tu Configuración general, es una buena idea explorar el resto de las opciones de personalización de SearchWP.

Puedes ir a la página SearchWP » Algoritmo en tu panel para ajustar cómo se clasifican los resultados de búsqueda.

Esta sección es realmente útil porque te permite controlar el peso (importancia) de diferentes partes de tu contenido; piénsalo como un sistema de puntuación para tus resultados de búsqueda.

Dar más peso a los títulos, por ejemplo, significa que las coincidencias en el título de la publicación aparecerán más arriba que las coincidencias en el contenido del cuerpo. De esta manera, el contenido más relevante aparece primero.

Al hacer clic en el botón ‘Fuentes y configuración’, también puedes decidir qué incluir en tu índice de búsqueda.

En lugar de solo publicaciones y páginas, puedes agregar comentarios, tipos de publicaciones personalizadas, productos de WooCommerce, SKUs y más.

Si tienes un blog o una tienda en línea, esto hace que tu búsqueda sea mucho más útil.

Por ejemplo, puede ayudar a un cliente a encontrar un producto por su SKU, como ‘TSHIRT-BLUE-LG’, algo que la búsqueda predeterminada de WordPress no podría hacer.

También hemos preparado una guía completa sobre cómo mejorar la búsqueda de WordPress con SearchWP si quieres profundizar más.

Una vez que hayas guardado tu configuración, SearchWP se encarga automáticamente de tu formulario de búsqueda existente. No se requieren pasos adicionales.

Simplemente ve a tu sitio y realiza una búsqueda rápida. Verás las palabras clave resaltadas de inmediato.

Si aún no has agregado un formulario de búsqueda a tu sitio, no te preocupes. Puedes seguir nuestro tutorial paso a paso sobre cómo agregar un formulario de búsqueda en WordPress.

Una vez que eso esté configurado, habrás terminado y tus visitantes disfrutarán de una experiencia de búsqueda mucho mejor desde el principio.

Método 2: Resaltar términos de búsqueda usando código personalizado – Gratis

Si tienes un presupuesto limitado, entonces SearchWP podría no ser la opción adecuada, ya que su plan gratuito no incluye esta función.

La buena noticia es que aún puedes resaltar los términos de búsqueda agregando un fragmento de código PHP al archivo functions.php de tu sitio.

La principal diferencia radica en el mantenimiento a largo plazo. Un plugin como SearchWP es actualizado regularmente por sus desarrolladores para garantizar la compatibilidad con las nuevas versiones de WordPress.

Sin embargo, con un fragmento de código personalizado, eres responsable de asegurarte de que siga funcionando correctamente después de futuras actualizaciones.

Dicho esto, editar los archivos del tema directamente también puede ser arriesgado.

Incluso un pequeño error puede colapsar tu sitio y bloquearte el acceso al panel de administración. A esto a menudo se le llama la ‘Pantalla Blanca de la Muerte’, y puede ser estresante de solucionar si no eres desarrollador.

Por eso recomiendo usar WPCode en su lugar. Es el mejor plugin de fragmentos de código para WordPress y la forma más segura de agregar código personalizado sin tocar los archivos de tu tema.

Esto se debe a que WPCode ejecuta tus fragmentos en un entorno separado y seguro. Esto evita que un error tipográfico colapse tu sitio y facilita activar o desactivar fragmentos con un interruptor.

Además, su plan gratuito funciona perfectamente para este método.

He probado WPCode a fondo en diferentes configuraciones y funciona de manera confiable cada vez. Si tienes curiosidad sobre todo lo que ofrece, también tenemos una reseña detallada de WPCode que puedes consultar más tarde.

Pero por ahora, veamos cómo usarlo para resaltar términos de búsqueda en tu sitio.

Primero, necesitas instalar y activar el plugin WPCode. Para instrucciones detalladas, puedes ver nuestra guía sobre cómo instalar un plugin de WordPress.

Después de haber activado el plugin, visita la página Fragmentos de código » + Agregar fragmento desde el panel.

Aquí, haz clic en el botón ‘+ Agregar fragmento personalizado’ debajo de la opción ‘Agregar tu código personalizado (Nuevo fragmento)’.

Ahora serás llevado a una nueva pantalla donde tienes que seleccionar ‘Fragmento de PHP’ como tipo de código. Una vez hecho esto, procede a darle un nombre a tu fragmento de código.

Este nombre no será visible para tus visitantes; es solo para tu referencia. Por eso recomiendo usar algo descriptivo como Resaltar términos de búsqueda o algo más que facilite su reconocimiento.

Te ayudará a encontrar y administrar rápidamente el fragmento más tarde si alguna vez deseas editarlo o deshabilitarlo.

Después de eso, copia y pega el siguiente código personalizado en el cuadro ‘Vista previa del código’.

Este código funciona encontrando las palabras clave que tu visitante buscó. Luego, envuelve esas palabras clave en una etiqueta especial que agrega un fondo de color.

// Highlight terms in titles
add_filter('the_title', 'highlight_search_terms_in_title', 10, 2);

// Highlight terms in excerpts
add_filter('the_excerpt', 'highlight_search_terms_in_excerpt');

// Optional: Highlight terms in content (if you're using the_content() in search results)
add_filter('the_content', 'highlight_search_terms_in_excerpt');

// Common highlight logic
function highlight_search_terms($text) {
    if (!is_admin() && is_search() && is_main_query()) {
        $search_query = get_search_query();

        // Output the CSS only once
        if (!defined('HIGHLIGHT_SEARCH_TERM_CSS')) {
            define('HIGHLIGHT_SEARCH_TERM_CSS', true);
            add_action('wp_head', function () {
                echo '<style>
                    strong.search-excerpt {
                        background-color: yellow;
                        color: black;
                        font-weight: bold;
                        padding: 0 2px;
                        border-radius: 2px;
                    }
                </style>';
            });
        }

        if (!empty($search_query)) {
            $keys = preg_split('/\s+/', $search_query);
            foreach ($keys as $key) {
                if (!empty($key)) {
                    $text = preg_replace('/(' . preg_quote($key, '/') . ')/iu', '<strong class="search-excerpt">$1</strong>', $text);
                }
            }
        }
    }

    return $text;
}

// Apply highlight logic to title and excerpt/content
function highlight_search_terms_in_title($title, $post_id) {
    return highlight_search_terms($title);
}

function highlight_search_terms_in_excerpt($excerpt) {
    return highlight_search_terms($excerpt);
}

Después de pegar el código, desplázate hacia abajo dentro del fragmento para encontrar la sección de estilo. La verás dentro del bloque echo '<style> ... </style>';. La línea específica que querrás cambiar es:

                        background-color: yellow;

Por defecto, el plugin establece el color de fondo del término resaltado en amarillo con texto negro. Pero puedes personalizar esto fácilmente editando esa línea.

Simplemente reemplaza yellow con el código hexadecimal de cualquier color que prefieras. Por ejemplo, para cambiar el resaltado a un azul claro, podrías usar #aeeffc. ¡Asegúrate de mantener el punto y coma al final!

Recomiendo elegir un color de fondo y de texto que se ajuste al estilo de tu marca para que se integre bien con el resto de tu sitio.

También puedes ajustar el peso de la fuente, el radio del borde y el relleno en esta sección para afinar la apariencia del cuadro de resaltado.

Una vez que estés satisfecho con el estilo, desplázate de nuevo a la parte superior, cambia el interruptor de 'Inactivo' a 'Activo' y haz clic en el botón 'Guardar fragmento' para almacenar tu configuración.

Si tu sitio ya tiene un formulario de búsqueda, el fragmento comenzará a funcionar de inmediato y resaltará los términos de búsqueda automáticamente.

Si aún no has agregado un formulario de búsqueda, puedes seguir nuestro tutorial sobre cómo agregar un formulario de búsqueda en WordPress.

Finalmente, visita tu sitio web, realiza una búsqueda rápida y verás tus términos recién resaltados en acción.

Extra: Haz tu búsqueda aún más rápida con Búsqueda Ajax en Vivo 🚀

Una vez que hayas agregado el resaltado de términos de búsqueda, es posible que desees ir un paso más allá mostrando los resultados a medida que los visitantes escriben.

Esto se llama búsqueda Ajax en vivo, y funciona igual que la autocorrección de Google. Ofrece sugerencias instantáneas sin necesidad de recargar la página.

Es una excelente manera de hacer que tu sitio sea más rápido e interactivo. Los visitantes pueden encontrar lo que buscan casi al instante, lo que probablemente aumentará la participación.

Para configurar esto, recomiendo el plugin SearchWP Live Ajax Lite Search, que funciona muy bien con la herramienta premium SearchWP.

Es gratis, funciona a la perfección con la mayoría de los temas de WordPress y maneja todo automáticamente. Lo he probado a fondo y siempre ofrece una experiencia de búsqueda mejor y más rápida.

Simplemente instala el plugin como cualquier otro plugin de WordPress, actívalo y luego habilita la búsqueda en vivo en la configuración de SearchWP.

Puedes agregar fácilmente el formulario de búsqueda a cualquier publicación, página, barra lateral o área de widgets.

¿Necesitas ayuda para empezar? Consulta nuestro tutorial completo sobre cómo agregar búsqueda Ajax en vivo a tu sitio de WordPress.

Preguntas frecuentes: Resaltar términos de búsqueda en WordPress

Aquí hay algunas preguntas que me hacen con frecuencia sobre cómo resaltar términos de búsqueda en WordPress:

¿Puedo resaltar términos en resultados de búsqueda AJAX o en vivo?

¡Sí! Si estás usando SearchWP junto con el plugin SearchWP Live Ajax Lite Search, los términos resaltados también aparecerán en los resultados de búsqueda en vivo, sin necesidad de recargar la página.

Dado que ambas herramientas son creadas por el mismo equipo, funcionan juntas a la perfección desde el principio.

Sin embargo, si estás utilizando un plugin de búsqueda en vivo diferente o una configuración de búsqueda AJAX personalizada, deberás probar la compatibilidad.

No todos los plugins admiten el resaltado de términos en resultados dinámicos, por lo que es una buena idea probar en un sitio de staging primero para asegurarte de que todo se muestre correctamente.

¿Estas funciones de resaltado afectan el rendimiento o la velocidad del sitio?

Realmente no. Ambos métodos que cubrí —usar SearchWP y agregar código personalizado con WPCode— son ligeros y están optimizados para el rendimiento.

El resaltado en sí se ejecuta en el lado del cliente (front-end), por lo que no sobrecarga mucho tu servidor.

Dicho esto, si tu sitio tiene un gran número de resultados de búsqueda o un estilo personalizado complejo, siempre es una buena idea probar las cosas primero. Recomiendo probarlo en un entorno de staging para asegurarte de que el resaltado se vea bien y funcione sin problemas antes de implementarlo en vivo.

¿El resaltado de términos de búsqueda funcionará con tipos de publicación personalizados o WooCommerce?

¡Sí, absolutamente! Si estás usando SearchWP, está diseñado para funcionar perfectamente con tipos de publicación personalizados y productos de WooCommerce directamente. Te da control total sobre lo que se busca, incluyendo SKUs de producto y campos personalizados.

El fragmento de código personalizado del Método 2 también puede funcionar para tipos de publicación personalizados, siempre y cuando tu tema use funciones estándar de WordPress como the_title() para mostrar el contenido. Sin embargo, para obtener los resultados más confiables y potentes, especialmente con una tienda de comercio electrónico, SearchWP es la mejor solución.

Espero que este artículo te haya ayudado a aprender cómo resaltar fácilmente los términos de búsqueda en los resultados en WordPress. También te puede interesar nuestra guía definitiva sobre cómo hacer una búsqueda inteligente de productos WooCommerce y nuestro tutorial sobre cómo agregar capacidad de búsqueda por voz a tu sitio de WordPress.

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.