Logotipo y CSS personalizado en wp-login

La página de login predeterminada de WordPress es la misma para cualquier instalación. Aparece un fondo gris claro, el logotipo de WordPress enlazado a wordpress.org y un formulario básico para introducir los datos de acceso.

Al menos, podría tomar el logotipo si el theme activo soporta logotipos personalizados, o el color de fondo si el theme soporta backgrounds. Pero lo cierto es que ¡ni siquiera enlaza a la propia web!

Y no hay opciones de configuración para cambiar esto. O instalas un plugin para personalizar wp-login, o utilizas un poco de código que la verdad es bastante sencillo, al menos para una personalización básica que es lo que voy a tratar en este post.

Añadir CSS

Cómo se vio en otro post donde hablaba sobre como añadir CSS en WordPress, para añadir CSS en la página de login se utiliza el action login_enqueue_scripts y la función wp_enqueue_style() para poner en cola nuestro archivo css.

En la función wp_enqueue_style() utilizaremos el identificador login en el parámetro destinado a establecer las dependencias (el tercer parámetro de la función), ya que ese es el identificador del archivo css que carga WordPress en wp-login.php. Al establecer esta dependencia, nuestro archivo css se cargará después del que carga WordPress, lo que nos vendrá muy bien para poder sobreescribir los estilos predeterminados.

Por ejemplo, para añadir el archivo mitheme/assets/css/login.css, en el functions.php del theme se añadiría lo siguiente:

add_action( 'login_enqueue_scripts', 'cyb_login_css' );
function cyb_login_css() {

    wp_enqueue_style(
        'cyb-login',
        get_theme_file_uri( 'assets/css/login.css' ),
        ['login']
    );

}

De forma similar podemos añadir CSS inline:

add_action( 'login_enqueue_scripts', 'cyb_login_css' );
function cyb_login_css() {

    $css = "body.login { color: black; }";

    wp_add_inline_style( 'login', $css );

}

Ahora ya, con nuestro propio CSS cargado en la página, podemos cambiar prácticamente todo el look and feel de wp-login, incluyendo el logotipo.

Cambiar el logotipo

El logotipo de WordPress que aparece sobre el formulario de login viene establecido como un background desde el CSS que carga el propio WordPress. A la fecha de escribir estas líneas tiene esta pinta:

.login h1 a {
    background-image: url(images/w-logo-blue.png?ver=20131202);
    background-image: none,url(images/wordpress-logo.svg?ver=20131107);
}

Para cambiarlo por nuestro propio logotipo tenemos, por tanto, que sobreescribir las propiedades de ese selector.

Por ejemplo, en el archivo login.css que añadimos en el paso anterior, podríamos tener algo así:

.login h1 a {
    background-image: url(assets/images/logo.png);
}

Y listo, nuestro logotipo ya debería aparecer sobre el formulario de login; también en los formularios de registro y recuperación de datos de acceso.

Es muy habitual que nuestro logotipo no encaje a la perfección y que tengamos que dar algunos retoques, especialmente en el background-size y width, por ejemplo:

.login h1 a {
    background-image: url(assets/images/logo.png);
    background-size: auto auto;
    width: auto;
}

Logotipo dinámico

Pero lo suyo es hacer esto un poco más flexible. Por ejemplo, si el theme soporta logotipos personalizados, se debería tomar ese logotipo de forma automática. Para eso, en lugar de añadir un archivo CSS, podemos añadir CSS inline y ejecutar la función adecuada de WordPress para obtener el logotipo:

add_action( 'login_enqueue_scripts', 'cyb_login_css' );
function cyb_login_css() {

    // Un logotipo predeterminado cualquiera
    $logo_url = get_theme_file_uri('assets/images/default-logo.png');

    if ( has_custom_logo() ) {
        
        // Si hay custom logo,
        // cambiar $logo_url por la URl del custom logo
        $custom_logo_id = get_theme_mod( 'custom_logo' );
        $logo = wp_get_attachment_image_src( $custom_logo_id , 'full' );
        $logo_url = $logo[0];

    }

    $css = ".login h1 a { background-image: url($logo_url); }";

    wp_add_inline_style( 'login', $css );

}

Enlazar el logotipo a nuestra web

Hasta aquí muy bien, ya tenemos el logotipo en wp-login, pero sigue enlazado a wordpress.org y el título del enlace es «Funciona gracias a WordPress». Cambiar esto es tan fácil como utilizar el filtro login_headurl para que devuelva la URL de nuestra web, y el filtro login_headertitle para que devuelva el nombre de nuestra web:

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

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

Más personalización con CSS

Con cualquiera de los métodos vistos antes para añadir CSS se pueden hacer todas las personalizaciones que se te puedan ocurrir y que se puedan hacer con CSS. Por ejemplo, podrías añadir un imagen de fondo a tamaño completo en el body:

body.login {
    background: #ffffff url("assets/images/login-full-background.png") no-repeat fixed center;
}

wp-login personalizado — wp-login con logotipo y fondo personalizado

Y además, de forma análoga a como se ha añadido CSS en el action wp_login_scripts, también se puede añadir JS con wp_enqueue_script() o wp_add_inline_script() según necesitemos.

Y con algunos actions y filters más que ofrece WordPress también se pueden añadir campos nuevos al formulario, lo que ya dejo para otro día y otro post.