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».

    Inicio de sesión y registro de AJAX

    Vaya a Configuración y haga clic en «Iniciar sesión/Registrarse modal».

    Modo de inicio de sesión

    General

    Configuración 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».

    Confirmar correo electrónico

    No olvide guardar la configuración si realiza cambios en esta pantalla.

    Avanzado

    Ajustes avanzados

    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

    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.

    Quitar contraseña

    No olvide guardar sus cambios si realiza modificaciones en los correos electrónicos.

    Expresiones

    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».

    Widgets

    Arrastre y suelte el widget «HTML personalizado» en su barra lateral.

    HTML personalizado

    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]

    Pegar código emergente

    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.

    Guardar widget

    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.

    Enlaces de inicio de sesión

    Cualquiera de estos enlaces cargará la ventana emergente de inicio de sesión de WordPress AJAX.

    Surgir

    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]
    Botón Eliminar

    Guarde el widget.

    Esto eliminará el botón y solo mostrará el texto de inicio de sesión en su sitio.

    Solo texto de inicio de sesión

    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]

    Eliminar código de texto

    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.

    Botón de inicio de sesión

    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?