- Desde
- 3 Abr 2012
- Mensajes
- 127
Personalizar la página login de wordpress es muy fácil, podemos añadir nuestro propio código css y hacer que se vea como mas nos guste. En este tutorial veremos como personalizar la página de login de wordress.
Para hacerlo crearemos una función login_css(){} dentro de nuestro archivo functions.php :
Insertar CODE, HTML o PHP:
function login_css(){
$meta_css = '<link id="login_admin_css" href="'. get_bloginfo( 'stylesheet_directory' ) .'/admin-login.css" rel="stylesheet" media="all" type="text/css">';
echo $meta_css;
}
// Insertar el archivo admin-login.css en la pagina login
add_action('login_enqueue_scripts', 'login_css');Esta función le indica a WordPress que insertaremos una nueva hoja de estilos admin-login.css a la pagina del login, mediante el hook login_enqueue_scripts.
Luego agregamos dos funciones más, la primera cambiara la url del logo, que por defecto apunta a WordPress.org, y la segunda función cambiara el titulo del enlace.
Insertar CODE, HTML o PHP:
//Cambiamos la url del Logo
function logo_url() { return get_bloginfo('url'); }
//Cambiamos el titulo en el Logo
function logo_url_title() { return 'Mi Sitio Web'; }
add_filter('login_headerurl', 'logo_url');
add_filter('login_headertitle', 'logo_url_title');Creando estilos CSS
Primero debemos saber cuáles son los estilos css que cambiaremos, para ello usando la tecla F12 de nuestro browser, en mi caso Chrome con Developer Tools, ubicaremos cada elemento html en la pagina y podremos ver sus propiedades css.
Luego procedemos a editar nuestro archivo admin-login.css. Por ejemplo si yo quiero cambiar el background de la página, escribiria:
Insertar CODE, HTML o PHP:
body.login {
background: #232B2D url(images/login-background.jpg) no-repeat center center;
background-size: cover;
}En este caso, he indicado que el elemento body con la clase .login tenga como background una imagen de fondo.
Esta seria la forma de ir agregando los estilos en nuestro archivo admin-login.css
admin-login.css
Insertar CODE, HTML o PHP:
/* CSS Login WordPress */
body.login {
background: #232B2D url(images/login-background.jpg) no-repeat center center;
background-size: cover;
}
body.login h1 a {
background: url(images/logo.png) no-repeat 0 0;
margin: 0 auto;
width: 54px;
height: 54px;
}
body.login form { margin-top: 0; }
body.login .button-primary{
background: #FA7252;
border:none;
border-radius: 0;
box-shadow: none;
outline: 0;
}
body.login .button-primary:hover,
body.login .button-primary:focus{
background: #F85129;
border:none;
box-shadow: none;
}
body.login .message{
background: #EEE;
border-color:#FA7252;
}
body.login #nav {
background: #1D2425;
margin-top: 0;
padding: 24px;
text-align: center;
}
body.login #nav a { color: #738E95; }Conclusión
Utilizando algunas funciones básicas de WordPress y algunas técnicas css podemos personalizar páginas, secciones u otros elementos dentro de WordPress.
Fuente: Personalizar el Login de Wordpress (Update)
Demo: Alvarous ? Acceder
Última edición:
