Cómo agregar una barra de búsqueda en WordPress (4 formas)

Publicado: 2022-01-25

¿Le gustaría agregar una barra de búsqueda a su sitio web de WordPress?

Esta es una función útil que permite a los visitantes del sitio web encontrar el contenido que buscan en unos segundos.

Desafortunadamente, no todos los temas de WordPress tienen una barra de búsqueda predeterminada. Y puede ser un desafío descubrir cómo agregarlo si es un principiante.

Pero no se preocupe, ya que en este artículo le mostraremos cómo agregar una barra de búsqueda a su sitio web de WordPress sin ningún código.

Como este artículo contiene un conjunto de guías paso a paso para un par de formas de agregar una barra de búsqueda, aquí hay una tabla de contenido para ayudarlo a navegar:

  • Agregar una barra de búsqueda como widget
  • Agregar una barra de búsqueda manualmente
  • Agregue una barra de búsqueda compatible con su tema
  • Cómo agregar una barra de búsqueda al menú de WordPress

¡Vamos a sumergirnos en él!

¿Por qué agregar una barra de búsqueda a su sitio web?

Una barra de búsqueda no solo permite a los visitantes de su sitio web encontrar el contenido más rápido. También trae muchas ventajas ocultas que aumentan significativamente el rendimiento de su sitio web.

Estos son solo algunos ejemplos de por qué necesita una barra de búsqueda en su sitio web:

  • Aumente la tasa de conversión: cuanto más fácil sea para las personas encontrar el producto que desean en su sitio, mayores serán las posibilidades de que le compren.
  • Aumente la visibilidad del contenido: crear contenido de calidad requiere mucho trabajo y mucho tiempo. La barra de búsqueda le permite maximizar sus esfuerzos y aumentar la participación de los visitantes.
  • Mejora la experiencia del usuario: si los visitantes se divirtieron mucho explorando tu sitio web, hace que regresen una y otra vez. Una audiencia leal es valiosa ya que quieren consumir la mayor cantidad posible de su contenido.
  • Skyrocket SEO: tenga la seguridad de que todo lo anterior no escapará a la atención de Google. Estas cosas reducen la tasa de rebote, uno de los factores de clasificación esenciales. Desea mantenerlo lo más bajo posible para obtener una mejor clasificación y atraer más visitantes de los motores de búsqueda.

Ahora que conocemos los beneficios de tener una barra de búsqueda, agréguela a su sitio web de WordPress.

Cómo agregar una barra de búsqueda en WordPress

Hay varias formas de agregar una barra de búsqueda a un sitio web de WordPress.

En este artículo, veremos las formas más populares, compararemos sus ventajas y desventajas y te ayudaremos a ver la forma más fácil de hacerlo.

Agregar una barra de búsqueda como widget

Probablemente la forma más popular de agregar la barra de búsqueda es agregarla como un widget. Para hacer eso, solo necesita arrastrar y soltar el widget apropiado al área donde desea que aparezca.

Sin embargo, esta forma tiene una desventaja notable. La cuestión es que no todos los temas admiten widgets.

Incluso si es el caso, el conjunto de áreas de widgets disponibles suele ser bastante limitado. Por ejemplo, es posible que desee agregar un widget al encabezado, pero su tema solo tiene áreas de widgets en el pie de página y la barra lateral.

Tenga eso en cuenta y echemos un vistazo a cómo agregar un widget de búsqueda al sitio web de WordPress.

1. Vaya a la pestaña Widgets

El primer paso es abrir su tablero de WordPress y navegar a la pestaña Widgets en Apariencia .

go to widgets tab

A continuación, debe decidir a qué área de widgets desea agregar su widget. Por ejemplo, solo 2 áreas están disponibles en el tema oficial gratuito de WordPress Twenty Twenty.

footer section

2. Agrega un nuevo widget

Para agregar un widget de búsqueda al área deseada, presione el botón Más en la parte superior izquierda.

Busque el widget de búsqueda y arrástrelo al área donde desea que aparezca en su sitio web.

find the search widget

Así es como debería verse:

drag and drop the search widget

No olvide presionar el botón Actualizar en la parte superior derecha para guardar los cambios.

press the update button

Ahora debemos asegurarnos de que la barra de búsqueda realmente comience a mostrarse en el área del widget de pie de página donde la agregamos.

3. Echa un vistazo a tu nueva barra de búsqueda en tu sitio

La forma más rápida de hacerlo es presionar el botón Visitar sitio debajo del nombre de su sitio en la parte superior izquierda.

visit your website

Como puedes ver, la barra de búsqueda funciona perfectamente.

the search bar works

Así que esta fue una de las formas de agregar una barra de búsqueda al sitio web de WordPress. Avancemos y hablemos sobre la siguiente forma de hacer esto manualmente a continuación.

Agregar una barra de búsqueda manualmente

La siguiente forma en que vamos a ver es cómo agregar una barra de búsqueda manualmente editando el código del tema de WordPress.

Hay una gran desventaja en este método. Debe ser lo suficientemente experto en tecnología para saber cómo editar el código del tema de WordPress.

Pero no es tan difícil como parece, y a continuación le mostraremos cómo hacerlo paso a paso.

Antes de editar manualmente el código de su tema, hay algunas cosas que debe tener en cuenta:

  • El siguiente proceso depende completamente del tema específico que esté utilizando: aunque cada tema tiene su propio conjunto único de archivos, la mayoría de ellos contienen archivos típicos como encabezado, pie de página y barra lateral.php.
  • Evite realizar cambios en el tema principal: la cuestión es que perderá todos los cambios una vez que lo actualice. Es mucho mejor crear un tema hijo y agregarle cambios. Puede obtener información sobre cómo crear un tema secundario de WordPress aquí.

A los efectos de este tutorial, utilizaremos el tema Twenty Twenty-One, ya que es uno de los temas gratuitos de WordPress más populares. El proceso puede ser ligeramente diferente, dependiendo de su tema.

Dado que la gran mayoría de los propietarios de sitios web tienden a agregar un cuadro de búsqueda al encabezado, haremos lo mismo.

Por ejemplo, agreguemos una barra de búsqueda al lado de la barra de navegación, ya que es el lugar más común.

1. Ve al editor de temas

El primer paso es ir al Editor de temas en Apariencia .

go to the theme editor

En el panel derecho, puede encontrar la lista completa de archivos de temas editables.

Vamos a agregar una barra de búsqueda al encabezado, así que haga clic en el archivo header.php .

find the theme header

2. Agregue el código del formulario de búsqueda

Encuentra la línea de código:

<?php get_template_part( 'template-parts/header/site-header' ); ?>

Y pon el siguiente código justo después:

<?php get_search_form(); ?>

Así es como debería verse:

paste the search form code

Presione el botón Actualizar archivo en la parte inferior una vez que haya terminado.

press update file

Haga clic en el botón Visitar sitio debajo del nombre de su sitio web para ver el resultado.

go back to your website

3. Echa un vistazo a tu barra de búsqueda recién agregada

Como puede ver, ahora aparece una barra de búsqueda junto a la barra de navegación:

Agregue una barra de búsqueda compatible con su tema

Algunos temas de WordPress admiten habilitar o deshabilitar una barra de búsqueda.

Por ejemplo, uno de los populares temas gratuitos de WordPress llamado GeneratePress tiene esa característica.

Por lo general, puede verificar si su tema tiene esa configuración en la pestaña Personalizar en Apariencia .

Veamos cómo agregar una barra de búsqueda compatible con un tema con un ejemplo de GeneratePress.

1. Vaya a la pestaña Personalizar

El primer paso es ir a la pestaña Personalizar .

go to customize tab

Luego, vaya a Diseño » Navegación principal .

Go to primary navigation

Habilitar la búsqueda de navegación.

enable the navigation search

No olvide presionar el botón Publicar en la parte superior una vez que haya terminado.

press publish

2. Echa un vistazo a tu nueva barra de búsqueda

Vayamos a visitar nuestro sitio web y verifiquemos si todo funciona bien. Ahora tenemos el icono de la lupa tras pulsar sobre el que aparece la barra de búsqueda.

magnifying glass icon

Ya conoces las 3 formas más populares de agregar una barra de búsqueda a tu sitio web de WordPress. Pero, ¿qué sucede si desea agregar una barra de búsqueda a su menú de navegación de WordPress?

Hablemos de cómo puedes hacer eso a continuación.

Cómo agregar una barra de búsqueda al menú de WordPress

La forma más fácil de agregar una barra de búsqueda al menú de navegación de WordPress es instalar el complemento de formulario de búsqueda modal SearchWP.

Al usarlo, puede agregar un formulario de búsqueda modal liviano junto a los elementos de su menú con solo unos pocos clics.

Además, si desea mejorar aún más las posibilidades de búsqueda de WordPress, considere obtener una versión premium de SearchWP.

Como el mejor complemento de búsqueda para WordPress, SearchWP es utilizado por más de 30 000 sitios web en todo el mundo. Algunas de sus características incluyen:

  • Búsqueda automática: ¿desea que su barra de búsqueda comience a adivinar las consultas de búsqueda de los visitantes como lo hace Google? SearchWP le permite hacerlo realidad con unos pocos clics.
  • Resultados de búsqueda en vivo: WordPress muestra los resultados de búsqueda al abrir una nueva página separada de forma predeterminada. Toma tiempo y puede confundir a algunos de los visitantes. Con SearchWP, puede proporcionar a sus visitantes resultados de búsqueda en vivo.
  • Motor de búsqueda mejorado: el motor de búsqueda nativo de WordPress no considera campos personalizados, contenido de documentos, códigos abreviados y muchos más. SearchWP resuelve este problema al proporcionar a su visitante resultados de búsqueda completos.
  • Información sobre la actividad de búsqueda en el sitio: al usar SearchWP, puede ver qué estaban buscando los visitantes de su sitio web. Abre una amplia gama de oportunidades y le permite obtener nuevas ideas de contenido.
  • Integración de WooCommerce: SearchWP admite la indexación de campos personalizados, lo que hace que los atributos, etiquetas y reseñas de los productos de WooCommerce se puedan buscar.

Puede obtener la versión premium de SearchWP aquí.

Ahora, agreguemos una barra de búsqueda al menú de navegación de WordPress con unos simples pasos.

Paso 1: Instale y active el complemento de formulario de búsqueda modal SearchWP

Primero, debe ir a la pestaña Complementos en su panel de control de WordPress y hacer clic en Agregar nuevo .

add a new plugin

Luego, busque el formulario de búsqueda modal de SearchWP.

searchwp modal form search

Busque el complemento y haga clic en Instalar ahora . No olvide activarlo después de la instalación.

Para obtener más detalles sobre cómo hacer esto, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress.

install searchwp modal search form

Paso 2: agregue una barra de búsqueda al menú

Una vez que haya instalado y activado el formulario de búsqueda modal de SearchWP, desde su panel de control de WordPress, haga clic en la pestaña Apariencia y vaya a Menús .

go to appearance menus

Una vez que esté allí, haga clic en Formularios de búsqueda modal de SearchWP .

click searchwp modal search forms

Marque la casilla de verificación Predeterminado y presione Agregar al menú .

click add to menu

Haga clic en su nuevo elemento de menú llamado Predeterminado y cambie su nombre en el campo Etiqueta de navegación a algo más apropiado. Por ejemplo, llamémoslo "Buscar".

rename to search

Una vez hecho esto, presione el botón Guardar menú en la parte inferior derecha.

press save menu

Paso 3: prueba tu nueva barra de búsqueda

Ahora echemos un vistazo a la nueva barra de búsqueda. Haga clic en el botón Visitar sitio debajo del nombre de su sitio.

press the visit site button

Echa un vistazo a tu área de menú de navegación. Ahora tiene un nuevo elemento de menú llamado "Buscar".

new menu item

Una vez que haga clic en él, verá aparecer el formulario de búsqueda modal, así:

modal search form

Eso es todo. Acabas de agregar una barra de búsqueda al menú de navegación de tu sitio de WordPress.

En este artículo, aprendió cómo agregar una barra de búsqueda en WordPress siguiendo algunas formas diferentes.

Si está listo para potenciar su búsqueda de WordPress, puede obtener su copia de Search WP aquí.

También podría estar interesado en cómo personalizar el widget de búsqueda en WordPress si desea ajustar su algoritmo de búsqueda.

Además, si alguna vez tuvo algún problema con la búsqueda de WordPress, puede ser útil consultar nuestra guía sobre cómo solucionar el problema de búsqueda de WordPress.