Personalizar la pantalla de login en WordPress
Aunque nuestros clientes sepan que estamos utilizando WordPress para desarrollar su proyecto, siempre queda bien personalizar un poco su interfaz y darle un toque más personal y profesional.
Para ello, yo hago un par de cosas, que evidentement aconsejo a todos los que uséis WordPress.
Lo primero que hago es sobrescribir algunos estilos de WordPress. En la mayoría de los casos cambio el logo y pongo una imagen de fondo. El logo, tal y como lo tengo programado, es una imagen de 320px por 170px y el fondo puede ser cualquier imagen.
Utilizo este código, que deberéis incluir en el functions.php de vuestro tema.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
//Cambiar el logo del login
function logo_login_personalizado() {
echo "
<style>
#login h1 a { //cambiar la imagen del logo
background: url('".get_bloginfo('template_directory')."/img/logo.png') no-repeat 0 0 scroll transparent;
height: 170px;
width: 320px;
margin-left: 4px;
}
body.login { //poner una imagen de fondo
background: url('".get_bloginfo('template_directory')."/img/login-bg.png') repeat-x top center;
}
</style>
";
}
add_action("login_head", "logo_login_personalizado"); |
Lo segundo, es un detalle que considero bastante básico y consiste en cambiar la URL a la que nos redirije el logo al hacer click sobre el.
Para ello usaremos este código, en el que solo deberéis sustituir la dirección por vuestra URL.
|
1 2 3 4 5 |
//Cambiar la URL del logo en la pantalla de login
function url_login_personalizado($url) {
return 'http://www.hectorgarrofe.com';
}
add_filter( 'login_headerurl', 'url_login_personalizado' ); |
Y ya tenemos una pantalla de login completamente personalizada para nuestro WordPress.
2 Comments
Dani
28 noviembre, 2011Buenas Héctor,
Muy interesante el post aunque mi desconocimiento de WordPress me suscita una duda… ¿Qué diferencia hay entre añadir el código que nos planteas en functions.php a, simplemente, intercanviar ‘/img/logo.png’ por otro .PNG?
¡Muchas gracias por tu ayuda y tus post!
hector
28 noviembre, 2011Muy sencillo Dani,
Si simplemente modificas “logo.png” y lo sobrescribes, estas modificando el núcleo de WordPress. Así que con una actualización este se borrará y volverá a ser el que ya venía por defecto.
En cambio, modificando tu functions.php conservarás el logo independientemente de las actualizaciones.
Además, de esta manera estará integrado en tu tema. Así que simplemente instalando y activando el tema en otra instalación de WordPress, el logo de la pantalla de login cambiará automáticamente.