ElegantThemes

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

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

La mayoría de las personas encuentran contenido en su sitio web mediante búsquedas. Si no pueden encontrar fácilmente lo que buscan, pueden cambiar a otro sitio web.

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.

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

La funcionalidad de búsqueda estándar de WordPress es bastante limitada y no siempre encuentra el contenido más relevante.

A medida que agrega más contenido a su sitio web, necesita mejores formas de ayudar a los visitantes de su sitio web a encontrar el contenido en su sitio web.

Esto se vuelve aún más importante cuando tienes uno. Tienda online o un Sitio de miembros donde desea que los usuarios encuentren el producto o curso adecuado.

También puede personalizar el algoritmo de búsqueda para mostrar cierto contenido más alto que otros, o personalizar la apariencia de su formulario de búsqueda.

Sin embargo, echemos un vistazo a cómo personalizar el formulario de búsqueda de WordPress y la página de resultados. Vamos a cubrir dos métodos que puede elegir de los enlaces a continuación:

Cómo personalizar el formulario de búsqueda y los resultados de WordPress

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

El primer paso es instalar el complemento SearchWP. Para obtener más información, consulte nuestra guía paso a paso sobre Cómo instalar un complemento de WordPress.

Después de la activación, necesitará el Configuración »SearchWP Página y luego haga clic en el elemento del menú ‘Licencia’.

Ingrese la clave de licencia de SearchWP

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

Personaliza el motor de búsqueda

Una vez que haya hecho esto, debe hacer clic en la opción de menú ‘Motores’. Allí debe hacer clic en el botón «Agregar nuevo» para crear un nuevo motor de búsqueda.

SearchWP agregar nuevo motor

Esto creará un nuevo motor de búsqueda llamado «complementario». Para cambiar el nombre, haga clic en el botón «Fuentes y configuración».

Motor de búsqueda complementario SearchWP

Esto lo llevará a una página donde también puede elegir buscar publicaciones, páginas, archivos multimedia, comentarios y usuarios. Dejamos la configuración predeterminada como está.

Cambiamos el nombre del motor de búsqueda a «Personalizado». Continúe e introdúzcalo en el campo «Etiqueta del motor».

Etiqueta del motor SearchWP

Tenga en cuenta que se ha seleccionado la opción Temas de palabras clave. Esto significa que las terminaciones de las palabras se ignoran cuando los usuarios realizan búsquedas, por lo que se muestran los resultados de búsqueda más relevantes.

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

La página de configuración del motor de búsqueda tiene secciones para Publicaciones, Páginas, Medios y Usuarios. En cada sección, puede priorizar diferentes atributos de publicación o incluir solo ciertas categorías o etiquetas en sus resultados de búsqueda.

Puede hacerlo ajustando el control deslizante Relevancia del atributo.

Estos cambian la forma en que los motores de búsqueda califican y clasifican el contenido. Por ejemplo, si desea calificar el título de la publicación por encima del contenido, puede ajustar el control deslizante en consecuencia.

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

Control deslizante de relevancia de atributo de SearchWP

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

Por ejemplo, puede permitir que sus visitantes busquen fácilmente contenido sobre el mismo tema sobre el que estaban leyendo. O en una tienda en línea, puede ayudar a sus clientes a encontrar rápidamente otros productos de la misma categoría.

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

Descubrirá que puede crear reglas para las categorías, etiquetas y formatos de la publicación, la fecha en que se publicó y el ID de la publicación.

Reglas de procesamiento de SearchWP

Es posible que desee permitir que sus visitantes naveguen por ciertos sitios web. Categorías. Por ejemplo, puede usar su. agregar una función de búsqueda de categoría Páginas de archivo para que sus visitantes puedan encontrar rápidamente lo que buscan.

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

Una vez que haya personalizado la configuración del motor de búsqueda predeterminado, haga clic en el botón «Guardar motores de búsqueda» en la parte superior de la página para crear su motor de búsqueda personalizado.

Haga clic en el botón Guardar motores

Añadiendo el formulario de búsqueda con shortcode

La extensión de códigos cortos de SearchWP facilita la adición de su nuevo formulario de búsqueda de publicaciones personalizadas a su sitio de WordPress.

Solo visita el Extensión de códigos cortos de SearchWP Sitio web y luego haga clic en el botón «Descarga disponible con licencia activa».

Descargar la extensión de códigos cortos 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 un formulario de búsqueda personalizado a sus publicaciones, páginas y widgets usando códigos cortos. Si nunca antes ha usado códigos cortos, consulte nuestra guía para principiantes en cómo agregar un shortcode en WordPress.

Simplemente edite una publicación y coloque el cursor donde desea agregar el formulario de búsqueda. Luego haga clic en el signo más ‘+» Agregar símbolo de bloque para abrir el menú de bloque.

Agregar un bloque HTML personalizado

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

Después de agregar el nuevo bloque, debe incluir los siguientes códigos cortos y HTML.

[searchwp_search_form engine="custom" var="searchvar" button_text="Custom Search"]
  
<div class="search-results-wrapper">
 [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 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="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 si los resultados abarcan varias páginas.

Si le ha dado a su motor de búsqueda un nombre diferente, deberá cambiarlo engine=“custom” a su propio nombre de motor en cuatro lugares.

También puede editar el texto en el botón de búsqueda para hacerlo más significativo button_text=“Custom Search”. El resto del código puede permanecer igual.

Asegúrese de hacer clic en Publicar o Actualizar para guardar y publicar su publicación.

Haga clic en Publicar o Actualizar para guardar su publicación.

Para ver el formulario de búsqueda en acción, simplemente consulte la publicación en su sitio web de WordPress. Así es como se ve en nuestra página de demostración con el tema Twenty Twenty-One.

Vista previa del formulario de búsqueda personalizado de SearchWP

Agregar búsqueda de Ajax en vivo

Live Ajax Search mejora su formulario de búsqueda al proporcionar automáticamente resultados de búsqueda desplegables a medida que el usuario escribe su consulta.

Ejemplo de una página de búsqueda en vivo

La forma más fácil de agregar Ajax Live Search a WordPress es gratis Complemento de búsqueda de WP Live Ajax Liteya que habilita automáticamente la búsqueda en vivo.

Puede encontrar instrucciones paso a paso para la instalación en nuestras instrucciones en Aquí se explica cómo agregar una búsqueda Ajax en vivo a su sitio de WordPress.

Utilice la configuración avanzada de SearchWP

Ahora deberías poder navegar Configuración »SearchWP y haga clic en la pestaña Avanzado. En esta página puede activar algunas configuraciones que facilitarán a sus usuarios encontrar lo que están buscando.

Configuración avanzada de SearchWP

Habilite cualquiera de estas opciones que desee:

  • Las coincidencias parciales también mostrarán resultados que no coinciden con el término que está buscando.
  • Automáticamente «¿Quiso decir?» Las correcciones sugieren un término de búsqueda ligeramente diferente que coincide con más publicaciones en su sitio web.
  • La compatibilidad con «Buscar citas / frases» permite a los usuarios utilizar comillas cuando busquen frases exactas.
  • Resaltar términos en los resultados facilitará a sus visitantes encontrar lo que buscan en los resultados de búsqueda.

Diseñe el formulario de búsqueda y la página de resultados

Su tema de WordPress controla la apariencia de su sitio web, incluido el formulario de búsqueda y la página de resultados de búsqueda. Guarde las reglas de formato para todos los elementos de su sitio de WordPress en un CSS Hoja de estilo.

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

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

Por ejemplo, aquí hay un CSS personalizado que funcionará con la mayoría de los temas. La primera sección cambia el estilo del formulario de búsqueda y la segunda sección ajusta 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 adaptar el formato del código para que se adapte a su propio sitio. También puede eliminar las líneas que no desee cambiar. Por ejemplo, si no desea cambiar la altura y el ancho del formulario de búsqueda, simplemente elimine estas líneas.

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

Vista previa de CSS personalizado de SearchWP

Mida los resultados de la búsqueda y mejore 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 un Extensión para métricas de búsqueda que le muestra exactamente cómo le está yendo a la búsqueda de su sitio web.

Métricas de SearchWP

También puede utilizar las métricas de búsqueda para mejorar automáticamente los resultados de la búsqueda promocionando los resultados con más clics en la parte superior.

Los sitios web de comercio electrónico también están implementando Salir de las ventanas emergentes de intención y campañas de spin-a-wheel gamificadas para orientar a los usuarios en las páginas de búsqueda para que puedan convertirse en suscriptores de correo electrónico y luego en clientes poco después.

OptinMonster Spin to Win Popup Sample

Esperamos que este tutorial le haya ayudado a crear un formulario de búsqueda personalizado de WordPress. También puede interesarle nuestra selección experta de mejores servicios telefónicos para empresas para las pequeñas empresas y las nuestras Comparación de los mejores registradores de dominios.

Si te ha gustado este artículo, suscríbete al nuestro. canal de Youtube para tutoriales en video de WordPress. También puedes encontrarnos en Gorjeo y Facebook.

El cargo Cómo crear un formulario de búsqueda personalizado de WordPress (paso a paso) apareció primero WPBeginner.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *