Búsqueda en Vivo
Búsqueda en vivo no requiere SearchWP, pero lo usará si está disponible
Búsqueda en vivo es una potente función proporcionada por SearchWP que muestra resultados de búsqueda en tiempo real, impulsados por AJAX, en un contenedor desplegable mientras los usuarios escriben palabras clave en un formulario de búsqueda. Mejora la experiencia del usuario al proporcionar retroalimentación instantánea, ayudando a los visitantes a encontrar rápidamente el contenido que buscan.
Búsqueda en vivo no requiere SearchWP, por lo que está disponible en wordpress.org. Si tiene SearchWP instalado y activado, Búsqueda en vivo lo utilizará automáticamente. Si no, se proporcionarán los resultados de búsqueda nativos de WordPress.
Puede configurar y personalizar cómo aparecen los resultados de la búsqueda en vivo navegando a: SearchWP → Formularios de búsqueda → Búsqueda en vivo en el backend de WordPress
Hay una variedad de opciones para controlar el diseño, la disposición y el comportamiento de los resultados de la búsqueda en vivo. A continuación se detalla una explicación de las opciones de personalización disponibles:
1. General
Habilitar Búsqueda en vivo: Una vez que la extensión Búsqueda en vivo está instalada y activa, la búsqueda en vivo de SearchWP se integra automáticamente con el formulario de búsqueda predeterminado de WordPress y los formularios de SearchWP. Puede usar este interruptor para habilitar o deshabilitar esta funcionalidad.
2. Elegir un tema de diseño
Esta sección le permite seleccionar cómo se estilizarán sus resultados de búsqueda en vivo en el panel desplegable debajo del formulario de búsqueda. Cada tema de diseño ofrece un nivel diferente de detalle y presentación visual.
Temas de diseño disponibles:
- Mínimo Una lista limpia y simple que muestra solo los títulos de las publicaciones. Ideal para sitios web que prefieren una experiencia de búsqueda rápida basada en texto.
- Medio Muestra tanto el título como una breve descripción de cada resultado de búsqueda. Esta opción ofrece más contexto a los usuarios sin abrumarlos.
- Rico Un diseño visualmente atractivo que incluye una miniatura para mostrar la imagen destacada de la publicación, junto con el título y la descripción de cada resultado. Perfecto para sitios web con mucho contenido como blogs o tiendas de comercio electrónico.
- Personalizado Este diseño permite una flexibilidad total. Puede diseñar un formato de resultado personalizado combinando diferentes elementos utilizando la sección Estilo personalizado descrita a continuación.
3. Estilo personalizado
La sección Estilo personalizado le permite ajustar componentes individuales de cada resultado de búsqueda en vivo.
Descripción: Una opción de interruptor que le permite mostrar u ocultar la descripción debajo del título del resultado. Habilite esto si desea brindar más información a los usuarios sobre cada resultado.
Consejo: Puede habilitar la opción Resaltar términos en la configuración de SearchWP para generar una descripción personalizada que contenga el término de búsqueda para cada resultado.
Imagen: Controle el tamaño de la imagen que se muestra en los resultados. Las opciones disponibles incluyen: pequeño, mediano o grande.
Título: Personalice el color del texto del título y el tamaño de la fuente para que coincidan con el diseño de su sitio y mejoren la legibilidad.
Precio: Esta opción solo se hace visible cuando un plugin de comercio electrónico como WooCommerce o Easy Digital Downloads está activo. Puede ajustar el color y el tamaño de fuente del precio del producto que se muestra en los resultados.
Añadir al carrito: También disponible solo con un plugin de comercio electrónico activo, esta configuración añade un botón de “Añadir al carrito” a cada resultado de producto. Puede personalizar el estilo, como el color de fondo, el color de fuente y el tamaño de fuente del botón. Esta opción es perfecta para tiendas que desean optimizar el proceso de compra directamente desde el menú desplegable de búsqueda en vivo.
4. Resultados
Incluir estilos: La opción Incluir estilos controla si los activos CSS y de diseño predeterminados de SearchWP para el menú desplegable de Búsqueda en Vivo se cargan en sus páginas. Estos archivos de activos son responsables de aplicar estilos predeterminados a los resultados de búsqueda y de posicionar correctamente el contenedor del menú desplegable debajo o encima del formulario de búsqueda. Cambiar esta opción solo se recomienda para usuarios avanzados que se sientan cómodos aplicando estilos y código personalizados.
Posicionamiento: Elija si los resultados deben aparecer encima o debajo del formulario de búsqueda. El comportamiento predeterminado es mostrar el menú desplegable debajo del campo de entrada.
Ancho automático: Habilite este interruptor si desea que el menú desplegable de resultados coincida con el ancho del formulario de búsqueda. Deshabilitarlo permite que el contenedor siga su propio estilo o ancho predeterminado.
Resultados máximos: Esta opción establece el número máximo de resultados que se muestran en el menú desplegable en vivo. El valor predeterminado es 7. Puede usar un número específico (por ejemplo, 5 o 10) para limitar el número de resultados visibles o establecerlo en -1 para mostrar todos los resultados coincidentes.
Mensaje de sin resultados: Personalice el mensaje que se muestra cuando no se encuentran coincidencias. El texto predeterminado es “No se encontraron resultados”. Sin embargo, también puede usar una indicación amigable como “Buscamos por todas partes pero no pudimos encontrarlo. Intenta buscar otra cosa”. para mejorar la experiencia del usuario.
5. Configuración miscelánea
Longitud mínima de caracteres: Defina el número mínimo de caracteres que un usuario debe escribir antes de que se muestren los resultados de la búsqueda en vivo.
Nota: Por defecto, SearchWP indexa palabras clave con una longitud mínima de 3 caracteres. Si desea permitir búsquedas con 1 o 2 caracteres, debe habilitar la opción “Eliminar longitud mínima” en la configuración principal de SearchWP. Después de habilitarla, asegúrese de reconstruir el índice en la configuración del motor para que los nuevos tokens (palabras más cortas) puedan incluirse en los resultados de búsqueda.
Consejos adicionales
- Para un mayor control visual con estilos avanzados, puede agregar CSS personalizado en la Hoja de estilos de su tema o en Apariencia → Personalizar → CSS adicional.
- La Búsqueda en Vivo es compatible con Formularios de búsqueda. Puede usar un formulario desplegable de categorías u opciones en el Formulario de Búsqueda Avanzada para filtrar los resultados de la búsqueda en vivo.
- Si desea personalizar la disposición de los resultados de b uevo en vivo o mostrar informaci uevo adicional, puede crear una plantilla personalizada de b uevo en vivo en su tema. Para obtener instrucciones detalladas, consulte este documento.
Uso
Despu
uevo de cargar y activar la B
uevo en Vivo, cualquier formulario generado usando get_search_form() se mejorar
uevo autom
uevo ticamente con b
uevo en vivo usando la configuraci
uevo n por defecto. Se utilizar
uevo el motor de b
uevo n de SearchWP por defecto (o la b
uevo n nativa de WordPress si SearchWP no est
uevo disponible) y se aplicar
uevo el tema por defecto. Sin embargo, puede personalizarlo todo en gran medida.
Si no est
uevo utilizando get_search_form(), simplemente puede a
uevo adir un atributo de datos para habilitar la b
uevo en vivo, de la siguiente manera:
Si desea evitar que SearchWP habilite autom
uevo ticamente la b
uevo n en vivo en los formularios generados con get_search_form(), utilice el filtro searchwp_live_search_hijack_get_search_form.
Para mostrar resultados en vivo solo en formularios seleccionados, puede deshabilitar la b uevo n en vivo en la configuraci uevo n y luego usar el siguiente script de JS para activar la b uevo n en vivo en formularios espec uevo ficos:
| <script> | |
| jQuery(document).ready( function(){ | |
| jQuery("form input[type='search']").searchwp_live_search(); | |
| }); | |
| </script> |
En el c
uevo digo anterior, puede reemplazar el selector form input[type='search'] con el elemento selector de entrada espec
uevo fico para su formulario.
Personalizaci uevo n del motor de b uevo n y la configuraci uevo n utilizada por formulario de b uevo n
Puede personalizar el motor de b
uevo n utilizado estableciendo el atributo data-swpengine en su campo de entrada para que coincida con el nombre del motor de b
uevo n que desea utilizar. Esto solo se aplica cuando SearchWP est
uevo instalado y activado, y tiene prioridad sobre el engine definido en la configuraci
uevo n aplicable.
Puede personalizar la configuraci
uevo n utilizada por formulario de b
uevo n estableciendo el atributo data-swpconfig en su entrada para que coincida con una clave de matriz de la matriz de configuraciones. Para personalizar estas, utilice el filtro searchwp_live_search_configs.
Personalizaci uevo n de los resultados
Los resultados de la B
uevo n en Vivo est
uevo n impulsados por un sistema de plantillas. Notar
uevo que hay un archivo que se env
uevo a con el plugin: ~/wp-content/plugins/searchwp-live-ajax-search/templates/live-search-results.php. Este archivo se utiliza para mostrar los resultados de la b
uevo n. Se recomienda que si desea personalizar los resultados de la b
uevo n, siga estos pasos:
- Cree una carpeta *dentro del directorio de su tema* titulada
searchwp-live-ajax-search - Copie
live-search-results.phpdel directorio~/wp-content/plugins/searchwp-live-ajax-search/templates/a esa carpeta - Personalice la copia de
live-search-results.phpde su tema como lo har uevo con cualquier plantilla de tema - Opcionalmente, cree archivos adicionales para cada motor de b
uevo n, por ejemplo,
live-search-results-supplemental.phppara un motor de b uevo n llamadosupplemental
Posicionamiento
La B uevo n en Vivo genera algunos estilos b uevo sicos para posicionar correctamente el contenedor de resultados. Tambi uevo n genera un tema predeterminado y m uevo nimo. Puede eliminar el estilo visual predeterminado conservando el posicionamiento al anular la cola de la CSS del tema predeterminado:
Nota importante
NOTA: El tema predeterminado también implementa la animación del spinner. Si estás eliminando el tema predeterminado, necesitarás añadir la animación keyframe de abajo al CSS de tu tema.
Si también deseas eliminar el CSS de posicionamiento, puedes hacerlo usando el filtro searchwp_live_search_base_styles.
Puedes reposicionar el contenedor de resultados de dos maneras:
- Añade un atributo de datos a tu input de formulario que contenga el selector del elemento padre
data-swpparentel=".masthead .my-search-results-parent" - Añade una propiedad
parent_ela la configuración (versearchwp_live_search_configs)
Filtros
Los siguientes filtros están disponibles para su uso en Live Search:
searchwp_live_search_hijack_get_search_form Determina si Live Search mejorará automáticamente los formularios de búsqueda generados por get_search_form(). El valor predeterminado es true, para deshabilitar:
| <?php | |
| add_filter( 'searchwp_live_search_hijack_get_search_form', '__return_false' ); |
searchwp_live_search_get_search_form_engine Define el motor de búsqueda que se utilizará al habilitar automáticamente la búsqueda en vivo en formularios generados por get_search_form(). El valor predeterminado es 'default'.
Nota: solo aplicable con SearchWP instalado y activado
| <?php | |
| // only applies when SearchWP is active | |
| function my_searchwp_live_search_get_search_form_engine() { | |
| return 'my_supplemental_engine'; | |
| } | |
| add_filter( 'searchwp_live_search_get_search_form_engine', 'my_searchwp_live_search_get_search_form_engine' ); |
searchwp_live_search_get_search_form_config Define la configuración que se utilizará al habilitar automáticamente la búsqueda en vivo en formularios generados por get_search_form(). El valor predeterminado es 'default'.
Nota: solo aplicable con SearchWP instalado y activado
| <?php | |
| // only applies when SearchWP is active | |
| function my_searchwp_live_search_get_search_form_config)() { | |
| return 'my_config'; | |
| } | |
| add_filter( 'searchwp_live_search_get_search_form_config', 'my_searchwp_live_search_get_search_form_config' ); |
searchwp_live_search_configs Añade tus propias configuraciones, que controlan los ajustes para qué motor de búsqueda usar, el retraso de la búsqueda, los caracteres mínimos, el posicionamiento del panel de resultados y las opciones del spinner. Las configuraciones se almacenan como un array asociativo, por lo que opcionalmente puedes sobrescribir los valores en la clave default, o añadir los tuyos y usarlos al establecer el atributo data-swpconfig en tu input de búsqueda.
Esta es la configuración predeterminada:
Nota: el valor predeterminado de caracteres mínimos es 3 (que es el mismo que el de SearchWP) pero los ajustes de configuración para Live Search son parámetros separados y no se actualizan cuando se personalizan parámetros similares de SearchWP.
| <?php | |
| $configs = array( | |
| 'default' => array( // 'default' config | |
| 'engine' => 'default', // search engine to use (if SearchWP is available) | |
| 'input' => array( | |
| 'delay' => 500, // wait 500ms before triggering a search | |
| 'min_chars' => 3, // wait for at least 3 characters before triggering a search | |
| ), | |
| 'parent_el' => 'body', // selector of the parent element for the results container | |
| 'results' => array( | |
| 'position' => 'bottom', // where to position the results (bottom|top) | |
| 'width' => 'auto', // whether the width should automatically match the input (auto|css) | |
| 'offset' => array( | |
| 'x' => 0, // x offset (in pixels) | |
| 'y' => 5 // y offset (in pixels) | |
| ), | |
| ), | |
| 'spinner' => array( // Powered by http://spin.js.org/ | |
| 'lines' => 13, // The number of lines to draw | |
| 'length' => 38, // The length of each line | |
| 'width' => 17, // The line thickness | |
| 'radius' => 45, // The radius of the inner circle | |
| 'scale' => 1, // Scales overall size of the spinner | |
| 'corners' => 1, // Corner roundness (0..1) | |
| 'color' => '#ffffff', // CSS color or array of colors | |
| 'fadeColor' => 'transparent', // CSS color or array of colors | |
| 'speed' => 1, // Rounds per second | |
| 'rotate' => 0, // The rotation offset | |
| 'animation' => 'searchwp-spinner-line-fade-quick', // The CSS animation name for the lines | |
| 'direction' => 1, // 1: clockwise, -1: counterclockwise | |
| 'zIndex' => 2e9, // The z-index (defaults to 2000000000) | |
| 'className' => 'spinner', // The CSS class to assign to the spinner | |
| 'top' => '50%', // Top position relative to parent | |
| 'left' => '50%', // Left position relative to parent | |
| 'shadow' => '0 0 1px transparent', // Box-shadow for the lines | |
| 'position' => 'absolute' // Element positioning | |
| ), | |
| ) | |
| ); |
Puedes cambiar los valores de estos predeterminados, o añadir tus propias configuraciones separadas y tener múltiples configuraciones disponibles para ti:
| <?php | |
| function my_searchwp_live_search_configs( $configs ) { | |
| // override some defaults | |
| $configs['default'] = array( | |
| 'engine' => 'default', // search engine to use (if SearchWP is available) | |
| 'input' => array( | |
| 'delay' => 400, // wait 500ms before triggering a search | |
| 'min_chars' => 5, // wait for at least 3 characters before triggering a search | |
| ), | |
| 'parent_el' => 'body', // selector of the parent element for the results container | |
| 'results' => array( | |
| 'position' => 'bottom', // where to position the results (bottom|top) | |
| 'width' => 'auto', // whether the width should automatically match the input (auto|css) | |
| 'offset' => array( | |
| 'x' => 0, // x offset (in pixels) | |
| 'y' => 5 // y offset (in pixels) | |
| ), | |
| ), | |
| 'spinner' => array( // Powered by http://spin.js.org/ | |
| 'lines' => 13, // The number of lines to draw | |
| 'length' => 38, // The length of each line | |
| 'width' => 17, // The line thickness | |
| 'radius' => 45, // The radius of the inner circle | |
| 'scale' => 1, // Scales overall size of the spinner | |
| 'corners' => 1, // Corner roundness (0..1) | |
| 'color' => '#ffffff', // CSS color or array of colors | |
| 'fadeColor' => 'transparent', // CSS color or array of colors | |
| 'speed' => 1, // Rounds per second | |
| 'rotate' => 0, // The rotation offset | |
| 'animation' => 'searchwp-spinner-line-fade-quick', // The CSS animation name for the lines | |
| 'direction' => 1, // 1: clockwise, -1: counterclockwise | |
| 'zIndex' => 2e9, // The z-index (defaults to 2000000000) | |
| 'className' => 'spinner', // The CSS class to assign to the spinner | |
| 'top' => '50%', // Top position relative to parent | |
| 'left' => '50%', // Left position relative to parent | |
| 'shadow' => '0 0 1px transparent', // Box-shadow for the lines | |
| 'position' => 'absolute' // Element positioning | |
| ), | |
| ); | |
| // add an additional config called 'my_config' | |
| $configs['my_config'] = array( | |
| 'engine' => 'supplemental', // search engine to use (if SearchWP is available) | |
| 'input' => array( | |
| 'delay' => 300, // wait 500ms before triggering a search | |
| 'min_chars' => 2, // wait for at least 3 characters before triggering a search | |
| ), | |
| 'results' => array( | |
| 'position' => 'top', // where to position the results (bottom|top) | |
| 'width' => 'css', // whether the width should automatically match the input (auto|css) | |
| 'offset' => array( | |
| 'x' => 0, // x offset (in pixels) | |
| 'y' => 0 // y offset (in pixels) | |
| ), | |
| ), | |
| 'spinner' => array( // Powered by http://spin.js.org/ | |
| 'lines' => 13, // The number of lines to draw | |
| 'length' => 38, // The length of each line | |
| 'width' => 17, // The line thickness | |
| 'radius' => 45, // The radius of the inner circle | |
| 'scale' => 1, // Scales overall size of the spinner | |
| 'corners' => 1, // Corner roundness (0..1) | |
| 'color' => '#ffffff', // CSS color or array of colors | |
| 'fadeColor' => 'transparent', // CSS color or array of colors | |
| 'speed' => 1, // Rounds per second | |
| 'rotate' => 0, // The rotation offset | |
| 'animation' => 'searchwp-spinner-line-fade-quick', // The CSS animation name for the lines | |
| 'direction' => 1, // 1: clockwise, -1: counterclockwise | |
| 'zIndex' => 2e9, // The z-index (defaults to 2000000000) | |
| 'className' => 'spinner', // The CSS class to assign to the spinner | |
| 'top' => '50%', // Top position relative to parent | |
| 'left' => '50%', // Left position relative to parent | |
| 'shadow' => '0 0 1px transparent', // Box-shadow for the lines | |
| 'position' => 'absolute' // Element positioning | |
| ), | |
| ); | |
| return $configs; | |
| } | |
| add_filter( 'searchwp_live_search_configs', 'my_searchwp_live_search_configs' ); |
searchwp_live_search_base_styles Determina si se aplica el CSS de posicionamiento predeterminado del panel de resultados. NOTA: esto es independiente de la apariencia visual de los resultados de búsqueda y controla únicamente el posicionamiento. El valor predeterminado es true, para deshabilitar:
| <?php | |
| add_filter( 'searchwp_live_search_base_styles', '__return_false' ); |
searchwp_live_search_posts_per_page Controla cuántos resultados se devuelven. El valor predeterminado es 7, para cambiar:
| <?php | |
| function my_searchwp_live_search_posts_per_page() { | |
| return 20; // return 20 results | |
| } | |
| add_filter( 'searchwp_live_search_posts_per_page', 'my_searchwp_live_search_posts_per_page' ); |
