WordPress personalizar pagina login

“La mayoría de las veces cuando creamos un Theme para WordPress personalizado lo que andamos buscando es exactamente eso, la personalización absoluta a nuestro gusto del Theme o a gusto del cliente, para ello lo mejor es hacerle ver al cliente que el Theme es suyo y una manera de hacerlo es que su marca o logo sea visible en todas partes, para ello hoy veremos como modificar la pantalla de entrada a WordPress (wp-login) con nuestro propio logo personalizado”

Cuando nosotros, un cliente o uno de nuestros editores/escritores quiere acceder al panel de control de nuestro WordPress lo hace desde la dirección WP-LOGIN o WP-ADMIN, en esta pantalla lo primero que vemos es el logo de WordPress tal como se presenta en la siguiente imagen.

Esto esta bien siempre y cuando estemos trabajando nosotros o alguien de nuestra compañía en el blog, pero claro, cuando estamos diseñando un Theme para WordPress especifico para un cliente quedaremos mucho mejor si la pantalla de presentación o entrada al panel de control tiene un diseño personalizado con su el logo o la marca del cliente, justo como podemos ver en la siguiente imagen.

Para ello nada mas sencillo que utilizar una pequeña función con la que conseguiremos decirle al sistema de WordPress que imagen debe mostrar en esta pantalla, para ello, y como acostumbramos a hacer siempre, abrimos nuestro fichero FUNTIONS.PHP y añadimos el siguiente código que a continuación pasamos a comentar.

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


Como podemos ver lo que hacemos es declarar la función WP_LOGIN_MOD que sera la encargada de imprimir el código CSS necesario en el Header del archivo de WordPress, una vez declarada la función le pasamos un simple estilo para LOGIN, aquí le decimos que este estilo debe llevar un fondo en concreto siempre que sea un H1 y ademas un enlace “A”, lógicamente le diremos que dicho fondo sea una imagen que contenga nuestro logo o marca.

En la ultima linea le decimos a WordPress que cuando llame a LOGIN_HEAD ejecute la función WP_LOGIN_MOD que pondrá en el HEADER del archivo el estilo que nosotros le hemos dado con la dirección exacta de la imagen que queremos que muestre.

Para que la imagen sea mostrada nada mas simple que copiar la imagen de nuestro logo en la carpeta IMAGES de nuestro Theme, en el ejemplo nuestra imagen se llama LOGO.PNG pero podemos cambiar este nombre por el de nuestra imagen, incluso podemos utilizar otro formato diferente al PNG.

Ya ven compañeros, con una sencilla y rápida función conseguimos darle un toque de distinción a nuestro Theme que ademas ante nuestro cliente nos hace sumar puntos, podemos llegar a personalizar mucho mas la pantalla de la pagina WP-LOGIN, el tema seria llamar a una hoja de estilos nueva y no a una imagen en concreto para darle los estilos pertinentes y personalizados a cada zona de la pagina, pero eso amigos lo dejo en manos de su imaginación.