Personaliza el loguin de wordpress sin plugin
¿Que pasos debes de seguir para conseguir esto?
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.