WordPress: Inicio de sesión 100% personalizado

El login del panel de administración de WordPress es en general siempre el mismo. Pocos se toman la molestia de modificarlo, personalizándolo para que se amalgame con el diseño de nuestro blog. Lo cierto es que personalizar el inicio de sesión es verdaderamente simple.

Mediante este código podrás añadir tu propio CSS a la página de registro y hacerla lucir como desees. Y lo mejor de todo es que los cambios se realizarán en los archivos de tu tema por lo que permanecerán aunque cambies la versión de WordPress. A continuación, los 3 pasos para lograrlo.

1. Edita Functions.php

Tu tema puede que incluya o no el archive functions.php. Si lo incluye simplemente añade el siguiente código al final de este archivo. Si no lo tiene, deberás crear un archivo en blanco en el bloc de notas y guardarlo con ese nombre dentro de la carpeta de tu tema.

Recuerda no dejar ningún espacio antes o después de las etiquetas <?php and ?>.

<?php
function custom_login() {
echo ‘<link rel=”stylesheet” type=”text/css” href=”‘ . get_bloginfo(’template_directory’) . ‘/custom-login/custom-login.css” />’;
}
add_action(’login_head’, ‘custom_login’);
?>

2. Edita los archivos de tu tema

Crea una carpeta dentro en la carpeta de tu tema con el nombre custom-login para incluir tus nuevos estilos CSS y las imágenes que puedas llegar a usar.

Y dentro de esa carpeta crea una nueva hoja de estilos llamada custom-login.css.

3. Agrega nuevas reglas CSS

El archivo custom-login.css se cargará cada vez que se visites el inicio de sesión de tu blog. Esto quiere decir que cualquier regla que añadas aquí se aplicará en la página de registro.

Si añades nuevas imágenes puedes almacenarlas en tu carpeta custom-login.

Sin embargo, si deseas reutilizar imágenes de tu tema, simplemente utiliza reglas CSS como la siguiente:

html {background:#17272d url(../images/pbd-body.jpg) 0 0 repeat-x;}

Este es un sencillo ejemplo de lo que se puede lograr:

/* Estilos personalizados para el Inicio de Sesión */

html {background:#17272d url(../images/pbd-body.jpg) 0 0 repeat-x;} /* Fondo de la página. ¡No puedes usar el tag body para esto! */
h1 a { /* Imgen de título (El logo de "WordPress"). Recuerda actualizar el ancho y alto en las dimensiones de tu imagen */
background:url(../images/pbd-title.png) 0 0 no-repeat;
width:415px;
height:70px;
}

body.login {border-top-color:#dff4fc;}    /* Color de fondo de la barra superior */
.login p#backtoblog a:link, .login p#backtoblog a:visited {color:#17272d;}    /* Efectos de enlaces para la barra superior */
.login p#backtoblog a:hover, .login p#backtoblog a:active {color:#17272d;text-decoration:underline;}    /* Efectos de enlace con rollover para la barra superior */

Fuente: Pro Blog Design