Como personalizar la página de inicio de sesion de WordPress sin plugins

La pantalla de login predeterminada de WordPress (wp-login.php) es iconica, pero grita “Blog generico”. Si eres una agencia construyendo un sitio para un clientes (p. ej., Coca-Cola), ver el logo de WordPress es un fallo de branding.

Descubre más sobre servicios de seguridad WordPress en WPPoland. En 2026, el White-Labeling es práctica estándar. Esta guía te muestra como personalizar completamente la experiencia de login usando functions.php, haciendola parecer una aplicación a medida.

Si solo necesitas la versión práctica, usa los hooks de login para reemplazar el logo, cargar CSS dedicado y devolver mensajes de error menos reveladores, todo sin instalar otro plugin solo para branding.

#1. Cambiar el logo (lo básico)

Primero, eliminemos la “W” de WordPress y reemplazala con el logo de tu clientes.

function wppoland_login_logo() { ?>
    <style type="text/css">
        #login h1 a, .login h1 a {
            background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/images/clientes-logo.svg);
            height: 65px;
            width: 320px;
            background-size: contain;
            background-repeat: no-repeat;
            padding-bottom: 30px;
        }
    </style>
<?php }
add_action( 'login_enqueue_scripts', 'wppoland_login_logo' );

Consejo profesional: El enlace predeterminado va a WordPress.org. Cambialo a la página principal de tu sitio:

function wppoland_login_logo_url() {
    return home_url();
}
add_filter( 'login_headerurl', 'wppoland_login_logo_url' );

#2. Renovacion completa del CSS (el look moderno)

El fondo gris predeterminado (#f1f1f1) es aburrido. Hagamoslo una experiencia de marca a pantalla completa. Crea un archivo login-style.css en tu tema y encolalo solo en la página de login.

function wppoland_login_stylesheet() {
    wp_enqueue_style( 'custom-login', get_stylesheet_directory_uri() . '/style-login.css' );
}
add_action( 'login_enqueue_scripts', 'wppoland_login_stylesheet' );

Ejemplo de style-login.css:

body.login {
    background-color: #0d1117; /* Modo oscuro */
    display: flex;
    align-items: center;
    justify-content: center;
}
.login form {
    background: #161b22;
    border: 1px solid #30363d;
    box-shadow: none;
    border-radius: 8px;
}
.login label {
    color: #c9d1d9;
}
.wp-core-ui .button-primary {
    background: #238636; /* Verde GitHub */
    border-color: rgba(27,31,35,0.15);
}

#3. Refuerzo de seguridad (oscuridad)

Por defecto, si escribes una contrasena incorrecta, WordPress dice: “La contrasena que introdujiste para el usuario admin es incorrecta.” Esto le dice a un hacker: “El usuario admin existe! Ahora solo hay que hacer fuerza bruta en la contrasena.”

Forcemos a WordPress a ser vago.

function wppoland_login_errors() {
    return 'Algo esta mal!';
}
add_filter( 'login_errors', 'wppoland_login_errors' );

Ahora el mensaje de error es generico, sin revelar nada.

#4. Eliminar el efecto “shake”

Cuando fallas un login, el formulario se sacude. Algunos clientes encuentran esto molesto o poco profesional. Puedes eliminar el JS que lo activa.

function wppoland_remove_login_shake() {
    remove_action( 'login_head', 'wp_shake_js', 12 );
}
add_action( 'login_head', 'wppoland_remove_login_shake' );

#5. Anadiendo 2FA / Passkeys (el futuro)

En 2026, las contrasenas son posiblemente obsoletas. Aunque no puedes construir fácilmente 2FA (Autenticación de Dos Factores) desde cero en functions.php, deberias estilizar los campos de 2FA si usas un plugin como Two Factor. Apunta a la clase CSS .login .backup-methods para asegurarte de que los botones “Usar una llave de seguridad” coincidan con tu branding.

#6. Personalización avanzada del formulario

#Campos personalizados en el login

Puedes anadir campos adicionales al formulario de login para requisitos específicos:

// Anadir campo personalizado al formulario de login
add_action( 'login_form', function() {
    ?>
    <p class="login-department">
        <label for="department">Departamento</label>
        <select name="department" id="department">
            <option value="marketing">Marketing</option>
            <option value="development">Desarrollo</option>
            <option value="management">Direccion</option>
        </select>
    </p>
    <?php
});

#Redireccion personalizada según rol

add_filter( 'login_redirect', function( $redirect_to, $request, $user ) {
    if ( ! is_wp_error( $user ) ) {
        if ( in_array( 'administrator', $user->roles ) ) {
            return admin_url();
        }
        if ( in_array( 'customer', $user->roles ) ) {
            return wc_get_page_permalink( 'myaccount' );
        }
        if ( in_array( 'subscriber', $user->roles ) ) {
            return home_url( '/miembros/' );
        }
    }
    return $redirect_to;
}, 10, 3 );

#7. Limitacion de intentos de login

Además de la personalización visual, es fundamental limitar los intentos de login:

function wppoland_limit_login_attempts() {
    $max_attempts = 5;
    $lockout_time = 15 * MINUTE_IN_SECONDS;
    $ip = $_SERVER['REMOTE_ADDR'];
    $transient_key = 'login_attempts_' . md5( $ip );

    $attempts = get_transient( $transient_key );
    if ( false === $attempts ) {
        $attempts = 0;
    }

    if ( $attempts >= $max_attempts ) {
        wp_die(
            'Demasiados intentos de inicio de sesion. Intentalo de nuevo en 15 minutos.',
            'Acceso bloqueado',
            ['response' => 403]
        );
    }
}
add_action( 'wp_login_failed', function() {
    $ip = $_SERVER['REMOTE_ADDR'];
    $transient_key = 'login_attempts_' . md5( $ip );

    $attempts = get_transient( $transient_key );
    if ( false === $attempts ) {
        $attempts = 0;
    }

    set_transient( $transient_key, $attempts + 1, 15 * MINUTE_IN_SECONDS );
});
add_action( 'login_init', 'wppoland_limit_login_attempts' );

#8. Página de login completamente personalizada

Para una experiencia totalmente a medida, puedes crear una página de login personalizada usando una plantilla de WordPress:

// Redirigir wp-login.php a página personalizada
add_action( 'login_init', function() {
    if ( ! is_user_logged_in() ) {
        $custom_login_page = home_url( '/acceso/' );
        if ( strpos( $_SERVER['REQUEST_URI'], 'wp-login.php' ) !== false
             && ! isset( $_GET['action'] ) ) {
            wp_redirect( $custom_login_page );
            exit;
        }
    }
});

#9. Consideraciones de accesibilidad

Al personalizar la página de login, no olvides la accesibilidad:

/* Asegurar contraste suficiente */
.login label {
    color: #c9d1d9;
    font-size: 16px;
}

/* Focus visible para navegación por teclado */
.login input:focus {
    outline: 2px solid #238636;
    outline-offset: 2px;
    box-shadow: none;
}

/* Respetar preferencias de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
    .login form {
        transition: none;
    }
}

/* Modo oscuro automático */
@media (prefers-color-scheme: dark) {
    body.login {
        background-color: #0d1117;
    }
}

#10. Pruebas y verificación

Despues de personalizar la página de login, verifica:

• El logo se muestra correctamente en diferentes tamaños de pantalla
• Los mensajes de error son genericos y no revelan información
• El formulario funciona correctamente con gestores de contrasenas
• La accesibilidad por teclado es completa
• Los plugins de 2FA siguen funcionando correctamente
• La redireccion despues del login es correcta para cada rol

#Resumen

Una página de login personalizada es la “guinda del pastel” de un proyecto WordPress profesional.

• Ponle marca: Logo + Enlace.
• Dale estilo: Control total del CSS.
• Protegela: Mensajes de error genericos.

No dejes que tu clientes vea la interfaz predeterminada de WordPress. Rompe la inmersion de una solución construida a medida.