Spanish (Español) translation by Esther (you can also view the original English article)
La pantalla de inicio de sesión de WordPress está bien diseñada, es limpia y sencilla de interactuar y funciona bien en todos los tamaños de pantalla. ¿Pero qué pasa si estás construyendo un sitio para un cliente que quiere mostrar su propio logo a los usuarios que se conectan? ¿O si tienes una instalación MultiSite y quieres que tus usuarios vean tu marca cuando se conecten? Por suerte, puedes personalizar el aspecto de la pantalla de inicio de sesión con bastante facilidad.
Para este tutorial he creado un plugin para hacer esto; la ventaja de usar un plugin es que puedes soltarlo en cualquier sitio de WordPress que desarrolles y añadirle instantáneamente un poco de tu marca.
Los pasos que voy a demostrar en este tutorial son:
- Añadir un logotipo personalizado
- Estilizar la pantalla de inicio de sesión, el logotipo, los enlaces y los botones
Lo que necesitarás para completar este tutorial
Para completar este tutorial necesitarás:
- Una instalación de WordPress
- Accede a la carpeta de plugins de tu sitio para añadir tu plugin
- Un editor de texto para crear tu plugin.
Configuración del plugin
En la parte superior de mi plugin estoy añadiendo las siguientes líneas:
/* Plugin Name: WPTutsPlus Customize the Admin Part 1 - Login Screen Plugin URI: https://rachelmccollin.co.uk Description: This plugin supports the tutorial in wptutsplus. It customizes the WordPress login screen. Version: 1.0 Author: Rachel McCollin Author URI: http://rachelmccollin.com License: GPLv2 */
1. Añadir un logotipo personalizado
Es fácil añadir tu propio logotipo o el de tu cliente a la página de inicio de sesión e instantáneamente hacer que tu instalación de WordPress se vea más profesional.
- Primero, crea una carpeta llamada media dentro de tu carpeta de plugins, y sube tu logo a ella.
- En el archivo del plugin (o archivo de funciones), añade la siguiente función, adjuntándola al gancho de acción
login_enqueue_scripts:
// add a new logo to the login page
function wptutsplus_login_logo() { ?>
<style type="text/css">
.login #login h1 a {
background-image: url( <?php echo plugins_url( 'media/cd-logo-directing-fullcol.png' , __FILE__ ); ?> );
}
</style>
<?php }
add_action( 'login_enqueue_scripts', 'wptutsplus_login_logo' );
?> Esto agregará tu logo a la pantalla de ingreso, como se muestra en la captura de pantalla.
2. Estilo de la pantalla de inicio de sesión
Además de añadir un logotipo, también puedes cambiar su tamaño para que se ajuste y añadir estilo para otros elementos de la pantalla.
Estilo del logo
El logo de arriba está ligeramente aplastado para que se ajuste al espacio predeterminado que se le ha dado. Voy a ajustar el tamaño.
Edita el código de tu plugin para que se lea como sigue:
// add a new logo to the login page
function wptutsplus_login_logo() { ?>
<style type="text/css">
.login #login h1 a {
background-image: url( <?php echo plugins_url( 'media/cd-logo-directing-fullcol.png' , __FILE__ ); ?> );
background-size: 300px auto;
height: 70px;
}
</style>
<?php }
add_action( 'login_enqueue_scripts', 'wptutsplus_login_logo' );
?> El valor de altura que utilices dependerá de la relación de aspecto de tu logotipo. El uso de 300px y auto para la propiedad de background-size asegure que tu logotipo sea tan ancho como el cuadro de conexión y que su relación de aspecto se mantenga, y el valor de height proporcionará suficiente espacio para que tu logotipo encaje.
Ahora mi logo se ve así:
¡Mucho mejor! Pero dimensionar el logo no es lo único que puedo hacer con respecto al estilo. ¿Qué tal si cambiamos algunos colores?
Enlaces de estilo
Todo el texto que se muestra en la página de inicio de sesión es en forma de enlaces, así que son enlaces que tendrás que estilizar. Edita tu código de nuevo para que se lea como sigue:
// add a new logo to the login page
function wptutsplus_login_logo() { ?>
<style type="text/css">
.login #login h1 a {
background-image: url( <?php echo plugins_url( 'media/cd-logo-directing-fullcol.png' , __FILE__ ); ?> );
background-size: 300px auto;
height: 70px;
}
.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', 'wptutsplus_login_logo' );
?> Esto me da enlaces que están en concordancia con los colores de mi logo. El color de los enlaces es cian y el color de los cierres es magenta.
Nota: Como el color principal de mi logo es similar al azul, funciona bien para los enlaces. Puede que no quieras cambiar el color de tus enlaces si tu logo es de un color muy diferente, para evitar problemas de usabilidad.
Estilizar el botón
El último elemento de la pantalla es el botón "Log In", que sigue siendo azul. Cambiemos eso. Edita tu código para que se lea como sigue:
// add a new logo to the login page
function wptutsplus_login_logo() { ?>
<style type="text/css">
.login #login h1 a {
background-image: url( <?php echo plugins_url( 'media/cd-logo-directing-fullcol.png' , __FILE__ ); ?> );
background-size: 300px auto;
height: 70px;
}
.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; /* Old browsers */
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; /* Old browsers */
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', 'wptutsplus_login_logo' );
?> Así que ahora tengo una pantalla de inicio de sesión completamente personalizada, lo que significa que cuando mis clientes o usuarios inician sesión, ven algo que es consistente con mi marca y hace que el sitio se vea más profesional.
Resumen
Personalizar la pantalla de inicio de sesión de WordPress es sencillo y puede marcar una gran diferencia en la impresión que tu sitio da a los usuarios y clientes que inician sesión. Ajustando el código anterior para satisfacer tus necesidades y reflejar tu marca, puede crear una pantalla de inicio de sesión muy profesional en muy poco tiempo.
