Blog de SearchWP

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

Cómo a
tilde;adir una barra de b
squeda de WordPress con shortcode

Una de las preguntas m uevoacute;s comunes que recibimos de nuestros lectores es si es posible a uevoacute;nadir una barra de b uevoacute;squeda a p uevoacute;ginas o entradas espec uevoacute;ficas utilizando c uevoacute;digos cortos. 

Normalmente, una barra de b uevoacute;squeda en un sitio de WordPress se encuentra en el men uevoacute; de navegaci uevoacute;n del sitio o en la barra lateral.

Pero el uso de c uevoacute;digos cortos le permite colocar una barra de b uevoacute;squeda directamente dentro de una entrada o p uevoacute;gina. Y con SearchWP, puede llevar la experiencia de b uevoacute;squeda al siguiente nivel y ayudar a los usuarios a encontrar lo que buscan m uevoacute;s r uevoacute;pido.

En este art uevoacute;culo, le mostraremos c uevoacute;mo puede a uevoacute;nadir una barra de b uevoacute;squeda utilizando un c uevoacute;digo corto a su sitio de WordPress.

uevoacute;Por qu uevoacute; a uevoacute;nadir una barra de b uevoacute;squeda con c uevoacute;digo corto en WordPress?

Normalmente, no hay tantos lugares donde pueda a uevoacute;nadir una barra de b uevoacute;squeda.

La mayor uevoacute;a de los temas de WordPress le permiten colocar una barra de b uevoacute;squeda como un widget en una de las uevoacute;reas de widgets. Tambi uevoacute;n puede mostrar su barra de b uevoacute;squeda junto al men uevoacute; de navegaci uevoacute;n.

uevoacute;Pero qu uevoacute; pasa si quiere crear una p uevoacute;gina que contenga una barra de b uevoacute;squeda? uevoacute;O poner una barra de b uevoacute;squeda dentro del art uevoacute;culo, para que sus lectores no tengan que interrumpir la lectura si quieren buscar algo?

a search bar within the post's body

Ah uevoacute; es donde los c uevoacute;digos cortos resultan uevoacute;tiles. Usando c uevoacute;digos cortos, usted es libre de a uevoacute;nadir una barra de b uevoacute;squeda en cualquier lugar dentro de una entrada o p uevoacute;gina.

Esto es uevoacute;til si su tema no soporta a uevoacute;nadir un cuadro de b uevoacute;squeda, y usted no quiere editar el c uevoacute;digo para a uevoacute;nadirlo.

Ahora, veamos c uevoacute;mo puede a uevoacute;nadir una barra de b uevoacute;squeda a su sitio usando un c uevoacute;digo corto.

A uevoacute;nadir una barra de b uevoacute;squeda de WordPress con c uevoacute;digo corto

La forma m uevoacute;s f uevoacute;cil de a uevoacute;nadir una barra de b uevoacute;squeda de WordPress con un c uevoacute;digo corto es usando SearchWP.

SearchWP

Search WP es el plugin de b uevoacute;squeda de WordPress m uevoacute;s potente y completo. M uevoacute;s de 50.000 propietarios de sitios web ya lo utilizan para ofrecer a sus visitantes resultados de b uevoacute;squeda m uevoacute;s precisos.

Este plugin no solo le permite a uevoacute;nadir una barra de b uevoacute;squeda con un c uevoacute;digo corto, sino que tambi uevoacute;n le ayuda a obtener control total sobre el motor de b uevoacute;squeda de WordPress.

Por ejemplo, usando SearchWP, puede personalizar el orden de los resultados de b uevoacute;squeda, hacer que documentos, archivos multimedia, detalles de productos, PDF, campos personalizados y mucho m uevoacute;s sean b uevoacute;squedables.

Este plugin se integra autom uevoacute;ticamente con cada barra de b uevoacute;squeda que tenga en su sitio. As uevoacute; que puede mejorar la b uevoacute;squeda de su sitio inmediatamente despu uevoacute;s de la instalaci uevoacute;n, sin necesidad de c uevoacute;digo.

Aqu uevoacute; hay algunas otras cosas uevoacute;tiles que puede hacer con SearchWP:

  • Indexaci uevoacute;n de Campos Personalizados: Muchos plugins de WordPress utilizan campos personalizados para almacenar sus datos. Pero, el motor de b uevoacute;squeda nativo de WordPress no los tiene en cuenta al buscar. SearchWP le permite hacer que los campos personalizados sean b uevoacute;squedables en su sitio.
  • Seguimiento de B uevoacute;squedas: uevoacute;Alguna vez se ha preguntado qu uevoacute; b uevoacute;squedas hacen los visitantes en su sitio? SearchWP le proporciona informaci uevoacute;n sobre la actividad de b uevoacute;squeda en su sitio con unos pocos clics, para que pueda obtener nuevas ideas de contenido y satisfacer las necesidades de su audiencia.
  • Integración perfecta de WooCommerce: Por defecto, la búsqueda de WordPress ignora los detalles de los productos de WooCommerce, por lo que a los clientes les resulta más difícil encontrar un producto que buscan. Con SearchWP, puede hacer que cualquier campo personalizado de WooCommerce sea buscable, incluidos los atributos de los productos, las etiquetas y las reseñas.

Veamos cómo puedes usar SearchWP para añadir una barra de búsqueda con un shortcode en minutos.

Paso 1: Instalar y activar el plugin SearchWP

El primer paso es visitar el sitio web de SearchWP y registrarse para obtener una nueva cuenta.

Una vez hecho esto, deberás ir a tu cuenta de SearchWP y cambiar a la pestaña Descargas. Desde aquí, simplemente pulsa el botón Descargar SearchWP y guarda el archivo ZIP del plugin en tu ordenador.

Descargar el plugin SearchWP desde el área de cuenta

Cuando la descarga se complete, copia tu clave de licencia, ya que la necesitarás más tarde para activar el plugin.

Después de haber descargado SearchWP y copiado la clave de licencia, sube el archivo ZIP del plugin a tu sitio de WordPress e instala SearchWP.

Si necesitas ayuda sobre cómo hacerlo, consulta esta guía paso a paso sobre cómo instalar un plugin de WordPress.

Una vez que SearchWP esté instalado y activado, verás el asistente de configuración. Haz clic en el botón 'Iniciar el asistente de incorporación' y sigue las instrucciones en pantalla.

Asistente de incorporación SearchWP

Paso 2: Instalar y activar la extensión de Shortcodes

A continuación, necesitas instalar la extensión Shortcodes en SearchWP. Esta extensión te permite añadir una barra de búsqueda con un shortcode en cualquier lugar de una entrada o página.

Para empezar, puedes ir a la página SearchWP » Extensiones y navegar hasta la extensión 'Shortcode'. Desde aquí, simplemente haz clic en el botón 'Instalar' y la extensión se activará automáticamente en tu sitio.

Install shortcodes extension

Paso 3: Crear una página para la nueva barra de búsqueda

Ahora, necesitas crear una nueva página, en la que colocarás el cuadro de búsqueda.

Para hacerlo, simplemente navega a Páginas desde el panel de WordPress y haz clic en el botón 'Añadir nueva página'.

Add a new page

Una vez que estés en el editor de contenido de WordPress, haz clic en añadir un título a tu página.

Después de eso, puedes hacer clic en el botón Más, buscar el bloque HTML personalizado y luego hacer clic en él para añadirlo a la página.

choose the custom html block

Luego, copia el siguiente código y pégalo en el bloque HTML personalizado:

[searchwp_search_form engine="default" var="searchvar" button_text="Find Results"]
   
<div class="search-results-wrapper">
 [searchwp_search_results engine="default" var="searchvar" posts_per_page=4]
  <h2>[searchwp_search_result_link direct="true"]</h2>
  [searchwp_search_result_excerpt]
 [/searchwp_search_results]
</div>
   
<div class="no-search-results-found">
 [searchwp_search_results_none]
 No results found, please search again.
 [/searchwp_search_results_none]
</div>
   
<div class="search-results-pagination">
 [searchwp_search_results_pagination direction="prev" link_text="Previous" var="searchvar" engine="default"]
 [searchwp_search_results_pagination direction="next" link_text="Next" var="searchvar" engine="default"]
</div>

El código anterior muestra el cuadro de búsqueda en la página donde añadiste el cuadro de HTML personalizado.

También muestra el mensaje "No se encontraron resultados de búsqueda" si no hay resultados de búsqueda. Además, también puede mostrar enlaces de paginación si hay más de 4 resultados de búsqueda.

Una vez que hayas añadido el código, simplemente haz clic en el botón Publicar en la parte superior derecha para publicar tu página.

publish the page

Ahora, vayamos a nuestra nueva página y probemos la barra de búsqueda que acabamos de añadir.

Paso 4: Probar tu nueva barra de búsqueda

Para ir a la página recién creada, haz clic en el botón Ver página.

view the page

Como puedes ver, la barra de búsqueda que añadiste con el shortcode se muestra ahora con éxito en la página.

You can try searching for different blog posts and pages to test the search bar.

the search box appears

Bonus: Change Default WordPress Search Settings

With SearchWP, you can change the default WordPress search settings and improve the overall search experience for your visitors.

The default search has many limitations and isn’t ideal for sites that have a lot of content or products. For instance, it doesn’t include custom fields, product details, categories, tags, and other additional information when performing a search.

This is where you can use SearchWP and change the search settings. With the plugin, you can include comments, reviews, taxonomies, custom fields, and more in the search results.

Edita o añade nuevos motores de búsqueda en WordPress

SearchWP also lets you create unlimited custom search engines, which you can link to multiple search forms on your site.

Para obtener más información, consulta nuestra guía sobre cómo cambiar la configuración de búsqueda predeterminada de tu sitio de WordPress.

We hope this article helped you learn how to add a WordPress search bar with shortcode. You may also want to see our guides on how to add a search bar to your WordPress website and how to make a search bar that searches your WordPress Site.

¡Listo para crear una experiencia de búsqueda en WordPress mejor y más personalizada? ¡Empieza hoy mismo con SearchWP ! 

avatar del autor
Aazim Akhtar

Cree hoy mismo una mejor experiencia de búsqueda en WordPress

No vuelva a perder visitantes por resultados de búsqueda inútiles. SearchWP facilita la creación de su propia búsqueda inteligente en WordPress.

Get SearchWP Now
Icono de múltiples motores de búsqueda