La página de inicio de WordPress es siempre igual, muestra su logo y un cuadro para introducir nuestros datos. Es sencilla y útil pero a la hora de personalizar el diseño web puede resultar algo liosa.
El diseño web no cambia nunca en esta sección y WordPress no aporta ninguna solución para estos casos en los que el usuario quiere modificar el diseño web de la página por donde accedemos al panel de administración de nuestra página hecha con WordPress.
Existen multitud de plugins que nos pueden facilitar la tarea de cambiar el diseño web de nuestra página de acceso, pero yo, personalmente, soy algo reacio a instalar un plugin por cada modificación que queramos hacer a nuestra página web. Si podemos cambiar el diseño web de una forma sencilla por que vamos a instalar un plugin que puede consumir más memoria que la necesaria.
En este tutorial aprenderemos a personalizar el diseño web de esta página para dejarla exactamente como deseemos. Tan solo deberás seguir las instrucciones y pronto tendrás una página con un diseño web totalmente diferente al que viene por defecto en WordPress.
Para hacer los cambios modificaremos el archivo functions.php aunque las mejores prácticas recomiendan crear un plugin propio para hacer este tipo de modificaciones. Así cuando actualicemos el tema o la versión de WordPress mantendremos los cambios con tan solo activar o desactivar nuestro plugin.
En este tutorial no vamos a aprender a crear un plugin conociendo el código necesario es igual o más sencillo crear un plugin que modificar directamente el archivo functions.php
Un ejemplo de página de acceso modificada
Pasos a seguir para cambiar el diseño web de nuestra página
Para empezar crearemos una carpeta llamada login en nuestra carpeta del tema que estamos usando. Dentro de esta carpeta crearemos un archivo de estilo .css donde iremos añadiendo todas las modificaciones. Lo podemos llamar “estilos-de-login.css”
El paso siguiente será modificar el archivo functions.php para indicar donde se encuentra este archivo de estilos. Deberemos añadir el siguiente fragmento:
function my_custom_login() {
echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('stylesheet_directory') . '/login/custom-login-styles.css" />';
}
add_action('login_head', 'my_custom_login');
Añadir un fondo personalizado
Para cambiar el fondo de nuestra página de acceso debemos añadir el siguiente código a nuestro archivo de estilos css. Debemos elegir una imagen con una resulución suficiente para que no aparezca pixelada en las pantallas más grandes. La foto la guardamos junto a nuestro archivo de estilos en la carpeta de login que hemos creado en nuestro tema.
body.login {
background-image: url('login-bg.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
Cambiar el logo de WordPress por el de la empresa
El Codex de WordPress explica brevemente como hacer este cambio pero desde que hemos creado el archivo css tan solo con añadir el siguiente fragmente conseguiremos el mismo objetivo.
.login h1 a {
background-image: url('login-logo.png');
}
Recuerda guardar la imagen junto a la otra, en la carpeta login que hemos creado con anterioridad.
Para cambiar la dirección a la que está apuntando el logo debemos hacer las siguientes modificaciones en el archivo functions.php de nuestro tema.
function mi_login_logo_url() {
return get_bloginfo( 'url' );
}
add_filter( 'login_headerurl', 'mi_login_logo_url' );
function mi_login_logo_url_titulo() {
return 'El título y la info que desees que muestre';
}
add_filter( 'login_headertitle', 'mi_login_logo_url_titulo' );
Con esto podría ser suficiente pero si quiere cambiar el aspecto de la caja y del botón deberás modificar las siguientes clases, todo en el archivo de estilos que hemos creado. si te gusta puedes usar nuestro ejemplo:
.login label {
font-size: 12px;
color: #555555;
}
.login input[type="text"]{
background-color: #ffffff;
border-color:#dddddd;
-webkit-border-radius: 4px;
}
.login input[type="password"]{
background-color: #ffffff;
border-color:#dddddd;
-webkit-border-radius: 4px;
}
.login .button-primary {
width: 120px;
float:right;
background-color:#17a8e3 !important;
background: -webkit-gradient(linear, left top, left bottom, from(#17a8e3), to(#17a8e3));
background: -webkit-linear-gradient(top, #17a8e3, #17a8e3);
background: -moz-linear-gradient(top, #17a8e3, #17a8e3);
background: -ms-linear-gradient(top, #17a8e3, #17a8e3);
background: -o-linear-gradient(top, #17a8e3, #17a8e3);
background-image: -ms-linear-gradient(top, #17a8e3 0%, #17a8e3 100%);
color: #ffffff;
-webkit-border-radius: 4px;
border: 1px solid #0d9ed9;
}
.login .button-primary:hover {
background-color:#17a8e3 !important;
background: -webkit-gradient(linear, left top, left bottom, from(#17a8e3), to(#0d9ed9 ));
background: -webkit-linear-gradient(top, #17a8e3, #0d9ed9 );
background: -moz-linear-gradient(top, #17a8e3, #0d9ed9 );
background: -ms-linear-gradient(top, #17a8e3, #0d9ed9 );
background: -o-linear-gradient(top, #17a8e3, #0d9ed9 );
background-image: -ms-linear-gradient(top, #0b436e 0%, #0d9ed9 100%);
color: #fff;
-webkit-border-radius: 4px;
border: 1px solid #0d9ed9;
}
.login .button-primary:active {
background-color:#17a8e3 !important;
background: -webkit-gradient(linear, left top, left bottom, from(#0d9ed9), to(#17a8e3));
background: -webkit-linear-gradient(top, #0d9ed9, #17a8e3);
background: -moz-linear-gradient(top, #0d9ed9, #17a8e3);
background: -ms-linear-gradient(top, #0d9ed9, #17a8e3);
background: -o-linear-gradient(top, #0d9ed9, #17a8e3);
background-image: -ms-linear-gradient(top, #0d9ed9 0%, #17a8e3 100%);
color: #fff;
-webkit-border-radius: 4px;
border: 1px solid #0d9ed9;
}
Con estas indicaciones podrás tener una página de acceso a tu página totalmente personalizada.
Puedes encontrar más información en el siguiente enlace.
