Latest SeedProd News

Tutoriales, consejos y recursos de WordPress para ayudarte a hacer crecer tu negocio

cómo añadir una barra de búsqueda a WordPress

Cómo añadir una barra de búsqueda personalizada a WordPress (pasos sencillos) 

Written By: avatar del autor Stacey Corrin
avatar del autor Stacey Corrin
Stacey Corrin is a certified content marketing and search specialist with over 15 years of experience writing about WordPress, SEO, and digital marketing. She manages content for SeedProd and RafflePress, covering tools and strategies she actively uses and tests herself.
    
Reviewed By: avatar del revisor Turner John
avatar del revisor Turner John
John Turner is the co-founder of SeedProd. He has over 20+ years of business and development experience and his plugins have been downloaded over 25 million times.

Cuando empecé a usar WordPress, me frustraba la función de búsqueda básica. A menudo devolvía resultados irrelevantes o se perdía contenido por completo.

Al gestionar mis propios sitios de WordPress, ahora sé que una buena función de búsqueda ayuda a los visitantes a encontrar lo que buscan, lo que les hace permanecer más tiempo en tu sitio. Esto, en última instancia, les hace más felices y es más probable que vuelvan a tu sitio web.

Por eso, en esta guía, aprenderás a añadir una barra de búsqueda a WordPress. Al final, tendrás una potente función de búsqueda que tus visitantes disfrutarán usando y que servirá mejor a tu sitio web.

¿Por qué añadir una barra de búsqueda a WordPress?

Imagina que acabas de aterrizar en un sitio web buscando información específica. Te desplazas por la página de inicio y haces clic en un par de pestañas, pero no encuentras lo que buscas.

Frustrante, ¿verdad? Ahora, piensa en tu propio sitio web de WordPress. Tus visitantes no son diferentes; quieren información y la quieren rápido. Aquí es donde entra la magia de una barra de búsqueda.

Añadir una barra de búsqueda a tu sitio de WordPress proporciona una experiencia de usuario más fácil. Cuando los visitantes del sitio web pueden encontrar rápidamente lo que buscan, es más probable que permanezcan y exploren.

De hecho, los que buscan en el sitio tienen un 1,8 % más de probabilidades de convertir que los que no utilizan esta función. Esto hace que una barra de búsqueda sea crucial para convertir visitantes en suscriptores y clientes.

Ejemplo de uso de una barra de búsqueda en WordPress

Mejor aún, si los usuarios permanecen más tiempo en tu sitio, puede reducir tu tasa de rebote, un factor de clasificación en SEO.

Sin embargo, los beneficios van más allá de la experiencia del usuario. Una buena barra de búsqueda o widget de búsqueda también puede ayudarte a saber qué le interesa a tu audiencia. Al observar las consultas de búsqueda, puedes adaptar tu estrategia de contenido para satisfacer las demandas y preguntas de tus visitantes.

Cómo añadir una barra de búsqueda a WordPress: 2 métodos sencillos

Si bien la función de búsqueda predeterminada de WordPress es adecuada para situaciones sencillas, es difícil de personalizar sin escribir código CSS o contratar a un desarrollador. Un enfoque más personalizado te permite añadir una barra de búsqueda de WordPress a áreas de widgets, menús y páginas de WooCommerce. En algunos casos, puedes incluir campos personalizados, resultados de búsqueda adaptados y más.

Teniendo esto en cuenta, veamos cómo añadir una barra de búsqueda a tu sitio web paso a paso:

El primer método que explicaré es usar un constructor de páginas para integrar perfectamente una barra de búsqueda en tu sitio de WordPress. Es más sencillo de lo que crees y no necesitas ser un genio de la tecnología para lograrlo.

Método 1. Añadir un formulario de búsqueda personalizado a WordPress con SeedProd

Primero lo primero, hablemos de SeedProd.

Constructor de sitios web de WordPress con arrastrar y soltar SeedProd

Si no te suena, SeedProd es uno de los mejores constructores de páginas de WordPress, que te permite personalizar tu sitio web sin tocar una sola línea de código. Desde la funcionalidad de arrastrar y soltar hasta las plantillas prediseñadas, SeedProd facilita el diseño de tu sitio tal y como lo deseas.

Y sí, eso incluye añadir una barra de búsqueda a tu sitio.

Antes de empezar, necesitarás instalar SeedProd. Si bien ofrece una versión gratuita y varias opciones premium, usaré SeedProd Pro para esta guía. Así que adelante, elige tu plan y descarga el plugin.

Después de descargarlo, puedes seguir estos pasos para instalar el plugin SeedProd en tu sitio de WordPress.

Con SeedProd activado, tu siguiente paso es elegir dónde añadir la barra de búsqueda en WordPress. Con SeedProd, puedes personalizar cualquier parte de tu sitio web, ya sea un tema personalizado de WordPress o una página de destino específica.

El constructor de páginas de destino es ideal para crear páginas independientes que impulsen clientes potenciales y conversiones.

Panel del constructor de páginas de destino de SeedProd

Alternativamente, el Theme Builder es perfecto para crear un tema personalizado de WordPress sin contratar a un desarrollador.

Panel de control del generador de temas de SeedProd

Para encontrar estas opciones, navega a SeedProd en tu panel de WordPress y elige Theme Builder o Landing Pages, según tus necesidades. Desde allí, puedes seleccionar una plantilla de página de destino prediseñada o un kit completo de sitio web que se alinee con tu visión y empezar a personalizar tu sitio.

kits de sitios web de seedprod

¿Necesitas todos los pasos? Aquí tienes una guía sobre cómo crear un tema personalizado de WordPress y cómo crear una página de destino en WordPress, lo que debería facilitar las cosas.

Añadir un cuadro de búsqueda a una página de WordPress

Ahora viene la parte divertida: añadir la barra de búsqueda.

Dentro del constructor de páginas de SeedProd, encontrarás un panel a la izquierda con varios bloques para añadir a tu página. Desplázate hacia abajo hasta que encuentres el bloque Search Form

Bloque de formulario de búsqueda de SeedProd

A continuación, arrastra y suelta el bloque donde quieras añadir la búsqueda de WordPress a tu página.

Arrastre y suelte el bloque de formulario de búsqueda

Dentro de la configuración del bloque de búsqueda, puedes personalizar su apariencia, tamaño e icono de búsqueda, e incluso añadir un texto de marcador de posición como 'Buscar aquí...' para guiar a tus visitantes.

Opciones de personalización del bloque de formulario de búsqueda

En la pestaña 'Avanzado' del formulario de búsqueda, tienes una gran cantidad de opciones de personalización al alcance de tu mano. Puedes cambiar los colores del botón de búsqueda y del cuadro de búsqueda para que coincidan con el tema de tu sitio, ajustar el espaciado para una disposición óptima, controlar la visibilidad del dispositivo e incluso añadir animaciones para darle un toque extra.

Opciones avanzadas de personalización del bloque de formulario de búsqueda

Cuando estés satisfecho con tus cambios, haz clic en el botón Guardar y Publicar, luego visita tu página para ver tu nueva barra de búsqueda.

Ejemplo de barra de búsqueda en página de WordPress

Añadir una barra de búsqueda al encabezado de WordPress

Quizás pienses que la búsqueda del sitio sería más efectiva en el encabezado, donde es fácilmente accesible en cada página. Tienes toda la razón, y con SeedProd, añadir una barra de búsqueda a tu encabezado de WordPress es pan comido.

Para esto, necesitarás usar la función Theme Builder, que te permite personalizar varias partes de tu sitio web, incluyendo la cabecera, el pie de página, la barra lateral, los archivos y más. 

Si aún no has configurado tu tema de WordPress usando SeedProd, puedes seguir estos pasos para personalizar tu cabecera de WordPress.

edita tu plantilla de encabezado de SeedProd

Una vez que estés en el modo de edición de tu cabecera, verás la familiar interfaz del constructor de páginas de SeedProd. Como antes, busca el bloque de formulario de búsqueda en el panel izquierdo y arrástralo a la ubicación deseada en la cabecera.

Añadir bloque de formulario de búsqueda al encabezado de WordPress

No olvides ajustar la barra de búsqueda para que encaje perfectamente en el diseño de tu cabecera. Dirígete a la pestaña 'Avanzado' en la configuración del formulario de búsqueda. Aquí, puedes ajustar el estilo y configurar la barra de búsqueda para que aparezca de manera diferente en varios dispositivos.

Una vez que hayas guardado tus cambios, puedes visitar tu sitio web para ver tu barra de búsqueda en la cabecera en funcionamiento.

cómo añadir barra de búsqueda al encabezado de WordPress

Añadir el Widget de Búsqueda a la Barra Lateral de WordPress

A veces, la barra lateral es el lugar perfecto para una barra de búsqueda, especialmente si quieres que sea accesible pero no demasiado intrusiva. Con SeedProd, añadir una barra de búsqueda a la barra lateral de WordPress es tan sencillo como añadirla a la cabecera.

Vamos a repasar los pasos.

Como antes, navega a tu panel de WordPress y haz clic en SeedProd, luego en Theme Builder. Desde allí, haz clic en el enlace "Editar Diseño" en tu plantilla de barra lateral para abrir el constructor de páginas.

Editar plantilla de barra lateral de SeedProd

Si aún no tienes esta plantilla, sigue estos pasos para crear una barra lateral personalizada en WordPress.

Una vez que estés en el constructor de páginas para tu barra lateral, busca el bloque de Búsqueda en el panel izquierdo y arrástralo a donde quieras que esté la barra de búsqueda en tu barra lateral.

Añadir barra de búsqueda a la barra lateral de WordPress

Ahora, todo lo que queda es personalizar su apariencia y hacer clic en el botón Guardar para que tus cambios se publiquen.

Ejemplo de barra de búsqueda en la barra lateral de WordPress

Método 2. Añadir Búsqueda al Sitio en WordPress con un Plugin de Barra de Búsqueda

Si buscas una solución dedicada para añadir una barra de búsqueda a tu sitio de WordPress, un plugin de búsqueda de WordPress como SearchWP es una excelente opción.

searchwp el mejor plugin de comercio electrónico de WordPress para descargas digitales

Los plugins de búsqueda como este te permiten añadir cajas de búsqueda fácilmente, con funciones avanzadas como búsqueda en vivo con Ajax y resultados de búsqueda personalizables.

La búsqueda Ajax en vivo ofrece a los usuarios resultados de búsqueda en tiempo real a medida que escriben. Esto reduce el tiempo que necesitan esperar por los resultados, al tiempo que mejora la experiencia general de búsqueda.

Añadir una Barra de Búsqueda al Menú de Navegación de WordPress

Primero, navega a tu panel de WordPress, ve a Plugins, y haz clic en Añadir Nuevo. Busca el plugin 'SearchWP Modal Search Form' e instálalo y actívalo. Alternativamente, puedes descargar el plugin desde WordPress.org y subirlo manualmente.

Plugin SearchWP Modal Search Form

Después de la activación, ve a Apariencia y Menús desde tu panel y selecciona un menú para editar en el menú desplegable.

formulario de búsqueda modal en el menú de WordPress

A continuación, busque el cuadro ‘Formularios de búsqueda modal de SearchWP’ en el lado izquierdo de la pantalla y haga clic en él para expandir sus opciones. Marque la opción de casilla ‘WordPress nativo’ y haga clic en el botón Añadir al menú .

Checkbox nativo de formulario de búsqueda modal de WordPress

Ahora verá un elemento ‘WordPress nativo’ en su menú, en el que puede hacer clic para personalizar. Por ejemplo, puede cambiar la etiqueta de navegación a ‘Buscar’ para una mayor claridad.

Personalizar la etiqueta de navegación del formulario de búsqueda modal

Después de eso, haga clic en el botón Guardar cambios para guardar su menú y visite su sitio web para ver la función de búsqueda del menú en acción.

Ejemplo de barra de búsqueda en el menú de WordPress

Para una experiencia de búsqueda más interactiva, puede añadir resultados de búsqueda en vivo utilizando tecnología Ajax. Esto le permite mostrar resultados de búsqueda relevantes a medida que los usuarios escriben sus consultas, similar a la Búsqueda de Google y otros motores de búsqueda.

Para ello, instale y active el plugin ‘Búsqueda Ajax en vivo de SearchWP‘. Funciona perfectamente con el Formulario de búsqueda modal de SearchWP y no tiene configuraciones que ajustar.

Plugin SearchWP Live Ajax Search

Una vez activado, el plugin añadirá automáticamente la búsqueda en vivo a todos sus formularios. Puede verlo en acción visitando su formulario de búsqueda en el front-end de su sitio y escribiendo una consulta.

Ejemplo de búsqueda AJAX en directo en WordPress

Personalizar sus resultados de búsqueda de WordPress

Añadir una barra de búsqueda en vivo a su menú de WordPress es un gran comienzo, pero puede ir mucho más allá con el plugin premium SearchWP. El plugin premium tiene funciones de búsqueda avanzadas, que le permiten personalizar los resultados de búsqueda y destacar los artículos promocionados como productos de comercio electrónico.

Características y opciones de personalización de la barra de búsqueda avanzada de SearchWP

Para una guía completa, consulte estos consejos sobre cómo mejorar la búsqueda de WordPress con SearchWP.

¡Ahí lo tienes!

Añadir una barra de búsqueda a su sitio de WordPress es una decisión inteligente. Hace que su sitio web sea más fácil de usar y ayuda a los visitantes a encontrar lo que buscan. Ya sea que use SeedProd o SearchWP, ambos métodos son sencillos y efectivos.

¡Así que adelante y añada esa barra de búsqueda, sus visitantes lo agradecerán!

Si está buscando más tutoriales sencillos de WordPress, consulte las siguientes guías:

¡Gracias por leer! Nos encantaría conocer tu opinión, así que únete a la conversación en YouTubeXFacebook para obtener más consejos y contenido útil para hacer crecer tu negocio.

avatar del autor
Stacey Corrin Content Marketing Specialist
Stacey Corrin is a certified content marketing and search specialist with over 15 years of experience writing about WordPress, SEO, and digital marketing. She manages content for SeedProd and RafflePress, covering tools and strategies she actively uses and tests herself.

Descargo de responsabilidad: Nuestro contenido es compatible con el lector. Esto significa que si haces clic en algunos de nuestros enlaces, podemos ganar una comisión. Solo recomendamos productos que creemos que aportarán valor a nuestros lectores.

[weglot_switcher]