Cómo agregar una barra de búsqueda a WordPress (5 formas)

Publicado: 2023-07-12

Si ejecuta un sitio web grande o complejo, es probable que tenga muchas páginas para que los visitantes las revisen. A veces, puede resultarles frustrante y lento encontrar lo que buscan.

Una barra de búsqueda es una excelente manera de combatir este problema, y ​​agregar una a WordPress es simple. Si es un principiante, puede usar la función Buscar bloque o instalar un complemento. Si está buscando algo un poco más avanzado, puede agregar un ícono de búsqueda a su menú de navegación o editar sus archivos de temas para incluir las personalizaciones que desee.

En esta publicación, analizaremos más de cerca el papel que desempeña una barra de búsqueda en su sitio web. Luego, le mostraremos cinco métodos para agregar uno en WordPress.

Por qué es importante incluir una barra de búsqueda en su sitio de WordPress

Si su sitio web solo tiene unas pocas páginas, probablemente sea fácil para los visitantes encontrar el contenido o la información que buscan. Por otro lado, para sitios de negocios en crecimiento, tiendas de comercio electrónico complejas o blogs populares, los visitantes pueden tardar mucho tiempo en navegar por sus páginas usando solo el menú.

Barra de búsqueda de Nalgene

La regla de los tres clics es un principio utilizado por la mayoría de los diseñadores web. Esta regla sugiere que un usuario debería poder encontrar cualquier información deseada en su sitio usando tres (o menos) clics del mouse. De lo contrario, pueden frustrarse y abandonar su sitio.

Esto significa que una barra de búsqueda es una excelente manera de mejorar la experiencia del usuario (UX).

Con esta característica, puede ofrecer a su audiencia el contenido que desean mucho más rápido, reduciendo las tasas de rebote y aumentando la cantidad de tiempo que pasan en su sitio web.

Mejor aún, puede monitorear los datos de búsqueda de su sitio para realizar un seguimiento de los términos y frases que los visitantes usan con más frecuencia. Esta es una excelente manera de descubrir brechas entre lo que buscan sus huéspedes y lo que les ofrece. Con este conocimiento, puede planificar con confianza nuevas iniciativas para servir a sus visitantes y hacer crecer sus esfuerzos.

Dónde colocar tu barra de búsqueda

Es importante asegurarse de que su barra de búsqueda sea fácilmente accesible. Por lo tanto, querrá que ocupe una posición privilegiada. Pero tampoco desea que esta función lo distraiga de su contenido principal, como publicaciones de blog y páginas de productos.

Con eso en mente, generalmente es una buena idea colocar una barra de búsqueda en el encabezado de su sitio web. De esta forma, será uno de los primeros elementos que vean tus visitantes.

Barra de búsqueda de Rolling Stone

Además, esto le permite colocar su barra de búsqueda al lado de su menú de navegación. Esto es efectivo porque le permite mantener la experiencia del usuario consistente. Cuando lleguen a su sitio, sabrán que deben dirigirse automáticamente a la parte superior de la página.


Por otro lado, es posible que prefiera usar el pie de página o la barra lateral para acomodar la función de búsqueda. Estas posiciones también se utilizan mucho para apoyar los menús de navegación, ya que no interfieren demasiado con el contenido de la página. Si opta por este enfoque, es mejor asegurarse de que la función de búsqueda sea particularmente destacada, para que no se la pierda.

Cómo agregar una barra de búsqueda a WordPress (5 formas)

Ahora, echemos un vistazo a cinco formas de agregar una barra de búsqueda en WordPress. Comenzaremos con el enfoque más simple y avanzaremos hacia opciones más personalizables. Es una buena idea familiarizarse con todos estos enfoques, para que pueda seleccionar el que mejor se adapte a sus necesidades y experiencia.

1. Agregue una barra de búsqueda usando el bloque Buscar

La primera forma de agregar una barra de búsqueda a WordPress es usar el bloque de búsqueda. Dado que cualquier usuario de WordPress ya estará familiarizado con los bloques, esta es una de las opciones más rápidas y sencillas.

Hay dos formas de agregar un bloque de búsqueda a su sitio web. Primero, puede agregar el bloque a una página o publicación específica. En segundo lugar, puede agregar el bloque de búsqueda a una parte de la plantilla (como su encabezado) usando el Editor del sitio. Exploremos cómo funcionan ambas técnicas.

Agregar un bloque de búsqueda a una publicación o página

Una forma de usar la función de bloque de búsqueda es agregarla a una publicación o página específica (como su página de inicio). Para hacer esto, deberá abrir la publicación o página correspondiente para editarla o crear una nueva.

Luego haga clic en el signo más (+) icono para agregar un nuevo bloque. Ingrese “buscar” y seleccione la opción Buscar .

Bloque de búsqueda

Esto colocará una barra de búsqueda directamente en su página. Luego puede usar la barra de herramientas para cambiar la posición del botón, agregar un icono de botón y ajustar la alineación.

Bloque de búsqueda

Además, puede usar la Configuración de bloque a la izquierda de la pantalla para modificar el ancho de su barra de búsqueda, cambiar sus colores e incluso intercambiar la selección de fuente.

Agregar un bloque de búsqueda usando el Editor del sitio

Si está utilizando un tema de bloque, también puede agregar el bloque de búsqueda a una parte de la plantilla como su encabezado. De esta manera, puede mostrar la barra de búsqueda en todas las páginas de su sitio.

Primero, deberá asegurarse de tener un tema de bloque activado. De lo contrario, no podrá acceder al Editor del sitio.

Luego, navegue a Apariencia → Editor en su tablero de WordPress. Haga clic en Elementos de plantilla → Encabezado y seleccione el icono de lápiz para editar el encabezado de su sitio web actual.

Esto abrirá su encabezado dentro del Editor de bloques, donde puede realizar muchas personalizaciones en la parte de su plantilla.

Parte de plantilla de encabezado

Elija el ícono más ( + ) para buscar en sus bloques de WordPress la opción Buscar .

Parte de plantilla de encabezado

Ahora, todo lo que necesita hacer es arrastrar el bloque de búsqueda a su área de encabezado.

Parte de plantilla de encabezado

Puede usar las flechas en la barra de herramientas para mover su barra de búsqueda al borde de su menú. Luego, puede acceder a las mismas configuraciones que cuando agrega el bloque de búsqueda a una página o publicación.

Por lo tanto, puede cambiar el ícono del botón, ajustar la posición y alternar la etiqueta de búsqueda desde la barra de herramientas. Además, en la Configuración del bloque, puede modificar el ancho del bloque y cambiar los colores y las fuentes.

Una vez que esté satisfecho con su barra de búsqueda, haga clic en Guardar . Luego visite su sitio web en un navegador para ver la barra de búsqueda en la parte delantera.

Página principal

Si desea realizar más cambios, puede volver a visitar el Editor del sitio en cualquier momento. También puede usar este método para colocar su barra de búsqueda en otro lugar, como en su pie de página.

2. Agregue una barra de búsqueda usando el panel de widgets

Otra forma de agregar una barra de búsqueda a WordPress es usar el panel de widgets. Esta es una opción amigable para principiantes que se adapta mejor a aquellos que usan temas clásicos de WordPress.

Para agregar una barra de búsqueda usando el panel de widgets, comenzará en su tablero de WordPress. Luego dirígete a Apariencia → Widgets .

Aquí, expanda la sección donde desea agregar un widget de búsqueda. Y haga clic en el icono + en la parte inferior. Esto abrirá una lista de bloques para su sitio. Busque "Buscar". Seleccione el bloque de búsqueda.

Widgets de búsqueda

Ahora, puede diseñar y personalizar el bloque de búsqueda como desee y guardarlo para agregarlo a esa sección de su sitio.

Estilo de widget de búsqueda

Si desea cambiar el botón, la posición o el estilo de su widget de búsqueda, regrese a la pantalla Widgets y use la barra de herramientas para personalizar su barra de búsqueda.

3. Agregue una barra de búsqueda usando un complemento

Si está buscando una opción que sea más flexible pero aún simple, es posible que prefiera usar un complemento para agregar una barra de búsqueda a WordPress. El uso de un complemento es rápido y no requiere conocimientos especiales, pero le brinda más control sobre su barra de búsqueda que el que obtendrá con la configuración predeterminada de WordPress.

Agrega una barra de búsqueda con Jetpack Search

Jetpack Search, por ejemplo, permite a los propietarios de sitios guiar a los visitantes en la dirección correcta al personalizar los resultados y proporcionar opciones de filtrado fáciles de usar e intuitivas. También es lo suficientemente inteligente como para comprender lo que buscan los visitantes, incluso si escriben mal una palabra o escriben una búsqueda compleja y multifacética como "frascos a granel de condimento picante para aves por menos de $50".

La diseñadora de interiores líder, Kylie. M. Interiors utiliza Jetpack Search para navegar de manera más eficiente a los visitantes a uno de los más de 3000 artículos y reducir la carga de trabajo para ella y su equipo.

Jetpack Search también es compatible con docenas de idiomas y funciona a la velocidad de la luz, brindando resultados lógicos que se actualizan a medida que los visitantes escriben. Para que las personas puedan encontrar las respuestas correctas incluso antes de que terminen de enviar su búsqueda.

También se integra a la perfección con su sitio de WordPress para mantener la coherencia de la marca y proporciona información a los propietarios del sitio sobre lo que buscan los visitantes.

Quizás lo más impresionante es que toda esta potencia tiene un impacto mínimo en el rendimiento de su sitio porque opera en la nube. Por lo tanto, incluso si miles de nuevos visitantes buscan contenido cada día, los recursos de su servidor no se verán afectados.

Deberá comenzar instalando Jetpack Search en su sitio, y tiene dos opciones aquí:

  • Agregue el complemento de búsqueda de Jetpack. Esto agrega solo la funcionalidad de búsqueda a su sitio y tiene planes gratuitos y premium disponibles según su uso.
  • Compra el plan Jetpack Complete. Jetpack Search está incluido en este plan, junto con características adicionales del sitio para seguridad, crecimiento y más.

En los siguientes pasos, supongamos que elige el complemento Jetpack Search. En el panel de control de WordPress, vaya a Complementos → Agregar nuevo y busque "Búsqueda de Jetpack". Luego, haga clic en Instalar ahora → Activar.

Se le pedirá que se conecte a una cuenta de WordPress.com y puede comprar un plan premium si así lo desea. Una vez que el complemento esté configurado, vaya a Jetpack → Buscar en su tablero. Aquí, puede habilitar la función, activar la búsqueda instantánea, ver datos sobre las búsquedas realizadas en su sitio y más.

Habilitar la búsqueda de Jetpack

Si desea personalizar la experiencia de búsqueda, haga clic en el botón Personalizar resultados de búsqueda . Esto abrirá una nueva pantalla con muchas opciones adicionales para diseñar, tipos de publicaciones incluidas y más. Por ejemplo, puede optar por resaltar los términos de búsqueda en el color de su marca, mostrar información adicional para los resultados del producto y excluir los archivos multimedia de los resultados.

Personalizar resultados de búsqueda

Agregue su barra de búsqueda a su sitio

Ahora, puede agregar la nueva experiencia de búsqueda de Jetpack en cualquier lugar que desee en su sitio, tal como lo hicimos anteriormente en este artículo. Simplemente agregará un bloque de búsqueda utilizando el editor de bloques, el editor de sitios o el panel de widgets, según su situación específica. Jetpack Search reemplazará automáticamente la configuración predeterminada de WordPress con la nueva experiencia de búsqueda instantánea.

Búsqueda de Producto

4. Agregue un ícono de búsqueda a su encabezado o menú sin un tema de bloque

Un encabezado o menú de navegación es un lugar ideal para un ícono de búsqueda, ya que es visible instantáneamente para todos los que llegan a su sitio web.

Si está utilizando un tema de bloque, puede agregar una barra de búsqueda a su encabezado siguiendo los pasos detallados anteriormente. Si está utilizando un tema clásico, deberá instalar un complemento como Ivory Search.

Para comenzar, deberá instalar y activar Ivory Search en WordPress. Luego, vaya a Búsqueda de marfil → Búsqueda de menú y elija el menú donde desea mostrar su barra de búsqueda.

Búsqueda de marfil

Haga clic en Guardar para ver todas las configuraciones disponibles. Por ejemplo, puede seleccionar estilos de formulario de búsqueda como desplegable y de ancho completo.

Más abajo, use el interruptor para mostrar un icono de cierre de formulario de búsqueda. Luego haga clic en Seleccionar color para aplicar un color de icono de lupa de menú.

Icono de cierre de marfil

También puede agregar un título de menú para mostrar en lugar del icono de búsqueda.

Finalmente, seleccione el formulario de búsqueda que controlará la funcionalidad de búsqueda del menú. Utilice el menú desplegable para hacer su selección.

Opciones de funcionalidad de búsqueda

Luego, haga clic en Crear nuevo . Esto lo llevará a una nueva pantalla donde puede darle un nombre a su formulario de búsqueda y configurar su contenido de búsqueda.

Configuración de búsqueda

Elija Guardar formulario para generar su código abreviado de formulario de búsqueda. Luego puede agregarlo a un área de widgets, como su encabezado.

Puede ver su sitio en la parte delantera para ver los resultados:

Buscar en la página de inicio

Debería ver el icono de búsqueda en su color preferido. Al hacer clic en ese icono, aparecerá una barra de búsqueda completa.

5. Agregue una barra de búsqueda manualmente usando un código personalizado

Todos los métodos que hemos visto hasta ahora han sido adecuados para principiantes. Sin embargo, la siguiente opción requiere algunos conocimientos técnicos, ya que deberá agregar y editar código en los archivos de su tema. Querrá realizar todos los cambios utilizando un tema secundario, de modo que cuando actualice su tema en el futuro, su código no se pierda.

Antes de comenzar, es importante hacer una copia de seguridad de su sitio de WordPress. De esa manera, si ingresa una línea de código incorrecta, puede restaurar fácilmente su sitio a una versión anterior.

Para agregar una barra de búsqueda manualmente, conéctese a su sitio a través de FTP o el cPanel de su proveedor de alojamiento. Navegue a los archivos de su sitio web (generalmente la carpeta public_html ), luego elija /wp-content/themes/your-theme. Navega a través de los archivos y encuentra el header.php o pie de página.php archivo (dependiendo de dónde desee agregar su barra de búsqueda).

Una vez que haya encontrado el archivo que desea usar, ábralo y agregue esta función:

<?php get_search_form(); ?>

Esto llamará al formulario de búsqueda desde su plantilla searchform.php . Si aún no tiene esta plantilla, la función creará una.

Su barra de búsqueda ahora debería estar visible en la parte frontal.

Buscar desde la función php

Desde aquí, puede continuar modificando su formulario de búsqueda a través de un código personalizado para que se vea y funcione exactamente como lo prefiera.

Cómo ofrecer la mejor experiencia de búsqueda a tus visitantes

La experiencia de búsqueda es una parte crucial de su sitio web, ya que afecta la forma en que los clientes encuentran e interactúan con su contenido. Una de las formas más sencillas de llevar su experiencia de búsqueda al siguiente nivel es utilizar una herramienta práctica como Jetpack Search.

Búsqueda de mochilas propulsoras

Jetpack Search es una excelente solución para sitios web grandes y complejos. Una vez instalado, puede presentar resultados de búsqueda instantáneos con filtrado avanzado para ayudar a los visitantes a encontrar exactamente lo que están buscando.

Hay una versión gratuita que puede manejar 5000 registros y 500 solicitudes por mes.

La versión premium puede manejar sitios más grandes y un mayor volumen de búsqueda, además puede mostrar una barra de búsqueda sin marca, por lo que la experiencia se adapta perfectamente al resto de su sitio.

Para comenzar con Jetpack Search, todo lo que necesita hacer es instalarlo y activarlo. Luego ve a Jetpack → Buscar y desplázate hacia abajo hasta la configuración.

Habilitar la búsqueda de Jetpack

Aquí, puede usar el interruptor para habilitar la búsqueda de Jetpack. También puede activar la experiencia de búsqueda instantánea. Esto habilitará la superposición dinámica para buscar, ordenar y filtrar, sin obligar a los visitantes a recargar la página. Sus cambios se actualizarán automáticamente, brindando a los visitantes una experiencia de búsqueda avanzada de inmediato.

Preguntas frecuentes (FAQ) sobre la búsqueda de WordPress

En caso de que todavía tenga algunas preguntas, echemos un vistazo a algunas consultas comunes de los lectores sobre la funcionalidad de búsqueda.

¿Por qué debería agregar una barra de búsqueda en WordPress?

Una barra de búsqueda es una manera fácil de mejorar su experiencia de usuario. Los sitios web pequeños pueden relacionar a los visitantes con el contenido que buscan con bastante rapidez.

Sin embargo, los sitios grandes y complejos, como las tiendas de comercio electrónico, pueden tener cientos o incluso miles de páginas. Por lo tanto, los visitantes pueden sentirse frustrados al tratar de encontrar contenido usando solo el menú de navegación.

Una barra de búsqueda puede ofrecer resultados instantáneos y señalar a los visitantes dónde quieren estar en su sitio. De esta manera, puede reducir las tasas de rebote y aumentar el tiempo que pasa en el sitio.

¿Cuál es la diferencia entre una barra de búsqueda y un cuadro de búsqueda?

'Barra de búsqueda' y 'cuadro de búsqueda' son términos intercambiables. Ambos describen un campo que se coloca en su sitio web (generalmente en su menú o encabezado). Los visitantes pueden ingresar términos de búsqueda y palabras clave en este campo para descubrir contenido en su sitio.

Es importante tener en cuenta que una barra de búsqueda es diferente de una barra de direcciones. Una barra de direcciones es el campo cerca de la parte superior de su navegador donde puede escribir una URL específica o ingresar términos de búsqueda. Luego, un motor de búsqueda (como Google) lo empareja con el contenido en su índice. La barra de direcciones busca en toda la web, mientras que la barra de búsqueda (o cuadro) está vinculada a un solo sitio web.

¿Cómo puedo mejorar la experiencia de búsqueda de WordPress para mis visitantes?

Una barra de búsqueda es una excelente manera de brindar una experiencia de usuario estelar, pero también hay formas de optimizar la experiencia de búsqueda.

Por ejemplo, puede colocar su barra de búsqueda en algún lugar al que se pueda acceder fácilmente, como su encabezado, pie de página o barra lateral. Además, puede mejorar la experiencia de búsqueda de WordPress proporcionando sugerencias de búsqueda en vivo.

La corrección ortográfica es otra gran herramienta para que la experiencia de búsqueda sea más precisa. Además, puede admitir búsquedas filtradas, de modo que los clientes puedan encontrar contenido buscando etiquetas, categorías, fechas y más específicas.

Jetpack Search: un complemento de búsqueda de WordPress potente y personalizable

Una de las maneras más fáciles de mantener a los visitantes en su sitio es agilizar la navegación. Una barra de búsqueda le permite hacer esto porque conecta rápidamente a los visitantes con el contenido que buscan. Mejor aún, hay muchas maneras fáciles de agregar una barra de búsqueda a su sitio web.

Por ejemplo, puede agregar una barra de búsqueda a WordPress usando el bloque de búsqueda o usar un código personalizado y modificarlo para satisfacer sus necesidades.

Alternativamente, es posible que prefiera crear esta función con un complemento, que puede ser una de las mejores formas de implementar una potente función de búsqueda en su sitio. Con una solución como Jetpack Search, puede implementar resultados rápidos y un filtrado eficaz para mantener a los visitantes en su sitio.

Además, puede habilitar una experiencia de búsqueda instantánea con una superposición dinámica para generar resultados aún más rápido. ¡Mira los planes hoy para comenzar!