Cómo crear un inicio de sesión emergente para WordPress
¿Desea agregar un inicio de sesión emergente para WordPress? Estas pantallas modales agregan un poco de dinamismo a un sitio al tiempo que facilitan que los usuarios accedan fácilmente a su información. Desafortunadamente, WordPress no tiene esta capacidad por defecto. Sin embargo, puede agregarlo rápidamente usando un complemento.
En este tutorial, le mostraré cómo agregar una pantalla de inicio de sesión modal de WordPress. En lugar de utilizar formularios tradicionales o la pantalla de inicio de sesión del backend, los usuarios pueden acceder a una forma más "llamativa" de acceder a su sitio.
¿Cómo es beneficioso un modal emergente de inicio de sesión?
La ventana emergente de inicio de sesión modal es un poco diferente a una pantalla de inicio de sesión personalizada . Elimina la necesidad de utilizar una página web real para controlar el acceso de los usuarios. En cambio, todo se hace a través de una ventana emergente.
Por un lado, una ventana emergente de inicio de sesión personalizada de WordPress brinda a los usuarios la oportunidad de registrarse y acceder a un sitio sin visitar una página adicional. Por ejemplo, puede agregar un botón de inicio de sesión/registro a la barra lateral y los visitantes pueden enviar información sin abandonar la publicación que están leyendo.
La velocidad es otro problema que se aborda cuando se utilizan pantallas de inicio de sesión emergentes. En la mayoría de los casos, esto mejora la velocidad de acceso a su sitio y brinda una mejor experiencia. En lugar de cambiar de una página a otra, la ventana emergente simplemente iniciará la sesión del usuario.
Algo como esto es extremadamente útil si opera un sitio de comercio electrónico u otro tipo que fomente el registro.
Uso de inicio de sesión y registro de AJAX
Para este tutorial, usaré el complemento emergente modal de inicio de sesión y registro de AJAX . Es una herramienta bien diseñada y fácil de usar que proporciona personalización además de ser absolutamente receptiva para sitios web móviles .
NOTA: Para usar este complemento, debe asegurarse de que el registro de usuario esté disponible en el sitio web.
Instale y active "Inicio de sesión y registro de AJAX".
Vaya a Configuración y haga clic en "Iniciar sesión/Registrarse modal".
General
En la pestaña General de la pantalla de configuración, controla varios aspectos del comportamiento del formulario.
Por ejemplo, puede seleccionar confirmar el correo electrónico después del registro, recargar la página o mostrar el nombre y apellido del visitante en el formulario de registro.
Como quiero asegurarme de que personas reales se registren en el sitio web, habilitaré los correos electrónicos de confirmación. Esto está deshabilitado de forma predeterminada y puede activarlo haciendo clic en la casilla de verificación debajo de "General".
No olvide guardar la configuración si realiza cambios en esta pantalla.
Avanzado
La pantalla Configuración avanzada es donde puede modificar los controladores para los selectores de inicio de sesión y registro. Esto es si desea cambiar la forma en que jQuery opera el complemento emergente de inicio de sesión de WordPress.
Hoy, los dejaremos como valores predeterminados. Si no sabe lo que está haciendo con los elementos de codificación, le sugiero que haga lo mismo.
Correos electrónicos
La sección Correos electrónicos es donde puede personalizar los mensajes enviados a los usuarios. Esto incluye los correos electrónicos de Registro y Contraseña perdida integrados con este complemento.
Personaliza tus mensajes y añade un poco de personalidad. Desea que cada interacción con su sitio sea algo único y atractivo.
Le sugiero que elimine el campo de contraseña en el correo electrónico de registro. La mayoría de las personas no aprecian que esta información esté fácilmente disponible. Crea un riesgo de seguridad y todavía no sé por qué algunos desarrolladores incluyen esta información en los correos electrónicos.
No olvide guardar sus cambios si realiza modificaciones en los correos electrónicos.
Expresiones
En Expressions, puede personalizar los mensajes breves que ven los usuarios cuando suceden ciertas cosas. Por ejemplo, puede cambiar el texto en el botón u otros elementos del formulario.
Agregar la ventana emergente de inicio de sesión de WordPress AJAX
Una vez que haya realizado los ajustes de configuración, es hora de agregar el botón de inicio de sesión/registro o el enlace a su sitio.
Hoy, voy a configurar esto en la barra lateral. Sin embargo, no se necesita mucho para modificar este tutorial para usar los datos de inicio de sesión/registro en páginas específicas o incluso en el menú de navegación.
Vaya a Apariencia y haga clic en "Widgets".
Arrastre y suelte el widget "HTML personalizado" en su barra lateral.
Pegue el siguiente código en el widget:[ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ]<a href=”#login” class=”lrm-login lrm-hide-if-logged-in”>Iniciar sesión</a>
<br><button class=”lrm-login lrm-hide-if-logged-in”>Iniciar sesión</button>[/ht_message]
Esto le mostrará cómo se ven tanto el enlace de texto como el botón en su sitio web. Técnicamente, no necesita los dos enlaces anteriores.
Es importante tener en cuenta que este código incluye la opción de ocultar el botón. Esto significa que no verá ni el enlace ni el botón si ya ha iniciado sesión en el sitio web.
Haga clic en el botón "Guardar" en la parte inferior derecha.
Ahora tiene dos enlaces de inicio de sesión en la barra lateral; uno es un enlace de texto y el otro es un botón.
Cualquiera de estos enlaces cargará la ventana emergente de inicio de sesión de WordPress AJAX.
Sin embargo, esto no significa que deba dejar ambas versiones de inicio de sesión en su barra lateral. Tal vez solo desee uno: el enlace de texto o el enlace de botón.
Elegir el enlace de texto
¿Qué sucede si solo desea que el enlace de texto esté disponible en su widget? Luego eliminaría este código para dejar el enlace de texto:[ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ]<br><button class=”lrm -login lrm-hide-if-logged-in”>Iniciar sesión</button>[/ht_message]
Guarde el widget.
Esto eliminará el botón y solo mostrará el texto de inicio de sesión en su sitio.
Elegir el enlace del botón
En mi opinión, el botón de inicio de sesión es mucho mejor para esta situación. Es más fácil para los usuarios móviles tocar y es más evidente en el sitio web.
Para eliminar el enlace de texto y dejar el botón solo, elimine este código del widget:
[ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ]<a href =”#login” class=”lrm-login lrm-hide-if-logged-in”>Iniciar sesión</a>[/ht_message]
Recuerde guardar el widget después de eliminar el código.
Ahora, el botón de inicio de sesión es todo lo que queda.
Y eso es…
Este es quizás uno de los complementos de formulario AJAX de WordPress más fáciles de usar para iniciar sesión en el sistema. Es rápido, no requiere una gran cantidad de modificaciones y funciona bien. Es solo otra forma de hacer que WordPress sea más eficiente de lo que ya es.
¿Qué tipo de ventanas emergentes le gustaría usar en su sitio web? ¿Cómo utiliza el registro de usuarios en sus estrategias de marketing?