Subscribete

Ver articulos del blog

Personaliza el loguin de wordpress sin plugin

¿Que pasos debes de seguir para conseguir esto?


Personaliza el loguin en wordpress

Tenemos el login por defecto, lo que haremos es poner una imagen distintiva, y un poco de CSS,empieza creando tu logo personal y ponlo dentro de tu tema una carpeta llamada login y crea una hoja de estilo css llamada login-styles.css puedes pegarle este código. Lo pones también dentro de la carpeta loguin dentro de tu tema
@charset "utf-8";
/* CSS Document */
body.login {
background: #021a2b;
}
.login h1 a {
background-image: url('../login/logo.png');
background-size: 300px 72px;
width: 300px;
height: 72px;
}
#login {
padding: 30px 0 0;
}
.login form {
margin-left:auto;
margin-right:auto;
padding:30px;
border: 1px solid rgba(0,0,0,.2);
background-clip: padding-box;
background: rgba(255, 255, 255, 0.9);
box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
overflow: hidden;
}
.login label {
color: #333;
line-height: 26px;
}
.login .button-primary {
width: 120px;
float:right;
background-color:#083353 !important;
background: -webkit-gradient(linear, left top, left bottom, from(#0b436e), to(#083353));
background: -webkit-linear-gradient(top, #0b436e, #083353);
background: -moz-linear-gradient(top, #0b436e, #083353);
background: -ms-linear-gradient(top, #0b436e, #083353);
background: -o-linear-gradient(top, #0b436e, #083353);
background-image: -ms-linear-gradient(top, #0b436e 0%, #083353 100%);
text-shadow: #333333 0 1px 0;
color: #849db0;
}
.login .button-primary:hover {
background-color:#083353 !important;
background: -webkit-gradient(linear, left top, left bottom, from(#0b436e), to(#083353));
background: -webkit-linear-gradient(top, #0b436e, #083353);
background: -moz-linear-gradient(top, #0b436e, #083353);
background: -ms-linear-gradient(top, #0b436e, #083353);
background: -o-linear-gradient(top, #0b436e, #083353);
background-image: -ms-linear-gradient(top, #0b436e 0%, #083353 100%);
text-shadow: #333333 0 -1px 0;
color: #fff;
}

.login .button-primary:active {
background-color:#083353 !important;
background: -webkit-gradient(linear, left top, left bottom, from(#0b436e), to(#083353));
background: -webkit-linear-gradient(top, #0b436e, #083353);
background: -moz-linear-gradient(top, #0b436e, #083353);
background: -ms-linear-gradient(top, #0b436e, #083353);
background: -o-linear-gradient(top, #0b436e, #083353);
background-image: -ms-linear-gradient(top, #0b436e 0%, #083353 100%);
text-shadow: #333333 0 -1px 0;
color: #fff;
}

Luego añade este código en tu archivo de funciones del tema functions.php

Recuerda de quitar la etiqueta
<?php

Si vas a copiar y pegar todo
<?php

//*Cargar este archivo CSS en su tema functions.php


function login_custom_stylesheet() { ?>
<link rel="stylesheet" id="custom_wp_admin_css" href="<?php echo get_bloginfo( 'stylesheet_directory' ) . '/login/login-styles.css'; ?>" type="text/css" media="all" />
<?php }
add_action( 'login_head', 'login_custom_stylesheet' );

//*Cambie la URL Por defecto, el logotipo enlazará a wordpress.org

function my_login_logo_url() {
return get_bloginfo( 'url' );
}
add_filter( 'login_headerurl', 'my_login_logo_url' );

function my_login_logo_url_title() {
return 'Su Nombre del sitio y la informacion';
}
add_filter( 'login_headertitle', 'my_login_logo_url_title' );

//*Para mover el enlace de contraseña olvidada

function remove_lostpassword_text ( $text ) {
if ($text == 'Lost your password?'){$text = '';}
return $text;
}
add_filter( 'gettext', 'remove_lostpassword_text' );
//*Podemos eliminar el mensaje de error
add_filter('login_errors',create_function('$a', "return null;"));

//*Para quitar el batido,

function my_login_head() {
remove_action('login_head', 'wp_shake_js', 12);
}
add_action('login_head', 'my_login_head');

//*los usuarios que no sean de administración se redirigen:


function admin_login_redirect( $redirect_to, $request, $user )
{
global $user;
if( isset( $user->roles ) && is_array( $user->roles ) ) {
if( in_array( "administrator", $user->roles ) ) {
return $redirect_to;
} else {
return home_url();
}
}
else
{
return $redirect_to;
}
}
add_filter("login_redirect", "admin_login_redirect", 10, 3);


//*Para salir del cuadro siempre marcado


function login_checked_remember_me() {
add_filter( 'login_footer', 'rememberme_checked' );
}
add_action( 'init', 'login_checked_remember_me' );

function rememberme_checked() {
echo "<script>document.getElementById('rememberme').checked = true;</script>";
}

Si algo no te gusta lo quitas, lee las anotaciones.Espero funcione todo bien si no comentar.