Personalizar la página de login en WordPress

La página de login de WordPress es la puerta de entrada al panel de administración, y personalizarla puede dar un toque más profesional y alineado con la identidad de tu marca. En este artículo, aprenderás a cambiar el logo, el fondo, los colores y hacer otras modificaciones en el diseño.

1. Cambiar el logo de WordPress

Por defecto, WordPress muestra su propio logo en la página de acceso. Podemos reemplazarlo con el logo de nuestra marca agregando el siguiente código al archivo functions.phpde tu tema activo:

<?php
function custom_login_logo() {
    echo '<style type="text/css">
        #login h1 a {
            background-image: url(' . get_stylesheet_directory_uri() . '/images/custom-logo.png);
            background-size: contain;
            width: 100%;
            height: 80px;
        }
    </style>';
}
add_action('login_head', 'custom_login_logo');

Asegúrate de subir tu logo a la carpeta images dentro de tu tema activo y ajustar el tamaño según sea necesario.

2. Cambiar el fondo de la página de login

Si deseas cambiar el fondo de la página de login, usa este código:

<?php
function custom_login_background() {
    echo '<style type="text/css">
        body.login {
            background-image: url(' . get_stylesheet_directory_uri() . '/images/login-background.jpg);
            background-size: cover;
            background-position: center;
        }
    </style>';
}
add_action('login_enqueue_scripts', 'custom_login_background');

3. Hacer el fondo transparente

Si prefieres un efecto de transparencia en el formulario de login, puedes usar:

<?php
function custom_login_transparent_form() {
    echo '<style type="text/css">
        .login form {
            background: rgba(255, 255, 255, 0.5) !important;
            border: none;
            box-shadow: none;
        }
    </style>';
}
add_action('login_enqueue_scripts', 'custom_login_transparent_form');

4. Cambiar los colores del formulario

Para cambiar los colores de los botones y enlaces, agrega este código:

<?php
function custom_login_colors() {
    echo '<style type="text/css">
        .wp-core-ui .button-primary {
            background: #ff6600 !important;
            border-color: #cc5200 !important;
        }
        .login #backtoblog a, .login #nav a {
            color: #ff6600 !important;
        }
    </style>';
}
add_action('login_enqueue_scripts', 'custom_login_colors');

5. Redirigir el logo al home en lugar de WordPress.org

Cuando haces clic en el logo del login, por defecto te lleva a WordPress.org. Para cambiarlo y dirigirlo a tu página principal, usa este código:

<?php
function custom_login_logo_url() {
    return home_url();
}
add_filter('login_headerurl', 'custom_login_logo_url');

function custom_login_logo_title() {
    return get_bloginfo('name');
}
add_filter('login_headertitle', 'custom_login_logo_title');

Personalizar la página de login de WordPress es una excelente forma de mejorar la experiencia de usuario y reforzar la identidad de marca. Puedes hacerlo con código según tu preferencia.

¡Esperamos que esta guía te haya sido útil! Si tienes dudas, déjalas en los comentarios.