Cómo cambiar el logotipo de Login en WordPress

Cambiar el logotipo de la pantalla de inicio de sesión en WordPress es realmente sencillo. En este artículo te cuento cómo conseguirlo con unas líneas de código muy simples.

Como en otras entradas, y para no perder costumbre, tendrás que editar tu archivo functions.php que encontrarás en la carpeta de tu tema activo (mejor si es un tema hijo). Si todavía no estás muy metido en el tema es posible que no conozcas ningún editor, así que te recomiendo que eches un vistazo a alguno tipo TextMate, Brackets, etc. Si al principio te cuesta un poco no te preocupes, con el tiempo sabrás sacarles partido.

Una vez lo tengas abierto vamos a pegar estas líneas de código que harán que tu logotipo aparezca en la pantalla de inicio de sesión y sustituya al que viene por defecto en WordPress.

function mi_logo_personalizado() {
    echo '
        <style type="text/css">
            .login h1 a {
                background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/images/login-logo.png);
            }
        </style>';
}
add_action( 'login_enqueue_scripts', 'mi_logo_personalizado' );

Utilizando get_stylesheet_directory_uri() nos aseguraremos de encontrar la ruta de la imagen, que está dentro de nuestro tema activo.

Si echas un vistazo al codex verás que la medida recomendada para el logotipo es de 80x80px. ¿Significa esto que no puede ser más grande? ¿Y si nuestro logotipo es más ancho? No te preocupes, podrás arreglarlo con un poco de CSS. Al fin y al cabo es lo que estás haciendo añadiendo estas líneas, modificando la clase que contiene el logo.

Por ejemplo podrás eliminarle el padding-bottom, hacer el contenedor más ancho… etc. En mi caso haré una serie de modificaciones para que no se vea tan diminuto, ya que el logotipo que utilizo es muy ancho. Este es el código que he utilizado para dejarlo tal y como quería:

function calfaro_custom_login_logo() { 
    echo '
        <style type="text/css">
        .login h1 a {
            background-image: url(' . get_stylesheet_directory_uri() . '/images/logo-calfaro.png);
            padding-bottom: 0px;
            width: 100%;
            background-size: contain;
        }
    </style>';
}    
add_action( 'login_enqueue_scripts', 'calfaro_custom_login_logo' );

Únicamente le he tenido que aumentar el ancho al contenedor y pedirle al background que se adapte al máximo de su tamaño. ¡Ya tienes tu logotipo! Pero aún hay más cosas que podemos hacer.

Cómo cambiar el enlace del logotipo de WordPress en el Login

Si queremos dejarlo todo niquelado tendremos que cambiarle el enlace para que nos dirija al inicio de nuestra página y no a wordpress.org. Nuevamente en nuestro functions.php tendremos que añadir un par de líneas muy sencillas. Toma nota:

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

Y, para terminar, vamos a cambiar el título que aparece al pasar el cursor por encima. Copia, pega y modifica estas líneas a tu gusto:

function my_login_logo_url_title() {
    return 'Mi título personalizado';
}
add_filter( 'login_headertitle', 'my_login_logo_url_title' );

Estos filtros nos ayudarán a modificarlo sin la necesidad de utilizar plugins. Ya sabes, cuantos menos plugins utilices mejor.

Si no te ha quedado claro del todo o quieres aportar algún detalle puedes pasarte por los comentarios. Si quieres encontrar más información oficial podrás encontrarla en el codex, una herramienta que siempre deberías tener a mano.

Suscríbete y mantente al día con WordPress

Deja un comentario

¿Quieres recibir las últimas novedades en tu e-mail?

¡GRACIAS!