🔐 Mejorando el Código de Zona Privada con Formulario de Acceso

En este artículo, abordaremos dos mejoras clave en el código de gestión de usuarios en WordPress. La primera es agregar un formulario de inicio de sesión dentro de la función enhanced_user_private_area_shortcode para que los usuarios puedan iniciar sesión sin ser redirigidos a la página de acceso predeterminada de WordPress. La segunda mejora consiste en personalizar la redirección de cierre de sesión para que los usuarios sean enviados al formulario de acceso personalizado en lugar de wp-login.php.

Modificación del Formulario de Login

El código original mostraba simplemente un mensaje si el usuario no estaba logueado:

function enhanced_user_private_area_shortcode() {
    if (!is_user_logged_in()) {
        return '<p>Debes estar registrado para ver esta página.</p>';
    }
Lenguaje del código: PHP (php)

Este comportamiento no era óptimo, ya que el usuario tenía que buscar la página de login manualmente, lo que podía resultar confuso y poco intuitivo. Para mejorar la experiencia del usuario, reemplazamos este mensaje con un formulario de inicio de sesión estilizado y centrado.

Ahora, cuando un usuario acceda a la zona privada sin haber iniciado sesión, en lugar de ver un simple mensaje, se le presentará un formulario claro y atractivo que le permitirá autenticarse de inmediato sin necesidad de salir de la página.

Además, una vez que el usuario inicie sesión, permanecerá en la misma página en lugar de ser redirigido a una ubicación genérica, asegurando así una navegación fluida y sin interrupciones. Esto facilita el acceso a la zona privada y mejora significativamente la usabilidad del sitio.

Código actualizado:

function enhanced_user_private_area_shortcode() {
    if (!is_user_logged_in()) {
        $output = '<div class="login-container">';
        $output .= '<h2>Iniciar Sesión</h2>';
        $output .= wp_login_form([
            'echo'           => false,
            'redirect'       => $_SERVER['REQUEST_URI'], // Redirige a la misma página después del login
            'remember'       => true,
            'label_username' => 'Usuario o Email',
            'label_password' => 'Contraseña',
            'label_remember' => 'Recuérdame',
            'label_log_in'   => 'Acceder'
        ]);
        $output .= '</div>';

        $output .= '<style>
            .login-container {
                max-width: 400px;
                margin: 50px auto;
                padding: 20px;
                background: #ffffff;
                border-radius: 10px;
                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
                text-align: center;
            }
            .login-container h2 {
                margin-bottom: 20px;
                font-size: 24px;
                color: #0073aa;
            }
            .login-container form {
                display: flex;
                flex-direction: column;
                gap: 15px;
            }
            .login-container input {
                width: 100%;
                padding: 10px;
                border: 1px solid #ccc;
                border-radius: 5px;
            }
            .login-container input[type="submit"] {
                background: #0073aa;
                color: white;
                border: none;
                cursor: pointer;
                padding: 12px;
                font-size: 16px;
            }
            .login-container input[type="submit"]:hover {
                background: #005a87;
            }
        </style>';

        return $output;
    }
Lenguaje del código: PHP (php)

¿Qué hemos mejorado?

• Ahora, en lugar de un simple mensaje, se muestra un formulario de inicio de sesión.
• Se usa wp_login_form() para generar un formulario seguro y funcional.
• El usuario es redirigido a la misma página después de iniciar sesión.
• Se aplican estilos CSS para mejorar la apariencia del formulario y centrarlo en la pantalla.

Personalización de la Redirección tras Cerrar Sesión

Por defecto, WordPress redirige a los usuarios a wp-login.php después de cerrar sesión. Sin embargo, en muchos casos, es mejor redirigirlos a una página personalizada de inicio de sesión.

Código original:

Cuando un usuario cerraba sesión con wp_logout_url(), era enviado a wp-login.php.

Para corregir esto, añadimos un filtro en logout_redirect, que envía al usuario a una página de login personalizada.

Código actualizado:

function custom_logout_redirect() {
    return home_url('/mi-pagina-de-login/'); // Cambia esto por la URL de tu página de Zona Privada
}
add_filter('logout_redirect', 'custom_logout_redirect', 10, 2);
Lenguaje del código: PHP (php)

¿Qué hemos cambiado?

• Ahora, cuando un usuario cierra sesión, es redirigido a una página específica en lugar de wp-login.php.
• home_url('/mi-pagina-de-login/') debe reemplazarse con la URL real de la página de login.
• Se ha mejorado la experiencia del usuario al mantener la navegación dentro del sitio.

Con estas mejoras, logramos un sistema de autenticación más amigable y elegante en WordPress. Ahora los usuarios pueden iniciar sesión desde la misma página donde desean acceder, y cuando cierran sesión, son dirigidos a una página de login personalizada en lugar de wp-login.php.

Intenta hacer los cambios tú mismo en una web de pruebas para aprender. De todas formas te dejo el código completo del sistema por si te haces un lio para que simplemente lo copies y lo pegues.

El siguiente código tienes que agregarlo en el functions.php de tu tema hijo o utilizar un plugin como CODE SNIPPETS. También puedes crear tu propio plugin con unos simples pasos.