Formulario de Búsqueda Modal
El Formulario de Búsqueda Modal no requiere SearchWP, pero lo utilizará si está disponible
La extensión Search Model Form te permite mostrar un formulario de búsqueda en una ventana modal (emergente) activada por un botón o icono en tu sitio. Esto ofrece una experiencia de búsqueda elegante y sin distracciones para los usuarios.
Diseñado para integrarse con cualquier tema y cualquier configuración de SearchWP, Modal Form es la forma más sencilla de añadir un formulario de búsqueda atractivo a tu sitio.
El Formulario de Búsqueda Modal no requiere SearchWP, por lo que está disponible en wordpress.org y funcionará con cualquier sitio de WordPress. Si tienes SearchWP instalado y activado, Modal Form lo utilizará automáticamente. Si no es así, se proporcionarán resultados de búsqueda nativos de WordPress.
Cuando la extensión está activa, puedes acceder a la configuración de Model Form en la pestaña Search Forms > Search Model.
1. Habilitar Model Form
Un interruptor para habilitar o deshabilitar la funcionalidad del formulario modal de SearchWP en tu sitio web.
2. Formulario de Búsqueda
Esta opción te permite elegir qué formulario de búsqueda mostrar dentro de la ventana modal emergente. Puedes seleccionar un Formulario de SearchWP personalizado en la lista desplegable para mostrarlo en la ventana emergente. Si no se selecciona ningún formulario personalizado, se utilizará el formulario de búsqueda predeterminado de WordPress.
Nota: Si eliges un motor personalizado en tu shortcode modal o elemento de menú, este anulará el motor seleccionado en la configuración de Search Form.
3. Incluir Estilos
El formulario modal carga cierto CSS para incluir estilos personalizados para cargar la ventana emergente. Al elegir la opción apropiada, puedes cargar estilos de posicionamiento o visuales para la ventana emergente. Ten en cuenta que si eliges la opción Sin Estilos, no se cargará ningún CSS del formulario modal. Necesitarás aplicar tus propios estilos. Esta opción solo se recomienda para usuarios avanzados.
4. Modo Pantalla Completa
Por defecto, la ventana modal emergente se carga en un contenedor de ancho fijo. Cuando se habilita el modo de pantalla completa, el formulario modal se expande para ocupar todo el ancho y alto de la pantalla.
5. Deshabilitar Desplazamiento de Fondo
Habilitar esta opción deshabilitará la funcionalidad de desplazamiento en el fondo cuando la ventana modal emergente esté abierta. Esto ayuda a evitar que los usuarios interactúen con el contenido de la página detrás de la ventana modal.
¿Qué lo hace diferente?
La filosofía detrás de Modal Search Form de SearchWP es facilitar la implementación de formularios de búsqueda modales accesibles y ligeros, pero quizás aún más importante, hacer que sea una gran experiencia para el desarrollador (y el usuario).
Modal Search Form de SearchWP se integra directamente con WordPress de la forma en que lo usas, y el tema predeterminado del formulario modal se basa en los estilos implementados por tu tema activo, haciendo que la sobrecarga sea lo más pequeña posible. También incluye un cargador de plantillas completo, lo que te permite personalizar completamente tu Modal Search Form de SearchWP con un mínimo de molestias.
Echa un vistazo a la plantilla predeterminada como ejemplo de lo fácil que es personalizar.
Uso
SearchWP Modal Search Form facilita la implementación de formularios de búsqueda modales en cualquier lugar de su sitio web de WordPress. Para implementar cualquier modal, necesita tanto (1) un activador como (2) el modal en sí.
¡Con este plugin, implementar ambas partes es extremadamente fácil! Los siguientes métodos están integrados y disponibles para usted:
- Como un Elemento de Menú
- Usando un Shortcode
- Como un Bloque de Gutenberg
- Dentro de su(s) plantilla(s) programáticamente (código)
Puede agregar cualquier número de formularios de búsqueda modales a su sitio, cada uno utilizando su propia plantilla y opciones de configuración (por ejemplo, motor SearchWP).
Formulario de búsqueda modal de elemento de menú
Agregar un formulario de búsqueda a la navegación principal de su sitio es una gran idea, y SearchWP Modal Search Form facilita su adición en un momento.
El plugin agrega un nuevo grupo disponible para usted al editar sus Menús existentes. Si ha creado una plantilla modal personalizada en su tema, se mostrará en este grupo.
Una vez agregado, puede tratar los Elementos de Menú de SearchWP Modal Search Form como lo haría con cualquier otro Elemento de Menú, incluidas las personalizaciones adicionales que desee implementar.
En la configuración del menú, tiene la opción de mostrar una etiqueta o un icono para activar el formulario modal.
Formulario de búsqueda modal de shortcode
Si lo prefiere, puede usar un Shortcode para generar un activador de formulario modal que, al hacer clic, mostrará su formulario de búsqueda modal.
[searchwp_modal_search_form]
Puede aplicar personalizaciones adicionales que controlan varios atributos del activador y del modal en sí, por ejemplo:
[searchwp_modal_search_form engine="my_searchwp_engine" template="My Custom Template" text="Open Search" type="button"]
Lo que se renderiza así:
Los atributos de Shortcode disponibles son los siguientes:
engine El nombre del motor de SearchWP a utilizar (solo se aplica si SearchWP está activo)
template El nombre de la plantilla modal, consulte la documentación de plantillas
text Controla el texto del activador
type Define el tipo de activador, que puede ser un enlace <a/> o un <button/>
Usando estos atributos puede personalizar completamente tanto el activador como la plantilla modal en uso.
Formulario de búsqueda modal de bloque de Gutenberg
SearchWP Modal Search Form le ofrece la opción de insertar un formulario de búsqueda modal utilizando un bloque de Gutenberg si lo desea:
Usando el panel de Propiedades del Bloque puede personalizar varios atributos del bloque, incluyendo:
Texto Controla el texto del activador
Motor El nombre del motor de SearchWP a utilizar (solo se aplica si SearchWP está activo)
Plantilla El nombre de la plantilla modal, consulta la documentación de plantillas
Tipo Define el tipo de disparador, que puede ser un enlace <a/> o un <button/>
Cambiar cualquiera de las Propiedades del Bloque te permitirá ver cómo se verá el disparador en tiempo real.
Modal de formulario de búsqueda programático
Tienes la opción de insertar directamente un Formulario Modal de SearchWP en las plantillas de tu tema en cualquier lugar que desees, utilizando la siguiente sintaxis:
Hay una serie de argumentos que se pueden pasar como una matriz al llamar a searchwp_modal_form_trigger():
Puedes implementar cualquier número de Formularios de Búsqueda Modal de SearchWP en tu sitio, cada uno con sus propios argumentos de configuración (¡o compartiendo los mismos!)
Personalización y creación de plantillas modales
SearchWP Modal Search Form viene con un cargador de plantillas, que te permite personalizar (y crear) fácilmente las plantillas disponibles. Las Plantillas de Formulario Modal de SearchWP abarcan el contenido y el estilo del modal en sí, no el disparador.
Los disparadores de Formulario de Búsqueda Modal de SearchWP heredan los estilos de tu tema activo y se pueden personalizar añadiendo cualquier CSS personalizado que desees.
Importante: Al personalizar o crear plantillas de Formulario Modal de SearchWP, debes crear una carpeta dentro de tu tema (Hijo) titulada searchwp-modal-form que contendrá todas tus plantillas personalizadas que no serán sobrescritas cuando se actualice el plugin.
Las plantillas de Formulario de Búsqueda Modal de SearchWP se basan en archivos y se recopilan comprobando los siguientes directorios:
~/wp-content/plugins/searchwp-modal-form/templates/*.php(no edites estos, serán sobrescritos en futuras actualizaciones del plugin!)~/wp-content/themes/tu-tema-hijo/searchwp-modal-form/*.php(si aplica)~/wp-content/themes/tu-tema/searchwp-modal-form/*.php
Para que se incluya una Plantilla de Formulario Modal de SearchWP, debe tener el siguiente bloque de comentarios de encabezado:
/**
* SearchWP Modal Form Name: My Custom Template
*/
Esto define el nombre de la plantilla modal, que se utiliza al definir la plantilla a usar al insertar un disparador de formulario modal. Se sugiere que cualquier plantilla personalizada que crees tenga un nombre único, para que sea fácilmente identificable.
Deberías usar la plantilla predeterminada como punto de partida al personalizar o crear plantillas modales. Está completamente documentada para tu referencia.
Hooks
Los siguientes hooks se han puesto a tu disposición para personalizar el comportamiento de SearchWP Modal Form:
searchwp_modal_form_template_dir Personaliza el nombre de la carpeta utilizada para almacenar tus plantillas personalizadas (el valor predeterminado es searchwp-modal-form)
| <?php | |
| add_filter( 'searchwp_modal_form_template_dir', function( $dir ) { | |
| return 'my-searchwp-modal-forms'; | |
| } ); |
Notas para desarrolladores
Hay un proceso de compilación para todos los paquetes de JavaScript contenido en un solo comando:
npm run watch
Esto ejecutará cuatro procesos concurrentes que vigilarán los cambios en los archivos y, posteriormente, generarán lo siguiente:
- Versión de producción del paquete SearchWP Modal Search Form
- Versión de desarrollo del paquete SearchWP Modal Search Form
- Versión de producción del bloque SearchWP Modal Search Form
- Versión de desarrollo del bloque SearchWP Modal Search Form
Puedes ejecutar cada proceso individualmente si lo prefieres:
