✅Personalizar Página de Login y Registro en WordPress (Sin Plugins)

La primera impresión de un usuario al interactuar con tu sitio web es crucial. Una de las primeras experiencias que encuentran los visitantes es la página de inicio de sesión y registro. Estas páginas, a menudo pasadas por alto, desempeñan un papel fundamental en la experiencia del usuario y, por ende, en la percepción general de tu plataforma.

En este contexto, la personalización de las páginas de acceso y registro no solo es estéticamente agradable, sino que también contribuye significativamente a la credibilidad y confianza del usuario. Un código bien diseñado y estilizado puede reflejar la identidad de tu marca, estableciendo una conexión más sólida con tu audiencia desde el primer momento.

El código proporcionado aquí se presenta como una solución para personalizar la página de inicio de sesión y registro en WordPress. Esta personalización aborda aspectos clave, como la estilización del fondo, la integración de un logo personalizado, y la modificación de estilos en el formulario y mensajes asociados. Además, se ocultan elementos innecesarios, se agregan mensajes personalizados y se implementa una casilla de aceptación de la política de privacidad durante el proceso de registro.

La importancia de esta personalización no se limita simplemente a fines estéticos. Más allá de ofrecer una experiencia visualmente atractiva, la página de acceso y registro optimizada refleja profesionalismo y compromiso con la privacidad del usuario. Proporciona un ambiente coherente con la marca, mejorando la retención de usuarios y generando una primera impresión positiva.

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

<?php

// Función para agregar estilos a la página de registro y acceso
function custom_login_register_styles() {
    echo '<style type="text/css">';
    echo '
/* Configuración del fondo y espacio inferior en las páginas de inicio de sesión y registro */
body.login, body.register {
    background-color: white;
    padding-bottom: 120px;
}

/* Estilos para el logo en la página de inicio de sesión y registro */
body.login div#login h1 a, body.register div#login h1 a {
    background: url(https://fransalaspluginsweb.instawp.xyz/wp-content/uploads/2024/01/logo.png) no-repeat center top;
    width: 300px;
    height: 150px;
    background-size: contain;
    margin-bottom: -80px;
    margin-top: 50px;
    display: block;
}

/* Estilos para el formulario de inicio de sesión y registro */
body.login div#login form#loginform, body.register div#login form#loginform, body.login div#login form#registerform, body.register div#login form#registerform {
    border: 2px solid #333;
    padding: 20px;
    background-color: #333;
    border-radius: 10px;
}

/* Estilos para etiquetas, texto y párrafos en el formulario */
body.login div#login label, body.register div#login label, p#reg_passmail {
    color: #ffffff; /* Cambia a tu color preferido */
}

/* Estilos para campos de entrada en el formulario */
body.login div#login form#loginform input, body.register div#login form#loginform input, body.login div#login form#registerform input, body.register div#login form#registerform input {
    border: 2px solid #007DFC;
    margin-bottom: 10px;
}

/* Estilos para campos de entrada enfocados en el formulario */
body.login div#login form#loginform input[type="text"]:focus, body.login div#login form#loginform input[type="password"]:focus, body.register div#login form#registerform input[type="text"]:focus, body.register div#login form#registerform input[type="password"]:focus {
    border-color: #007DFC;
}

/* Estilos para botones de envío en el formulario */
body.login div#login form#loginform p.submit input[type="submit"], body.register div#login form#loginform p.submit input[type="submit"], body.login div#login form#registerform p.submit input[type="submit"], body.register div#login form#registerform p.submit input[type="submit"] {
    background-color: #333;
    border-color: #007DFC;
    color: #fff;
    text-shadow: none;
}

/* Ocultar el mensaje de registro */
.notice.notice-info.message.register {
    display: none;
}

/* Estilos para la caja del mensaje personalizado */
.custom-message {
    background-color: #f4f4f4;
    border: 1px solid #ddd;
    padding: 5px !important;
    margin: 20px 10px !important;
    border-radius: 5px;
}

/* Estilos para los enlaces en la página de inicio de sesión */
.login #backtoblog a, .login #nav a {
    color: #007DFC !important;
}

/* Estilos para los contenedores de inicio de sesión y registro */
.login-container, .register-container {
    margin-bottom: 20px !important;
}

/* Estilos para los enlaces dentro de los contenedores */
.login-container a, .register-container a {
    text-align: left;
    color: #007DFC;
}

/* Ocultar elementos predeterminados fuera del formulario de acceso en la página de acceso */
body.login p#nav, body.login p#backtoblog {
    display: none;
}

/* Ocultar elementos predeterminados fuera del formulario de acceso en la página de registro */
body.register p#nav a, body.register p#backtoblog a {
    display: none;
}

    ';
    echo '</style>';
}

add_action('login_enqueue_scripts', 'custom_login_register_styles');


// Filtro para remover el selector de idioma de la página de inicio de sesión
add_filter( 'login_display_language_dropdown', '__return_false' );


// Función para agregar un mensaje personalizado en la página de inicio de sesión
function add_custom_message_login() {
    echo '<div class="custom-message">';
    echo '<p>Este es un mensaje personalizado para la página de inicio de sesión.</p>';
    echo '<p>Puedes agregar más párrafos o cualquier contenido HTML aquí.</p>';
    echo '</div>';
}

// Agregar el mensaje antes del formulario de inicio de sesión
//add_action('login_form', 'add_custom_message_login');

// Función para agregar un mensaje personalizado en la página de registro
function add_custom_message_register() {
    echo '<div class="custom-message">';
    echo '<p>Este es un mensaje personalizado para la página de registro.</p>';
    echo '<p>Puedes agregar más párrafos o cualquier contenido HTML aquí.</p>';
    echo '</div>';
}

// Agregar el mensaje antes del formulario de registro
// add_action('register_form', 'add_custom_message_register');

// Agregar casilla de aceptación de la política de privacidad
function add_privacy_checkbox_to_register() {
    ?>
    <p>
        <label for="privacy_policy">
            <input type="checkbox" name="privacy_policy" id="privacy_policy" required>
            He leído y acepto la <a style="color:#007DFC; font-size:12px;" href="/enlace-a-tu-politica-de-privacidad" target="_blank">Política de Privacidad</a>.
        </label>
    </p>
    <?php
}

add_action('register_form', 'add_privacy_checkbox_to_register');

function validate_privacy_checkbox($errors, $sanitized_user_login, $user_email) {
    if (!isset($_POST['privacy_policy'])) {
        $errors->add('privacy_policy_error', __('<strong>Error</strong>: Debes aceptar la política de privacidad.'));
    }

    return $errors;
}

add_filter('registration_errors', 'validate_privacy_checkbox', 10, 3);

function save_privacy_checkbox($user_id) {
    if (isset($_POST['privacy_policy'])) {
        update_user_meta($user_id, 'privacy_policy_accepted', '1');
    }
}

add_action('user_register', 'save_privacy_checkbox');

// Eliminar la función original que crea los enlaces fuera del contenedor
remove_action('login_form', 'move_login_links');
remove_action('register_form', 'move_register_links');

//Agregar enlaces de acceso, registro y contraseña olvidada dentro del contenedor
function move_login_links() {
    echo '<div class="login-container">';
    echo '<p>';
    echo '<a href="' . esc_url(wp_registration_url()) . '">Registrarse</a> | ';
    echo '<a href="' . esc_url(wp_lostpassword_url()) . '">¿Has olvidado tu contraseña?</a>';
    echo '</p>';
    echo '</div>';
}

function move_register_links() {
    echo '<div class="register-container">';
    echo '<p>';
    echo '<a href="' . esc_url(wp_login_url()) . '">Acceder</a> | ';
    echo '<a href="' . esc_url(wp_lostpassword_url()) . '">¿Has olvidado tu contraseña?</a>';
    echo '</p>';
    echo '</div>';
}

add_action('login_form', 'move_login_links');
add_action('register_form', 'move_register_links');

// Cambiar el enlace del logo en la página de acceso y registro
function custom_login_logo_url() {
    return home_url(); // Enlazar al inicio del sitio
}
add_filter('login_headerurl', 'custom_login_logo_url');

function custom_login_logo_text() {
    return get_option('blogname');
}
add_filter('login_headertext', 'custom_login_logo_text');
Lenguaje del código: HTML, XML (xml)

Entendiendo el Código

Este código en PHP es utilizado en WordPress para personalizar la apariencia y funcionalidad de las páginas de inicio de sesión y registro. A continuación, se proporciona una explicación detallada y numerada de lo que hace el código:

1. Estilos para la página de inicio de sesión y registro:
   • Configura el fondo y el espacio inferior en las páginas de inicio de sesión y registro.
   • Define estilos para el logo en la página de inicio de sesión y registro.
   • Estiliza el formulario de inicio de sesión y registro, así como las etiquetas, texto y párrafos en el formulario.
   • Aplica estilos a los campos de entrada y resalta los campos enfocados.
   • Define estilos para los botones de envío en el formulario.
   • Oculta el mensaje de registro.
   • Establece estilos para una caja de mensaje personalizado.
   • Define estilos para los enlaces en la página de inicio de sesión.
   • Configura estilos para los contenedores de inicio de sesión y registro, así como para los enlaces dentro de estos contenedores.
   • Oculta elementos predeterminados fuera del formulario de acceso en la página de acceso y de registro en la página de registro.
2. Añadir estilos a través de la función custom_login_register_styles:
   • Esta función utiliza la función echo para imprimir estilos CSS directamente en la página.
3. Agregar la función add_custom_message_login:
   • Agrega un mensaje personalizado antes del formulario de inicio de sesión, pero está comentada para que no se ejecute.
4. Agregar la función add_custom_message_register:
   • Agrega un mensaje personalizado antes del formulario de registro, pero está comentada para que no se ejecute.
5. Agregar casilla de aceptación de la política de privacidad:
   • Agrega una casilla de verificación y un enlace a la política de privacidad en el formulario de registro.
   • Incluye funciones para validar la casilla de privacidad y guardar la aceptación en la base de datos del usuario.
6. Modificar la ubicación de los enlaces de acceso, registro y contraseña olvidada:
   • Elimina las funciones originales que crean enlaces fuera del contenedor.
   • Agrega nuevas funciones que colocan los enlaces de acceso, registro y contraseña olvidada dentro de contenedores específicos.
7. Cambiar el enlace del logo en la página de acceso y registro:
   • Cambia el enlace del logo en la página de acceso para redirigir al inicio del sitio.
   • Cambia el texto del enlace del logo para mostrar el nombre del blog.
8. Filtrar para eliminar el selector de idioma:
   • Utiliza un filtro para eliminar el selector de idioma de la página de inicio de sesión.

En general, este código proporciona una manera eficiente de personalizar la apariencia y funcionalidad de las páginas de inicio de sesión y registro en un sitio WordPress. Cada sección tiene un propósito específico, desde el estilo de la interfaz hasta la manipulación de los enlaces y la inclusión de elementos personalizados.

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.