Sugerencia automática de búsqueda fácil en WordPress – Tutorial

Crear una barra de búsqueda con sugerencia automática en WordPress es sorprendentemente fácil, rápido y gratuito.Aquí está nuestro tutorial sobre cómo hacerlo.

Haremos eso.¿Por qué debería hacer su tiempo para agregar una búsqueda automática de WordPress?En primer lugar, ahorrará tiempo.A los visitantes de su blog les encantará más, porque les facilita la vida, dando fácil acceso a la información que están buscando características.Nota: La búsqueda automática en WordPress a veces se puede llamar “búsqueda en vivo de Ajax”.Además, debido a que WooCommerce utiliza la misma base de datos que WP, y los productos son simplemente un tipo personalizado de publicación, este tutorial también funcionará para el popular complemento de comercio electrónico.
Lo que necesitará necesitará un administrador de fragmentos de código, la capacidad de copiar y seguir la búsqueda en vivo (gratis en el repositorio). Deberíamos recordar lo siguiente: cualquier forma que use < Simplemente salte a esta sección si elige la ruta. Sin embargo, este no es el caso de muchos temas, páginas y otras herramientas. El elemento y el oxígeno no usan esta forma construida ofrecida por WordPress (por lo que sus usuarios pueden ponerlos fácilmente en tamaño, fuente y color). Por lo tanto, para obtener una barra de búsqueda con finalización automática en Elementor, Oxygen, la mayoría de las otras páginas y muchos temas, siga los pasos presentados a continuación. Incluso si lo agrega por PHP, como es la imagen anterior, sin CSS, lo hará. permanecer con un formulario de búsqueda de estilo. Sin embargo, si tiene acceso a sus archivos/plantillas de tareas, esta es una forma viable de obtener un formulario de búsqueda en su sitio. Usará la marca estándar de WordPress para que pueda ajustar el CSS por menor.

Preferimos el siguiente método, porque puede editar estilo y clases, agregar elementos especiales, enviar usuarios a puntos de búsqueda personalizados y más, cree esto desde cero. PHP primero para construir este formulario de búsqueda. Puede agregar entradas adicionales, clases CSS, sustitutos y más. Si mantiene el código exactamente como es, el CSS asociado funcionará con HTML. Dependiendo de cómo cree un sitio web, simplemente puede meter esto en la estructura real de la plantilla donde desea que una barra de búsqueda automática alcance o vaya a la ruta 2. <formar aria-label = "sitewide" método = "get" acción = "<? Php echo es_url (home_url ('/'));" búsqueda "spellCheck =" true "placeholder =" search "value =" La ruta 2 es probablemente lo que la mayoría de los propietarios de sitios usarán. En lugar de usar este HTML y PHP bruto, lo convertiremos en un código corto que lo haga más compatible con WordPress. De esta manera, puede pegarlo a Gutenberg, cualquier generador de páginas que desee y muchas más. Hay algunas formas de hacer esto; Detallaremos un método fácil pero pagado, y un método más difícil pero más fácil.

Modo pagado (fácil) Elija Scripts Orginizer, un complemento premium de WordPress que facilita la administración de código en su sitio de WordPress (revisión). Después de la instalación, vaya al Organizador de scripts -> Importar, ubicado en el menú de administración en la barra lateral. Descargue este archivo (una exportación de todo lo que se menciona a continuación), importarlo y pasar al código corto. Glindlo al front-end donde desea el formulario de búsqueda de finalización automática y pase a la sección CSS personalizada (haga clic para saltar allí). Una vez en la sección CSS personalizada, pase a la sección parcial Scorg, descargue que JSON, importe, instale el complemento de búsqueda en vivo y esté activo.
También puedes seguir los pasos manuales. Para comenzar, cree una nueva entrada:
Ahora, pasas por lo siguiente:

Dale un título
Activación del código de interruptor de bloqueo: activado

Ubicación del script: brevemente
Copie/pegue el código PHP/HTML anterior.
Mantenga todas las demás configuraciones predeterminadas y haga clic en Publicación
Deberías verte así cuando terminaste con él.
Tome el código corto que se mostrará en la entrada de script desde la parte inferior izquierda del editor de código o en la lista de fragmentos de código:
Nuestro código corto es, por ejemplo. Tome este código corto y inténtelo en cualquier lugar con Gutenberg, TinyMCE, Widget de código corto Elementor o cualquier otro método específico de código corto.
Elemento de código corto de gutenberg

Widget para códigos elementales cortos

Ahora vaya al paso dos y agregue CSS a su sitio de carretera gratuito (un poco más difícil) Instale el complemento de fragmentos de código gratuito. Descargue el siguiente fragmento de código e importándolo a su sitio web: fragmento de código JSON en tiempo real

Este archivo también se puede importar a scripts avanzados (esencialmente una versión premium y más fácil de fragmentos de código) e incluso en el organizador de scripts. Luego agregue la búsqueda usando el siguiente código corto en el front-end: [ISO_LIVE_SEARCH] No importa cómo agregue la búsqueda, si usa HTML y el PHP básico en esta sección, el CSS en la siguiente sección le dará un estilo agradable .

El CSS si mantiene intactos la estructura y las clases, simplemente agregue este CSS personalizado a su sitio para obtener un formulario de búsqueda bien elegante, con la capacidad automática del complemento. Nota: Este código no es compatible con Insertar una barra de búsqueda. Sin embargo, dependiendo de su tema, la inserción de un formulario de búsqueda de esta manera significa que heredará su tema. } .ISO-Search {Padding: 10px; Right de relleno: 50px; Chenar-Ras: 5px; Antecedentes: #F8FBFF; borde: 1px rgba sólido (42, 140, 255, .27); Contorno: ninguno; Ancho: 100%; } .ISO-Search: Focus {Bile: 1px Solid #FFB300; } .iso-search-btn {altura: 40px; Ancho: 40px; Chenar: Ninguno; Antecedentes: ninguno; Chenar-Ras: 5px; Posición: Absoluto; Arriba: 0; Derecha: 0; } .ISO-Search-BTN: Active, .ISO-Search-Btn: Focus {Background: RGBA (42, 140, 255, .27); } Puede agregar este CSS a su utilidad de generación de páginas, por apariencia -> Personalización -> CSS adicional o usando Scorg.
Te sugerimos que Scorg. Agregue un nuevo CSS parcial, inserte el código y publique (o importe este archivo). Navegue al fragmento de código cortos creado en el paso anterior, vaya a la sección “SCSS Particials Manager” y seleccione Show, busque ese parcial y seleccione. Actualizarlo. Ahora, donde sea que coloque el código corto, se cargará el CSS. Solo se cargará donde se coloca el código corto, no a nivel mundial, lo cual es excelente para el rendimiento. Ahora, todo lo que necesitamos es la salsa mágica. La salsa Magic (búsqueda de AJAX en vivo de Searchwp) es un complemento increíble creado por el equipo detrás del conjunto de complementos SearchWP. Es gratis y se encuentra en WordPress Warehouse. En lugar de estructuras de código complejas, podemos instalar esto y obtener una búsqueda en vivo en menos de un minuto. Acceso al complemento de búsqueda en vivo
Desde los documentos una vez instalados, haga clic en el formulario de búsqueda que ha insertado con código corto, código bruto o uno utilizando el inserto PHP nativo de WordPress y debería ver el siguiente comportamiento:
Como las letras se insertan en el formulario, se actualizará automáticamente con resultados relevantes. ¡Listo, terminaste! Disfrute de un formulario de búsqueda en su sitio web de WordPress que completará automáticamente las búsquedas de 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 el nombre: Agregar búsqueda en vivo AJAX. Trabajará con o sin la colección de búsqueda premium y extensiones asociadas. Si no usa SearchWP, usará el motor de búsqueda WP estándar.
La búsqueda estándar de WordPress se clasifica de acuerdo con la relevancia (en el pasado, ¡no fue, salvaje!), Mirando en el título de una publicación, luego al contenido.Pero esto sigue siendo elemental y hay mejores opciones allí.De hecho, escribí otro artículo en el que estamos discutiendo mejores alternativas, que puede leer aquí: mejores soluciones de búsqueda para WordPresexist muchas formas de mejorar la búsqueda de WordPress.Sin embargo, debido a que Search WP realiza la búsqueda en vivo, usará automáticamente ese motor si está instalado.Search WP es superior, ya que incluye la derivación de palabras clave, coincidencias más precisas, documentos de indexación, soporte de WooCommerce, personalización del algoritmo y muchos más.Le sugerimos encarecidamente que cree su búsqueda en vivo y use las otras funciones de complementos premium para proporcionar 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 Auto -Complete) debería funcionar inmediatamente con Ivory Search. Puede usar otros motores de búsqueda; Según los documentos, todo lo que tiene que hacer es: Agregar el siguiente atributo a la entrada del formulario: data-swpengine = “complementario” reemplazo “suplementario” con el nombre deseado del motor de búsqueda. Las preguntas frecuentes sobre listados y más fáciles con oxígeno no son un secreto que nos gusta el constructor de oxígeno, por lo que aquí hay una forma más fácil de agregar Ajax Live Search (finalización automática) con esa herramienta. Nota: Este tutorial y el complemento no funcionarán con el widget del formulario de búsqueda de oxígeno, porque, como se menciona 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 simples: agregue el bloque de código donde desee el formulario de búsqueda, inserte en PHP que se encuentra a continuación (o inserte en códigos de hidrógeno cortos, lo que hará que el código sea automático).

Agregue CSS que se encuentra a continuación a Oxygen Global CSS, cambie como desee (principalmente colores).

Instale y active el complemento de búsqueda en vivo, gratis en el repositorio aquí.

Disfruta de la gloria de la búsqueda en vivo.
Debido a que podemos colocar PHP directamente en las plantillas y páginas con Page Builder, simplemente podemos 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 agregar un complemento de búsqueda en vivo, que se encuentra aquí) .<Form aria-label = "sitewide" método = "get" action = "<? Php echo es_url (home_url ('/')); búsqueda de búsqueda" type = "search" spellcheck = "true" placeholder = "búsqueda" Valor = " también,

Puede copiar/pegar los siguientes códigos de hidrógeno cortos (si tiene un paquete de hidrógeno (revisado aquí)). eyJzb3VyY2UiOiJodHRwczovL2RlYWxzLmlzb3Ryb3BpYy5jbyIsImNvbXBvbmVudCI6W3siaWQiOjIwMCwibmFtZSI6ImN0X2NvZGVfYmxvY2siLCJvcHRpb25zIjp7ImN0X2lkIjoyMDAsImN0X3BhcmVudCI6MTAsInNlbGVjdG9yIjoiY29kZV9ibG9jay0yMDAtMTkiLCJvcmlnaW5hbCI6eyJjb2RlLXBocCI6Ijxmb3JtIGlkPVwiaXNvLXNlYXJjaGZvcm1cIiBhcmlhLWxhYmVsPVwiU2l0ZXdpZGVcIiBtZXRob2Q9XCJnZXRcIiBhY3Rpb249XCI8P3BocCBlY2hvIGVzY191cmwoIGhvbWVfdXJsKCAnLycgKSApOyA / PlwiPlxuICAgIDxpbnB1dCBkYXRhLXN3cGxpdmU9XCJ0cnVlXCIgY2xhc3M9XCJpc28tc2VhcmNoIHNlYXJjaC1maWVsZFwiIHR5cGU9XCJzZWFyY2hcIiBzcGVsbGNoZWNrPVwidHJ1ZVwiIHBsYWNlaG9sZGVyPVwiU2VhcmNoXCIgdmFsdWU9XCI8P3BocCBlY2hvIGdldF9zZWFyY2hfcXVlcnkoKTsgPz5cIj5cbiAgICA8aW5wdXQgY2xhc3M9XCJpc28tc2VhcmNoLWJ0blwiIHR5cGU9XCJzdWJtaXRcIiB2YWx1ZT1cIvCflI1cIj5cbjwvZm9ybT4iLCJjb2RlLWNzcyI6IiNpc28tc2VhcmNoZm9ybSB7XG5wb3NpdGlvbjpyZWxhdGl2ZTtcbn1cblxuLmlzby1zZWFyY2gge1xuXHRwYWRkaW5nOiAxMHB4O1xuXHRwYWRkaW5nLXJpZ2h0OiA1MHB4O1xuXHRib3JkZXItcmFkaXVzOiA1cHg7XG5cdGJhY2tncm91bmQ6ICNmOGZiZmY7XG5cdGJvcmRlcjogMXB4IHNvbGlkIHJnYmEoNDIsIDE0MCwgMjU1LC Au MjcpO1xuXHRvdXRsaW5lOiBub25lO1xuXHR3aWR0aDogMTAwJTtcbn1cblxuLmlzby1zZWFyY2g6Zm9jdXMge1xuXHRib3JkZXI6IDFweCBzb2xpZCAjZmZiMzAwO1xufVxuXG4uaXNvLXNlYXJjaC1idG4ge1xuXHRoZWlnaHQ6IDQwcHg7XG5cdHdpZHRoOiA0MHB4O1xuXHRib3JkZXI6IG5vbmU7XG5cdGJhY2tncm91bmQ6IG5vbmU7XG5cdGJvcmRlci1yYWRpdXM6IDVweDtcblx0cG9zaXRpb246IGFic29sdXRlO1xuXHR0b3A6IDA7XG5cdHJpZ2h0OjA7XG59XG5cbi5pc28tc2VhcmNoLWJ0bjphY3RpdmUsXG4uaXNvLXNlYXJjaC1idG46Zm9jdXMge1xuXHRiYWNrZ3JvdW5kOiByZ2JhKDQyLCAxNDAsIDI1NSwgLjI3KTtcbn0ifSwibmljZW5hbWUiOiJDb2RlIEJsb2NrICgjMjAwKSIsImFjdGl2ZXNlbGVjdG9yIjpmYWxzZSwiY2xhc3NlcyI6WyJ3LWZ1bGwiXSwiY3RfZGVwdGgiOjUsImN0X2NvbnRlbnQiOiIifSwiZGVwdGgiOjUsIiQkaGFzaEtleS

I6Im9iamVjdDo0MjIifV0sImNsYXNzZXMiOnsidy1mdWxsIjp7ImtleSI6InctZnVsbCIsInBhcmVudCI6Ik94eU1hZGVGcmFtZXdvcmsiLCJvcmlnaW5hbCI6eyJ3aWR0aC11bml0IjoiJSIsInNlbGVjdG9yLWxvY2tlZCI6InRydWUiLCJ3aWR0aCI6IjEwMCJ9fX0sImNvbG9ycyI6e319 Pur și simplu faceți clic pe Copiere, instalați Hydrogen și inserați în pagina dvs. CSS va fi inclus în blocul de cod.Finalmente, use CSS (tomado arriba): #ISO-SearchForm {posición: relativo;} .ISO-Search {Padding: 10px;Right de relleno: 50px;Chenar-Ras: 5px;Antecedentes: #F8FBFF;borde: 1px rgba sólido (42, 140, 255, .27);Contorno: ninguno;Ancho: 100%;} .ISO-Search: Focus {Bile: 1px Solid #FFB300;} .iso-search-btn {altura: 40px;Ancho: 40px;Chenar: Ninguno;Antecedentes: ninguno;Chenar-Ras: 5px;Posición: Absoluto;Arriba: 0;Derecha: 0;} .ISO-Search-BTN: Active, .ISO-Search-Btn: Focus {Background: RGBA (42, 140, 255, .27);} Sugerimos que inserte este CSS a través de CSS Global of Oxygen.Así es como debería verse el resultado final:
En un bloque de código de oxígeno si desea reutilizar esta parte, también puede convertirla en una parte reutilizable. Siempre que haya instalado el complemento de búsqueda en vivo, debe ir con una agradable barra de búsqueda de Ajax para sus visitantes. O, use el código anterior si no necesita personalización avanzada (incluyendo, entre otros, mejores soluciones de búsqueda que la búsqueda básica de WP). Por supuesto, debido a que podemos usar códigos cortos en este generador de páginas, también puede seguir la mitad superior de este tutorial, lo que lo guiará creando un código corto que se utilizará en el frente de su sitio web. Conclusión En 2022, es más importante brindar a los usuarios una gran experiencia y las herramientas que necesitan para acceder al contenido que desean. Este artículo ha presentado varios métodos para instalar WordPress Live AJAX en un sitio web en menos de 15 minutos. Hay varios métodos descritos aquí, por lo que puede optar por usarlo en los archivos de plantilla de tema, generar códigos cortos que sean compatibles con las páginas y también incorporen más métodos. El complemento utilizado para obtener la funcionalidad de búsqueda en vivo es completamente gratuito y bien diseñado. ¿Otras preguntas? Siéntase libre de dejarlos en la sección de comentarios a continuación. Abon y distribuir
Si le gustó este contenido, suscríbase al resumen mensual de noticias de WordPress, inspiración para sitios web, ofertas exclusivas y artículos interesantes.
Dar la baja en cualquier momento. No enviamos spam y nunca venderemos o distribuiremos su correo electrónico.