Personalizar la página login de WordPress

En las web que hago para mis clientes suelo personalizar la página de login usando la marca del cliente. Con esta práctica conseguimos dar uniformidad a toda la web y por lo general el cliente lo valora.

¿Donde pongo el código?

El código que necesitas para estos cambios lo puedes poner en varios lugares. Puedes ponerlo en el fichero functions.php de tu theme o child theme, o puedes hacer un plugin. Ésta última opción es muy interesante si eres programador de WordPress y haces webs para muchos clientes. Puedes usar el mismo plugin para todos tus clientes.

Cambiar el logo de WordPress

La página de login para acceder a tu wordpress tiene este aspecto.

Login Wp Standard

Para cambiar el logo debes usar el action hook login_head. Este hook añade el código que quieras en la cabecera de la página de login. En este caso necesitas un poco de estilo CSS para modificar la etiqueta h1 donde se encuentra el logo de WordPress.

add_action('login_head', 'customlogin_my_logo');
function customlogin_my_logo() {

    echo '<style type="text/css">
    .login h1 a { background-image:url(' . plugins_url( '/img/my-logo.png', __FILE__ ) . ') !important; 
    background-size: 272px 84px !important;
    height: 84px !important; 
    width: 272px !important; 
    margin-bottom: 0 !important; 
    margin-bottom: 10px;
    padding-bottom: 0 !important; }

    </style>';
}

Si lo ves necesario cambia la dirección del logo plugins_url( '/img/my-logo.png', __FILE__ ) por la tuya. Chequea también las propiedades background-size, height y width.

Cambiar la url del logo

El logo tiene un link a la página oficial de wordespress.org y lo más común es cambiarlo por la dirección de tu web. Usamos el hook login_headerurl y listo:

add_filter('login_headerurl', 'customlogin_url_logo');
function customlogin_url_logo(){

    return get_bloginfo( 'wpurl' );
}

Cambiar el texto emergente del logo

Para terminar con la página de login debes modificar el tooltip del logo. El tooltip es el texto emergente que aparece cuando colocas el cursor del ratón encima del logo durante un tiempo. El tooltip se modifica con el hook login_headertitle con el siguiente código:

add_filter('login_headertitle', 'customlogin_hover_text_logo');
function customlogin_hover_text_logo(){

    return 'Mi texto personalizado';
}

Y este es el aspecto final con todas las modificaciones:

Login Wp Custom

Cambiar pie de página de administración

Un extra interesante puede ser modificar el pie de página de administración con unos créditos que enlacen a nuestra web principal. El hook admin_footer_text nos facilita la labor:

add_filter('admin_footer_text', 'customlogin_footer_admin');
function customlogin_footer_admin () {

    echo '<span id="footer-thankyou">Tema creado por <a href="http://bitado.com" target="_blank">Bitado</a></span>';
}

El pie de página queda de esta forma:

Footer Admin Custom

Conclusión

Como has podido ver es muy sencillo personalizar los trabajos para tus clientes, y si te haces un plugin te ahorrará mucho trabajo en el futuro.

Puedes bajar el código de github.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *