TuZonaWP utiliza cookies. Lea nuestra Política de Privacidad para obtener más información. Para eliminar este mensaje, haga clic en el siguiente botón: Acepto el uso de cookies

Posteador
TuZonaWP
Administrador



Personalizar Login de Wordpress



Personalizar el Login de wordpress nunca a sido fácil, y mucho menos aun cuando se realiza de una manera completa agregando tu propio logo personalizado, debido a lo mencionado anteriormente me he tomado la molestia de explicar a modificar nuestro login de una manera muy completa, de una manera muy fácil y rápida de aplicar, por ende lo he facilitado aun mas dejándote el código CSS para que tu solo modifiques al gusto, así que no se diga mas y empecemos con lo mencionado anteriormente.

Primer paso a realizar, ingresar al área admin de tu wordpress, ya realizado ir en la parte que dice Apariencia - Editor, dentro del área editor abrir el archivo function.php y dentro de este archivo ingresar el siguiente código


Login
function custom_login() {
$files = 'link rel=stylesheet href='.get_bloginfo('template_directory').'csslogin.css ';
echo $files;
}
add_action('login_head', 'custom_login');

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

function my_custom_login_url_title() {
return 'Titulo de tu Web';
}
add_filter( 'login_headertitle', 'my_custom_login_url_title' );

function my_custom_login_page_css() {
wp_enqueue_style( 'login_css', get_template_directory_uri() . 'style.css' );
}
add_action('login_head', 'my_custom_login_page_css');


Es importante crear una nueva hoja de estilos, en la cual introduciremos el código para solo personalizar nuestro login, para ello deberá crear una nueva hoja de estilos llamada login.css es importante que la hoja de estilos sea nombrada igual, ya que la función agregada busca la hoja de estilos con el nombre de login.css, ahora deberás agregar tus propios estilos CSS, pero yo me e tomado la molestia de otorgarte el código CSS para facilitarte el trabajo


:focus {
outline: 0!important;
}

input[type=checkbox]:focus,
input[type=color]:focus,
input[type=date]:focus,
input[type=datetime-local]:focus,
input[type=datetime]:focus,
input[type=email]:focus,
input[type=month]:focus,
input[type=number]:focus,
input[type=password]:focus,
input[type=radio]:focus,
input[type=search]:focus,
input[type=tel]:focus,
input[type=text]:focus,
input[type=time]:focus,
input[type=url]:focus,
input[type=week]:focus,
select:focus,
textarea:focus,
.wp-core-ui .button-primary.focus,
.wp-core-ui .button-primary:focus {
-webkit-box-shadow: none;
-moz-box-shadow: none;
-o-box-shadow: none;
-ms-box-shadow: none;
box-shadow: none;
}

.wp-core-ui .button-primary.focus,
.wp-core-ui .button-primary.hover,
.wp-core-ui .button-primary:focus,
.wp-core-ui .button-primary:hover,
.wp-core-ui .button-primary.active,
.wp-core-ui .button-primary.active:focus,
.wp-core-ui .button-primary.active:hover,
.wp-core-ui .button-primary:active,
.wp-core-ui .button-primary:hover {
background: #4F8C90;
box-shadow: none;
}

body.login {
background: #FFF;
}

html {
background: none;
}

body.login #nav a,
body.login #backtoblog a,
.login label {
color: #ccc;
font-size: 14px;
}

.login #nav {
color: #ccc;
}

body.login #nav a:hover {
color: #fff;
text-decoration: underline;
}

body.login #backtoblog a:hover {
color: #fff;
text-decoration: underline;
}

.login form {
background: #007077;
}

.login form .input,
.login form input[type=checkbox],
.login input[type=text] {
background: #007077;
border: 0px;
}

.login #login_error,
.login .message {
background: #007077;
color: #ccc;
}

.login .message {
border-left: 4px solid #555;
}

.login #login_error {
border-left: 4px solid #00353F;
}

.message,
#login_error {
font-size: 15px;
}

.login #login_error a {
color: #eee;
}

.login #login_error a:hover {
color: #fff;
}

.login form .input,
.login form input[type=checkbox],
.login input[type=text] {
font-size: 15px;
padding: 7px;
color: #fff;
}

.wp-core-ui .button-primary {
background: #203132;
padding: 5px 10px;
color: white;
font-weight: normal;
text-decoration: none;
}


PD, tambien me he tomado la molestia de reducir el código para tener un mejor rendimiento en nuestro sitio web.

Así de simple es como tu cambias el diseño de tu login, ahora solo toca darle los estilos que mas te gusten.

Para cambiar la imagen, deberás agregar la siguiente linea de código CSS a tu hoja de estilos, pero en esta ocasión la linea de código deberá ser agregada a tu hoja de estilos style.css


Logo Login
#login h1 a {
background-image url(link de tu logo) !important;
}


Simplemente podrás modificar los estilos de tu login, solo toca poner de tu parte para darle unos estilos cool que muestren profesionalismo.

0 Comentarios


Cargando comentarios espera un momento...
No tienes permisos para comentar.

Para poder comentar necesitas estar Registrado. O.. ya tienes usuario? Logueate!
Ir al cielo