Personalizando la administración de WordPress: Pantalla de Login

28 octubre, 2013

La pantalla de inicio de sesión de WordPress está bien diseñado, es limpia y sencilla funciona bien en todos los tamaños de pantalla. Pero si estás construyendo un sitio web y quieres personalizar para tu cliente con su propio logotipo veremos como hacer esto con bastante facilidad.

Como primera opción puedes sustituir la imagen que tiene ahora mismo tu wordpress, esta imagen está en la carpeta:

[highlight]wp-admin/images/wordpress-logo.png[/highlight]

Esto es muy rápido de hacer, busca una imagen de tu logo con el tamaño adecuado y listo. Solamente tiene un pero, que cada vez que actualices puede que te “cargues” la imagen y tengas que volver a subir el fichero.

Otra opción es hacer esta modificación a través de un plugin, la ventaja es que podremos utilizarlo en todos los sitios WordPress que desarrollemos.

Los pasos que voy a mostrar en este tutorial son:

Adición de un logotipo personalizado
Styling la pantalla de inicio de sesión – el logotipo, enlaces y botones

¿Que necesitamos para seguir el tutorial?

Una instalación de WordPress
El acceso a la carpeta de plugins de tu sitio para agregar tu plugin
Un editor de texto para crear un plugin

Configuración del plugin

Con un editor de texto, puede ser el blcok de notas, Dreamweaver… lo que tengas a mano, creamos un fichero nuevo que llamaremos personalizar-longin.php. Todo lo guardaremos en una carpeta que llamaremos personalizar-admin-wp

En la parte superior podremos el siguiente texto, es un ejmplo podeis modificar a vuestro antojo:


/*Plugin Name: PersonalizarAdmin - Pantalla Login
Plugin URI: http://tutorialmonsters.com
Description: Personalizar la pantalla de login para Admini de WP
Version: 1.0
Author: Bernardo
Author URI: http://tutorialmonsters.com
License: GPLv2
*/

1. Añadimos nuestro logotipo

Buscamos nuestro logo y lo copiaremos a nuestra carpeta del plugin y dentro de esta a una carpeta que llamaremos media:

[highlight]wp-content/plugins/personalizar-admin-wp/logo.jpg[/highlight]

2. Estilos para la pantalla de Login

Además de añadir un logotipo también puedes cambiar su tamaño y añadir el estilo de otros elementos en la pantalla.

// añadimos el nuevo logotipo
function personalizar_logo() { ?>
<style type="text/css">
.login #login h1 a {
background-image: url( <?php echo plugins_url( 'media/logo.jpg' , __FILE__ ); ?> );
background-size: 300px auto;
height: 143px; /* altura de tu logo */
}
</style>
<?php }
add_action( 'login_enqueue_scripts', 'personalizar_logo' );
?>

El valor de altura se utiliza para mantener el aspecto del logo, en este caso son 143px. Usando 300px y auto para el background-size nos aseguramos que el logotipo sea tan amplio como el cuadro de inicio de sesión y que se mantiene la relación de aspecto proporcional

Ahora tednremos algo como esto:

3. Añadiendo estilo a los enlaces

Además de cambiar el logo, podemos dar un poquito de estilo a los enlaces. Para ello tendremos el siguiente código:


// añadimos el logotipo
function personalizar_logo() { ?>
<style type="text/css">
.login #login h1 a {
background-image: url( <?php echo plugins_url( 'media/logo.jpg' , __FILE__ ); ?> );
background-size: 300px auto;
height: 143px;
}
.login #nav a, .login #backtoblog a {
color: #27adab !important;
}
.login #nav a:hover, .login #backtoblog a:hover {
color: #d228bc !important;
}
</style>
<?php }
add_action( 'login_enqueue_scripts', 'personalizar_logo' );
?>

4. Añadiendo estilos a los botones

Por último, nos queda añadir un poco de estilo a los botones:


// añadiendo el logotipo
function personalizar_logo() { ?>
<style type="text/css">
.login #login h1 a {
background-image: url( <?php echo plugins_url( 'media/logo.jpg' , __FILE__ ); ?> );
background-size: 300px auto;
height: 143px; /* pon la altura de tu logotipo */
}
.login #nav a, .login #backtoblog a {
color: #27adab !important;
}
.login #nav a:hover, .login #backtoblog a:hover {
color: #d228bc !important;
}
.login .button-primary {
background: #27adab; /* Navegadores antiguos */
background: -moz-linear-gradient(top, #27adab 0%, #135655 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#27adab), color-stop(100%,#135655)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #27adab 0%,#135655 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #27adab 0%,#135655 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #27adab 0%,#135655 100%); /* IE10+ */
background: linear-gradient(to bottom, #27adab 0%,#135655 100%); /* W3C */
}
.login .button-primary:hover {
background: #85aaaa; /* Navegadores antiguos */
background: -moz-linear-gradient(top, #85aaaa 0%, #208e8c 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#85aaaa), color-stop(100%,#208e8c)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #85aaaa 0%,#208e8c 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #85aaaa 0%,#208e8c 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #85aaaa 0%,#208e8c 100%); /* IE10+ */
background: linear-gradient(to bottom, #85aaaa 0%,#208e8c 100%); /* W3C */
}
</style>
<?php }
add_action( 'login_enqueue_scripts', 'personalizar_logo' );
?>

Ya tenemos lapantalla completamente personalizada, y nuestro fichero personalizar-login.php completo es el siguiente código (recuerda que tendrás que subir la carpeta con el plugin a tu FTP y activar para ver los resultados):


<?php
/*Plugin Name: Personalizar Admin - Pantalla Login
Plugin URI: http://tutorialmonsters.com
Description: Personalizar la pantalla de login para Admin de WP
Version: 1.0
Author: Bernardo
Author URI: http://tutorialmonsters.com
License: GPLv2
*/

// añadiendo el logotipo
function personalizar_logo() { ?>
<style type="text/css">
.login #login h1 a {
background-image: url( <?php echo plugins_url( 'media/logo.jpg' , __FILE__ ); ?> );
background-size: 300px auto;
height: 143px; /* pon la altura de tu logotipo */
}
.login #nav a, .login #backtoblog a {
color: #27adab !important;
}
.login #nav a:hover, .login #backtoblog a:hover {
color: #d228bc !important;
}
.login .button-primary {
background: #27adab; /* Navegadores antiguos */
background: -moz-linear-gradient(top, #27adab 0%, #135655 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#27adab), color-stop(100%,#135655)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #27adab 0%,#135655 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #27adab 0%,#135655 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #27adab 0%,#135655 100%); /* IE10+ */
background: linear-gradient(to bottom, #27adab 0%,#135655 100%); /* W3C */
}
.login .button-primary:hover {
background: #85aaaa; /* Navegadores antiguos */
background: -moz-linear-gradient(top, #85aaaa 0%, #208e8c 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#85aaaa), color-stop(100%,#208e8c)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #85aaaa 0%,#208e8c 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #85aaaa 0%,#208e8c 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #85aaaa 0%,#208e8c 100%); /* IE10+ */
background: linear-gradient(to bottom, #85aaaa 0%,#208e8c 100%); /* W3C */
}
</style>
<?php }
add_action( 'login_enqueue_scripts', 'personalizar_logo' );
?>