¿Necesita crear un formulario de búsqueda personalizado para su sitio de WordPress?

La búsqueda es la forma en que la mayoría de los usuarios encuentran contenido en su sitio web. Si no pueden encontrar fácilmente lo que buscan, es posible que se trasladen a otro sitio.

En este artículo, le mostraremos paso a paso cómo mejorar la búsqueda de su sitio web mediante la creación de un formulario de búsqueda personalizado de WordPress.

Cómo crear un formulario de búsqueda de WordPress personalizado (paso a paso)

¿Por qué crear un formulario de búsqueda personalizado para WordPress?

La función de búsqueda predeterminada de WordPress es muy limitada y no siempre encuentra el contenido más relevante.

A medida que agregue más contenido a su sitio, necesitará mejores formas de ayudar a los visitantes del sitio a encontrar contenido fácilmente en su sitio.

Esto se vuelve aún más importante si tiene una tienda en línea o un sitio de membresía donde desea que los usuarios encuentren el producto o curso adecuado.

También es posible que desee personalizar el algoritmo de búsqueda para mostrar contenido específico más alto que otros, o personalizar el aspecto del formulario de búsqueda.

Dicho esto, veamos cómo personalizar el formulario de búsqueda y la página de resultados de WordPress. Cubriremos dos métodos, puede elegir entre usar los enlaces a continuación:

Cómo personalizar formularios y resultados de búsqueda de WordPress

SearchWP es el mejor complemento de búsqueda personalizado para WordPress. Es fácil de usar, le brinda control total sobre los resultados de búsqueda y es más preciso que la búsqueda predeterminada de WordPress.

El primer paso es instalar el complemento SearchWP. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar complementos de WordPress.

Después de la activación, debe acceder Ajustes » Buscar WP y luego haga clic en la opción de menú Licencia.

Ingrese la clave de licencia de SearchWP

Luego, ingrese su clave de licencia en el cuadro Licencia y haga clic en el botón Activar. Puede encontrar esta información en su cuenta en el sitio web de SearchWP.

buscador personalizado

Una vez hecho esto, debe hacer clic en la opción de menú Motor. Una vez allí, debe hacer clic en el botón «Agregar nuevo» para crear un nuevo motor de búsqueda.

Buscar WP para agregar un nuevo motor

Esto creará un nuevo motor de búsqueda llamado «Suplemento». Para cambiar el nombre, debe hacer clic en el botón «Fuentes y configuraciones».

SearchWP complementa los motores de búsqueda

Esto lo llevará a una página que también le permite elegir si desea buscar publicaciones, páginas, archivos multimedia, comentarios y usuarios. Mantendremos la configuración por defecto.

Cambiaremos el nombre del buscador a «personalizado». Continúe e ingréselo en el campo «Etiqueta del motor».

Buscar etiquetas de motor WP

Tenga en cuenta que la opción «Derivación de palabras clave» se ha seleccionado para usted. Esto ignorará las terminaciones de las palabras cuando sus usuarios busquen para que se muestren los resultados de búsqueda más relevantes.

Asegúrate de hacer clic en el botón «Listo» cuando hayas terminado.

La página de configuración de un motor de búsqueda contiene publicaciones, páginas, medios y secciones de usuarios. Dentro de cada sección, puede priorizar diferentes atributos de publicación o incluir solo ciertas categorías o etiquetas en los resultados de búsqueda.

Puede hacerlo ajustando el control deslizante Dependencia de atributos.

Estos cambian la forma en que los motores de búsqueda califican y clasifican el contenido. Por ejemplo, si desea que el título de la publicación sea más alto que el contenido, puede ajustar el control deslizante en consecuencia.

Debe completar cada sección y hacer los ajustes que desee en los controles deslizantes.

Control deslizante de relevancia de la propiedad SearchWP

También puede crear reglas para cada sección para determinar si cierto contenido se incluye o excluye de los resultados de búsqueda.

Por ejemplo, puede facilitar que sus visitantes busquen el mismo tema que acaban de leer. O en una tienda en línea, puede ayudar a sus clientes a encontrar rápidamente otros productos en la misma categoría.

Continúe y haga clic en el botón Editar reglas en la sección Publicaciones.

Notará que puede crear reglas para categorías de publicaciones, etiquetas y formatos, fechas de publicaciones e ID de publicaciones.

Buscar reglas de edición de WP

Es posible que desee permitir que sus visitantes busquen categorías específicas de sitios web. Por ejemplo, puede agregar la funcionalidad de búsqueda de categoría a sus páginas de archivo para ayudar a los visitantes a encontrar rápidamente lo que están buscando.

Para aprender cómo hacer esto, vea el Método 1 en nuestra guía paso a paso sobre cómo buscar por categoría en WordPress.

Una vez que haya terminado de configurar su motor de búsqueda predeterminado personalizado, asegúrese de hacer clic en el botón «Guardar motor» en la parte superior de la página para crear su motor de búsqueda personalizado.

Haga clic en el botón Guardar motor

Agregar un formulario de búsqueda usando un shortcode

SearchWP Shortcodes Extension simplifica la adición de un nuevo formulario de búsqueda de publicaciones personalizadas a su sitio de WordPress.

Simplemente visite el sitio web de SearchWP Shortcodes Extension y haga clic en el botón «Descargar licencias disponibles».

Descargar la extensión de código abreviado de SearchWP

Después de eso, debe instalar y activar la extensión de la misma manera que instaló el complemento anterior.

Ahora puede agregar formularios de búsqueda personalizados a sus publicaciones, páginas y widgets usando códigos abreviados. Si no ha usado códigos cortos antes, puede obtener más información sobre cómo agregar códigos cortos en WordPress en nuestra guía para principiantes.

Simplemente edite la publicación y coloque el cursor donde desee agregar el formulario de búsqueda. Después de eso, haga clic en el signo más’+‘ Agregar icono de bloque para que aparezca el menú de bloque.

Agregar bloques HTML personalizados

Luego, ingrese «html» en el cuadro de búsqueda y haga clic en el bloque «HTML personalizado» para agregarlo a la publicación.

Después de agregar el nuevo bloque, se debe pegar el siguiente código abreviado y HTML.


[searchwp_search_form engine="custom" var="searchvar" button_text="Custom Search"]
  
<div >
 [searchwp_search_results engine="custom" var="searchvar" posts_per_page=4]
  <h2>[searchwp_search_result_link direct="true"]</h2>
  [searchwp_search_result_excerpt]
 [/searchwp_search_results]
</div>
  
<div >
 [searchwp_search_results_none]
 No results found, please search again.
 [/searchwp_search_results_none]
</div>
  
<div >
 [searchwp_search_results_pagination direction="prev" link_text="Previous" var="searchvar" engine="custom"]
 [searchwp_search_results_pagination direction="next" link_text="Next" var="searchvar" engine="custom"]
</div>

Este código agregará su formulario de búsqueda personalizado a la publicación, creará una sección para mostrar los resultados de la búsqueda, mostrará un mensaje sin resultados si es necesario y agregará paginación cuando los resultados vayan a varias páginas.

Si le da a su motor de búsqueda un nombre diferente, entonces necesita cambiar engine=“custom” Agregue a su propio nombre de motor en cuatro lugares.

También puede elegir cambiar el texto en el botón de búsqueda a algo más descriptivo editando button_text=“Custom Search”El resto del código puede permanecer igual.

Asegúrate de hacer clic en Publicar o Actualizar para guardar tu publicación y publicarla.

Haz clic en Publicar o Actualizar para guardar tu publicación.

Para ver el formulario de búsqueda real, simplemente vea la publicación en su sitio de WordPress. Así es como se ve en nuestro sitio de demostración que ejecuta el tema veintiuno veintiuno.

Vista previa del formulario de búsqueda personalizado de SearchWP

Agregar búsqueda Ajax en tiempo real

Live Ajax Search mejora sus formularios de búsqueda al proporcionar automáticamente resultados de búsqueda desplegables a medida que los usuarios escriben sus consultas.

Ejemplo de página de búsqueda en vivo

La forma más fácil de agregar Ajax Live Search a WordPress es el complemento gratuito SearchWP Live Ajax Lite Search, ya que habilita automáticamente Live Search.

Para obtener instrucciones paso a paso sobre cómo instalarlo, consulte nuestra guía sobre cómo agregar la búsqueda Ajax en vivo a su sitio de WordPress.

Uso de la configuración avanzada de SearchWP

Ahora debe navegar a Ajustes » Buscar WP y haga clic en la pestaña Avanzado. En esta página, puede habilitar algunas configuraciones para que a sus usuarios les resulte más fácil encontrar lo que buscan.

Buscar configuración avanzada de WP

Marque cualquiera de estas opciones que desee:

  • Las coincidencias parciales también muestran resultados que no coinciden exactamente con la palabra que se busca.
  • La corrección automática «¿Quiso decir?» sugerirá un término de búsqueda ligeramente diferente para que coincida con más publicaciones en su sitio.
  • La compatibilidad con la «búsqueda de citas/frases» permitirá a los usuarios utilizar comillas cuando busquen frases exactas.
  • Resaltar términos en sus resultados hará que sea más fácil para sus visitantes encontrar lo que buscan en los resultados de búsqueda.

Estilo de formularios de búsqueda y páginas de resultados

Su tema de WordPress controla la apariencia de su sitio web, incluidos los formularios de búsqueda y las páginas de resultados de búsqueda. Almacenan reglas de formato para todos los elementos de un sitio de WordPress en hojas de estilo CSS.

Puede agregar su propio CSS personalizado para anular las reglas de estilo del tema.

Si no lo ha hecho antes, consulte nuestro artículo sobre cómo agregar CSS personalizado en WordPress para principiantes.

Por ejemplo, aquí hay algunos CSS personalizados para la mayoría de los temas. La primera parte cambia el estilo del formulario de búsqueda y la segunda parte personaliza los resultados de la búsqueda.


.searchform {
font-family:arial;
font-size:16px;
background:#ace5e3;
color:#ffffff;
border:1px solid #61c3c0;
padding:10px;
height:90px;
width:600px;
}

.search-results {
font-family:arial;
font-size:16px;
background:#ace5e3;
color:#000000;
border:1px solid #61c3c0;
padding:10px;
width:600px;
}

Puede cambiar el formato en el código para adaptarlo a su propio sitio. También puede eliminar cualquier línea que no desee modificar. Por ejemplo, si no desea cambiar la altura y el ancho del formulario de búsqueda, simplemente elimine esas líneas.

Aquí hay capturas de pantalla de nuestro sitio de demostración antes y después de agregar CSS personalizado.

Vista previa de CSS personalizada de SearchWP

Mida los resultados de búsqueda y aumente las conversiones

Una vez que haya configurado su formulario de búsqueda personalizado de WordPress, el siguiente paso es medir los resultados.

SearchWP viene con una extensión de métricas de búsqueda que le muestra exactamente cómo se están desempeñando las búsquedas de su sitio.

Buscar métricas de WP

También puede usar las métricas de búsqueda para mejorar automáticamente los resultados de búsqueda al promocionar los resultados que obtienen más clics en la parte superior.

Los sitios de comercio electrónico también han implementado ventanas emergentes con intención de salida y campañas de ruedas gamificadas para llevar a los usuarios a las páginas de búsqueda para que puedan convertirse en suscriptores de correo electrónico y clientes en poco tiempo.

OptinMonster Spin to Win Popup Ejemplo

Esperamos que este tutorial le haya ayudado a aprender cómo crear un formulario de búsqueda personalizado de WordPress. También puede consultar nuestras selecciones de expertos para los mejores servicios telefónicos comerciales para pequeñas empresas, así como nuestra comparación de los mejores registradores de dominios.

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

Los datos expuestos en este sitio web son de índole informativo, no necesariamente están actualizados. Esta información es una recopilación de información de internet.