✅Creando un Widget Personalizado de Acceso en WordPress (Sin Plugins)

Este código en WordPress desempeña un papel crucial al ofrecer una experiencia de inicio de sesión personalizada y mejorada para los usuarios de un sitio web. En esencia, se trata de un conjunto de instrucciones que permite la creación y gestión de un widget específico destinado a facilitar el acceso de los usuarios de manera intuitiva y segura.

El widget proporciona un acceso personalizado al sitio, destacándose por su capacidad para adaptarse al estado de autenticación del usuario. Cuando un usuario ya ha iniciado sesión, el widget presenta una bienvenida amigable, mostrando la foto de perfil, el nombre y el correo electrónico del usuario, junto con un enlace conveniente para cerrar sesión. Este enfoque no solo personaliza la interacción del usuario, sino que también brinda un toque distintivo al sitio web, creando una experiencia más agradable y centrada en el usuario.

Por otro lado, cuando un usuario aún no ha iniciado sesión, el widget despliega un formulario de acceso, facilitando el proceso de inicio de sesión. Además, en caso de que se produzca un error en el intento de acceso, el widget maneja la situación de manera elegante, proporcionando mensajes claros de error y redirigiendo al usuario de manera efectiva.

Uno de los aspectos notables es la inclusión de una redirección personalizada después de cerrar sesión. Esta funcionalidad ofrece una transición suave para los usuarios que deciden cerrar sesión, llevándolos de vuelta a la página actual. Este enfoque contribuye a una experiencia cohesiva y evita posibles confusiones que podrían surgir al cerrar sesión desde el widget.

En resumen, este código no solo cumple con funciones técnicas para la gestión del acceso y cierre de sesión, sino que también está diseñado para mejorar la usabilidad y la estética del sitio. Su implementación es valiosa para sitios web que buscan no solo optimizar la seguridad en el acceso, sino también proporcionar una experiencia de usuario personalizada y agradable.

El siguiente código tienes que agregarlo en el functions.php de tu tema hijo o utilizar un plugin como CODE SNIPPETS.

<?php
// Registrar el widget
function custom_login_widget_init() {
    register_widget('Custom_Login_Widget');
}
add_action('widgets_init', 'custom_login_widget_init');

// Crear el widget
class Custom_Login_Widget extends WP_Widget {
    function __construct() {
        parent::__construct(
            'custom_login_widget',
            __('Acceso Personalizado', 'text_domain'),
            array('description' => __('Un formulario de acceso personalizado', 'text_domain'))
        );

        // Manejar errores de inicio de sesión
        add_action('wp_login_failed', array($this, 'on_login_failed'));
    }

    // Función para manejar errores de inicio de sesión
    public function on_login_failed($username) {
        $referrer = wp_get_referer();

        if (!empty($referrer) && !strstr($referrer, 'wp-login') && !strstr($referrer, 'wp-admin')) {
            // Redirigir de vuelta a la página anterior con un parámetro de error
            wp_safe_redirect(add_query_arg('login', 'failed', $referrer));
            exit;
        } else {
            // Si no hay un referer válido, redirigir a la página principal
            wp_safe_redirect(home_url());
            exit;
        }
    }

    // Función para obtener la foto de perfil del usuario de forma segura
    private function get_user_avatar() {
        $current_user = wp_get_current_user();
        return get_avatar($current_user->ID, 64); // Tamaño de la imagen: 64 píxeles
    }

    // Formulario del widget
    public function widget($args, $instance) {
        echo $args['before_widget'];

        // Verificar si el usuario está autenticado
        if (is_user_logged_in()) {
            // Mostrar foto de perfil, nombre del usuario y enlace para cerrar sesión
            $current_user = wp_get_current_user();
            echo $this->get_user_avatar();
            echo '<h3>Bienvenido, ' . esc_html($current_user->display_name) . '</h3>';
            echo '<p>Email: ' . esc_html($current_user->user_email) . '</p>';
            echo '<a href="' . esc_url(wp_logout_url()) . '">Cerrar Sesión</a>';
        } else {
            // Mostrar formulario de acceso con enlace para recuperar contraseña
            ?>
            <h3>Acceso</h3>

            <?php
            // Mostrar mensaje de error si el inicio de sesión falló
            if (isset($_GET['login']) && $_GET['login'] == 'failed') {
                echo '<p class="error-message">Error: Datos de acceso incorrectos.</p>';
            }
            ?>

            <form action="<?php echo esc_url(wp_login_url()); ?>" method="post">
                <label for="user_login">Correo Electrónico:</label>
                <input type="text" name="log" id="user_login" required>

                <label for="user_pass">Contraseña:</label>
                <input type="password" name="pwd" id="user_pass" required>

                <div>
                    <input style="margin-top:10px;" type="submit" value="Acceder"><br>
                    <a  href="<?php echo esc_url(wp_lostpassword_url()); ?>">¿Has olvidado tu contraseña?</a>
                </div>

                <input type="hidden" name="redirect_to" value="<?php echo esc_url($_SERVER['REQUEST_URI']); ?>">
            </form>
            <?php
        }

        echo $args['after_widget'];
    }
}

// Redirección personalizada después de cerrar sesión
function custom_logout_redirect() {
    $referrer = wp_get_referer();

    if (!empty($referrer) && !strstr($referrer, 'wp-login') && !strstr($referrer, 'wp-admin')) {
        // Redirigir de vuelta a la página anterior
        wp_safe_redirect($referrer);
        exit;
    } else {
        // Si no hay un referer válido, redirigir a la página principal
        wp_safe_redirect(home_url());
        exit;
    }
}
add_action('wp_logout', 'custom_logout_redirect');
Lenguaje del código: HTML, XML (xml)

Entendiendo el Código

1. Registro del Widget:
   • La función custom_login_widget_init registra el widget personalizado Custom_Login_Widget en WordPress durante la inicialización de los widgets mediante add_action('widgets_init', 'custom_login_widget_init').
2. Clase del Widget:
   • La clase Custom_Login_Widget extiende la clase WP_Widget, permitiendo la creación de un widget específico para el inicio de sesión personalizado.
3. Constructor del Widget:
   • En el constructor de la clase (__construct), se configuran atributos esenciales del widget, como su identificador, nombre y descripción. También se agrega una acción para manejar los errores de inicio de sesión mediante add_action('wp_login_failed', array($this, 'on_login_failed')).
4. Manejo de Errores de Inicio de Sesión:
   • La función on_login_failed redirige al usuario a la página anterior con un mensaje de error en caso de un intento de inicio de sesión fallido. Se activa en el evento wp_login_failed.
5. Obtener la Foto de Perfil del Usuario:
   • El método privado get_user_avatar obtiene de manera segura la foto de perfil del usuario actual utilizando la función get_avatar de WordPress.
6. Método del Widget:
   • El método widget determina el contenido que se mostrará en el widget. Si el usuario está autenticado, se presenta la foto de perfil, nombre, dirección de correo electrónico y un enlace para cerrar sesión. Si no está autenticado, se muestra un formulario de inicio de sesión, con un enlace para recuperar la contraseña. También se gestiona la presentación de mensajes de error en caso de un intento de inicio de sesión fallido.
7. Redirección Personalizada Después de Cerrar Sesión:
   • La función custom_logout_redirect proporciona una redirección personalizada después de que un usuario cierra sesión. Si el cierre de sesión se realiza desde el widget, se redirige al usuario a la página actual.

En resumen, este código crea un widget completo de inicio de sesión personalizado, con manejo de errores, presentación dinámica según el estado de autenticación del usuario y funcionalidades específicas de redirección al cerrar sesión desde el widget.

Si necesitas adaptar el código a las necesidades de tu proyecto o agregar una funcionalidad específica a tu página web no dudes en contactar conmigo.

Nos vemos en el siguiente tutorial.

Un saludo.