Easy Search Autosuggest en WordPress - Tutorial
Publicado: 2022-04-10Crear una barra de búsqueda con sugerencias automáticas en WordPress es sorprendentemente fácil, rápido y gratuito. Aquí está nuestro tutorial sobre cómo hacerlo.
¿Por qué debería siquiera tomarse el tiempo para agregar Búsqueda automática a WordPress? En primer lugar, ahorrará tiempo. A los visitantes de su blog les encantará más porque les hace la vida más fácil al proporcionar un fácil acceso a la información que buscan desde la comodidad de su sitio. Hay una razón por la que Google y otras herramientas de búsqueda orientadas a la información utilizan este tipo de función.
Nota: La búsqueda automática dentro de WordPress también se puede denominar a veces como " búsqueda ajax en vivo ". Además, debido a que WooCommerce usa la misma base de datos que WP, y los productos son simplemente un tipo de publicación personalizada, este tutorial también funcionará para el popular complemento de comercio electrónico.
Lo que necesitarás
Necesitará un administrador de fragmentos de código, la capacidad de copiar y pegar, y el complemento Live Search (gratis en el repositorio).
Debemos tener en cuenta lo siguiente: cualquier formulario que use <?php get_search_form() ?> funcionará automáticamente con esta solución y no necesitará los siguientes dos pasos. Simplemente pase a esta sección si elige esa ruta.
Sin embargo, este no es el caso de muchos temas, creadores de páginas y otras herramientas. Elementor y Oxygen no utilizan este formulario integrado que ofrece WordPress (por lo que sus usuarios pueden diseñarlos fácilmente en términos de tamaño, fuente y color). Entonces, para obtener una barra de búsqueda con autocompletar en Elementor, Oxygen, la mayoría de los demás creadores de páginas y muchos temas, siga los pasos que se describen a continuación.
Incluso si lo agrega a través de PHP, como se muestra arriba, sin ningún CSS, se quedará con un formulario de búsqueda sin estilo. Sin embargo, si tiene acceso a sus archivos/plantillas de tema, esta es una forma viable de obtener un formulario de búsqueda en su sitio. Esto utilizará el marcado estándar de WordPress, por lo que puede ajustar el CSS a continuación.
Preferimos el siguiente método, ya que puede editar el estilo y las clases, agregar elementos especiales, enviar usuarios a puntos finales de búsqueda personalizados y más: está creando esto desde cero.
El PHP
Primero, construyamos este formulario de búsqueda. Puede agregar entradas adicionales, clases de CSS, marcadores de posición y más. Si mantiene el código exactamente como está, el CSS asociado funcionará junto con el HTML. Dependiendo de cómo esté creando un sitio web, simplemente puede pegar esto en la estructura real de la plantilla donde desea que termine una barra de búsqueda de autocompletar O ir a la ruta 2.
La ruta 2 es probablemente la que usarán la mayoría de los propietarios de sitios. En lugar de usar este HTML y PHP sin procesar, lo convertiremos en un código abreviado que lo hace mucho más compatible con WordPress. De esta manera, puede pegarlo en Gutenberg, cualquier creador de páginas que desee y más. Hay algunas maneras de hacer esto; detallaremos un método fácil pero de pago, y un método más difícil, pero más sencillo.
Modo pagado (fácil)
Elija Scripts Orginizer, un complemento premium de WordPress que facilita la administración del código en su sitio web de WordPress (revisión). Después de la instalación, vaya a Scripts Organizer -> Importar, que se encuentra en el menú de administración de la barra lateral.
Descarga este archivo (una exportación de todo lo que se menciona a continuación), impórtalo y pasa a tomar el código abreviado.
Una vez en la sección de CSS personalizado, vaya a la sección parcial de SCORG, descargue ese JSON, importe, instale el complemento de búsqueda en vivo y esté listo y funcionando.
También puede seguir los pasos manuales. Para comenzar, crea una nueva entrada:
Ahora, ejecuta lo siguiente:
- ponle un titulo
- Habilitar interruptor de bloqueo de código: encendido
- Ubicación del script: código abreviado
- Copie/pegue el código PHP/HTML de arriba.
- Mantenga todas las demás configuraciones predeterminadas y haga clic en publicar
Debería verse así cuando hayas terminado con él ️.
Tome el código abreviado que se mostrará dentro de la entrada del script en la parte inferior izquierda del editor de código, o en la página de listado de fragmentos de código:
Tome este shortcode e insértelo en cualquier lugar con Gutenberg, TINYMCE, Elementor Shortcode Widget o cualquier otro método específico de shortcode.
Elemento de código abreviado de Gutenberg 
Widget de código abreviado de Elementor
Ahora dirígete al paso dos y agrega el CSS a tu sitio.
Camino libre (ligeramente más difícil)
Instale el complemento de fragmentos de código gratuito. Descargue el siguiente fragmento de código e impórtelo en su sitio web:
Este archivo también se puede importar a Advanced Scripts (esencialmente una versión premium y más fácil de Code Snippets) e incluso a Scripts Organizer.
Luego, agregue la búsqueda usando el siguiente código abreviado en su interfaz:
Independientemente de cómo agregue la búsqueda, si usa el HTML y PHP subyacentes de esta sección, el CSS en la siguiente sección le dará un buen estilo.
el css
Si mantiene la estructura y las clases intactas, simplemente agregue este CSS personalizado a su sitio web para obtener un formulario de búsqueda bien diseñado con la capacidad de autocompletar.
Nota: este código no es compatible con el método <?php get_search_form() ?> para insertar una barra de búsqueda. Sin embargo, dependiendo de su tema, insertar un formulario de búsqueda de esta manera significa que heredará los estilos de su tema.
Puede agregar este CSS a su utilidad de creación de páginas, a través de Apariencia -> Personalizar -> CSS adicional, o usando SCORG.
Sugerimos SCORG. Agregue un nuevo CSS parcial, pegue el código y publíquelo (o importe este archivo). Navegue hasta el fragmento de código abreviado creado en el paso anterior, vaya a la sección "Administrador de parciales SCSS" y seleccione mostrar , busque el título de ese parcial y selecciónelo. Actualizarla. Ahora, donde sea que coloques el shortcode, también se cargará el CSS. Solo se cargará donde se encuentra el shortcode, no globalmente , lo cual es excelente para el rendimiento.
Ahora, todo lo que necesitamos es la Salsa Mágica.
La salsa mágica (SearchWP Live Ajax Search)
Este es un complemento increíble creado por el equipo detrás de la suite de complementos SearchWP. Es gratis y en el repositorio de WordPress. En lugar de estructuras de código complejas, podemos instalar esto y obtener una búsqueda en vivo en funcionamiento en menos de un minuto.
Una vez instalado, haga clic en el formulario de búsqueda que ha insertado con código abreviado, código sin procesar o uno que esté usando la inserción PHP nativa de WordPress, y debería ver el siguiente comportamiento:
¡Eso es todo, ya está! Disfrute de un formulario de búsqueda en su sitio web de WordPress que completará automáticamente las búsquedas de los usuarios utilizando la tecnología AJAX.
Expanda esta búsqueda en vivo en WordPress
SearchWP Live Ajax Search es un complemento gratuito que le permite hacer lo que sugiere su nombre: agregar Live Ajax Search. Funcionará con o sin la colección premium de SearchWP y las extensiones asociadas. Si no está utilizando SearchWP, utilizará el motor de búsqueda estándar de WP.
La búsqueda estándar de WordPress ordena por relevancia (en el pasado, no lo hacía, ¡loco!) mirando el título de una publicación y luego el contenido. Pero esto sigue siendo Elementor, y hay mejores opciones por ahí. De hecho, escribimos otro artículo discutiendo mejores alternativas, que puede leer aquí: Mejores soluciones de búsqueda para WordPress
Sin embargo, debido a que Live Search está hecho por Search WP, usará automáticamente ese motor si está instalado. Search WP es superior ya que incluye derivación de palabras clave, coincidencias más precisas, indexación de documentos, soporte para WooCommerce, personalización de algoritmos y más. Recomendamos encarecidamente crear su búsqueda en vivo y usar las otras funciones del complemento premium para ofrecer resultados de búsqueda aún mejores.
Si está buscando una alternativa a SearchWP, Ivory Search es un complemento de menor costo que ofrece características similares y un LTD. Este complemento Live Search (WP Search Autocompletar) debería funcionar de inmediato con Ivory Search. También puede usar otros motores de búsqueda; De acuerdo con los documentos, todo lo que necesita hacer es:
Agregue el siguiente atributo a la
Listado de preguntas frecuentesinputdel formulario:data-swpengine="supplemental"reemplazando 'supplemental' con el nombre de su motor de búsqueda deseado.
Aún más fácil con oxígeno
No es ningún secreto que nos encanta Oxygen Builder, así que aquí hay una manera aún más fácil de agregar AJAX Live Search (autocompletar) con esa herramienta.
Nota: este tutorial y el complemento no funcionarán con el widget de formulario de búsqueda de Oxygen porque, como se mencionó en una sección anterior, no utiliza el método PHP estándar para insertar un formulario de búsqueda, ni incluye el atributo de datos necesario.
Pasos faciles:
- Agregue el bloque de código donde desee el formulario de búsqueda, pegue el PHP que se encuentra a continuación (o pegue los códigos cortos de Hydrogen que harán que el código se bloquee automáticamente).
- Agregue CSS que se encuentra a continuación a Oxygen Global CSS, cambie como desee (principalmente colores).
- Instale y active el complemento Live Search, gratis en el repositorio aquí.
- Disfruta de la gloria de la búsqueda en vivo.
Debido a que podemos colocar PHP directamente en plantillas y páginas con Page Builder, podemos simplemente pegar el siguiente PHP en un bloque de código, agregar el CSS a través de la configuración global y llamarlo una noche (asegúrese de haber agregado el complemento de búsqueda en vivo, que se encuentra aquí).
También puede copiar/pegar los siguientes códigos cortos de hidrógeno (si tiene un paquete de hidrógeno (revisado aquí)).
Simplemente haga clic en copiar, instale Hydrogen y péguelo en su página. CSS se incluirá en el bloque de código.
Finalmente, usa el CSS (tomado de arriba):
Sugerimos insertar este CSS a través del CSS global de Oxygen.
Así es como debería verse el resultado final:
Si desea reutilizar esta parte, también puede simplemente convertirla en una parte reutilizable. Siempre que tenga instalado el complemento Live Search, debería estar listo para usar una buena barra de búsqueda AJAX para sus visitantes.
<?php get_search_form() ?>
O simplemente use el código anterior si no necesita una personalización avanzada (incluidas, entre otras, mejores soluciones de búsqueda que la búsqueda principal de WP). Por supuesto, debido a que podemos usar códigos cortos en este creador de páginas, también puede seguir la mitad superior de este tutorial que lo guiará a través de la creación de un código corto para usar en la parte frontal de su sitio web.
Conclusión
En 2022, es más importante que nunca brindarles a sus usuarios una excelente experiencia y las herramientas que necesitan para acceder al contenido que desean. Este artículo presentó varios métodos para instalar WordPress Live Ajax Search en un sitio web en menos de 15 minutos.
Aquí se describen varios métodos para que pueda elegir usarlo en archivos de plantillas de temas, generar códigos cortos que sean compatibles con los creadores de páginas e incorporar aún más métodos. El complemento utilizado para lograr la funcionalidad de búsqueda en vivo es completamente gratuito y está bien diseñado.
¿Alguna pregunta? Siéntase libre de dejarlos en la sección de comentarios a continuación.