Giriş ekranı özelleştirme konusu web ortamında çok sık rastlanan bir konu aslında… Ancak genel olarak incelendiğinde çoğunun eklenti tanıttığını görürsünüz. Eklenti tercih etmeyen arkadaşlar da mevcut tabiki. Ben de o nadir insanların arasında yer almak adına kendim için özelleştirmiş olduğum giriş ekranımı sizlerle paylaşacağım. Giriş ekran görüntüsüne aşağıdan inceleyebilirsiniz.
Bunu nasıl yapacağımıza gelirsek;
Öncelikle her ihtimale karşı temamızın içinde bulunan functions.php dosyasının yedeğini alın.
function fb_custom_login() {
echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('template_directory') . '/css/style.css" />';
}
add_action('login_head', 'fb_custom_login');
Yukarıdaki kodları <?php ?> arasında bir yere ekleyin.
Bu kod ile tema klasörünüz içindeki style.css dosyasını giriş sayfasında çağırmış oluyoruz. Kendi tema yapınıza göre yolu değiştirmeyi unutmayın!
Daha sonra style.css dosyasının en altına aşağıdaki kodları ekliyoruz.
/* Giriş Ekranı Özelliştirme */
.login {
background: hsl(210, 30%, 0%) radial-gradient( hsl(210, 30%, 20%), hsl(210, 30%, 0%)) !important;
}
#login {
color: #000 !important;
padding: 30px !important;
font-size: 14px !important;
text-shadow: none !important;
width: 520px !important;
}
#login a{
color: #fff !important;
}
#login a:focus {
box-shadow: none !important;
-webkit-box-shadow: none !important;
}
#login form {
border-radius: 3px;
position: relative !important;
padding-top: 40px;
padding-bottom: 80px;
padding-top: 40px;
background: rgba(255, 255, 255, 0.05);
color: #fff;
}
.login .input {
background: transparent !important;
outline: none !important;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
padding: 7px !important;
padding-left: 0 !important;
box-shadow: none !important;
-webkit-box-shadow: none !important;
border: 0;
border-bottom: 1px solid #485561;
color: #f4f4f4;
}
.login .input:hover {
outline: none !important;
border-color: #808d98;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
}
.login .input:focus {
outline: none !important;
border-color: #808d98;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
}
#login form .submit input {
position: absolute;
width: 100%;
left: 0;
bottom: 0;
border-radius: 0;
height: 50px !important;
letter-spacing: 10px;
background-color: #3d4c5d;
text-transform: uppercase;
transition: all .3s ease;
font-weight: 200;
font-size: 15px;
border: none !important;
outline: none;
box-shadow: none !important;
-webkit-box-shadow: none !important;
color: #f3f3f3 !important;
}
#login form .submit input:hover {
transition: all .3s ease;
background-color: #5b6e84 !important;
color: #f3f3f3 !important;
}
#login form .submit input:focus {
outline: none !important;
}
#login h1 {
background: url(https://www.nurettinuslu.com/wp-content/themes/nuslu2017/res/login-logo.png) no-repeat top center;
height: 75px;
margin-bottom: 20px;
margin-top: 30px;
}
#login h1 a {
display: none !important;
color: #fff;
}
.login #nav a {
color: #fff !important;
outline: none !important;
}
.login #nav a:focus {
outline: none !important;
border: none !important;
box-shadow: none !important;
-webkit-box-shadow: none !important;
}
.login label {
color: #8c99a7;
}
.login #backtoblog, .login #nav {
padding: 0 !important;
color: #697e96 !important;
}
.login #nav a {
background-color: #3d4c5d;
padding: 10px 24px !important;
border-radius: 3px;
display: inline-block;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
}
.login #nav a:hover {
background-color: #5b6e84;
}
.login #backtoblog a {
background-color: #3d4c5d;
padding: 10px 24px !important;
border-radius: 3px;
display: inline-block;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
}
.login #backtoblog a:hover {
background-color: #5b6e84;
}
.login .forgetmenot {
margin-top: 7px;
}
.login #login_error, .login .message {
border-width: 8px;
padding-left: 20px !important;
color: #f3f3f3 !important;
border-radius: 3px !important;
background-color: #3d4c5d !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
#wphead img, #wphead h1 {
display: none;
}
#wphead {
height: 100px;
}
#wphead-info {
padding-top: 27px;
}
#footer {
display: none;
}
#footer_custom {
clear: both;
text-align: center;
width: 500px;
margin: auto;
height: 100px;
}
#footer_custom .docs {
padding-top: 0px;
line-height: 100%;
}
#footer_image {
border:none;
}
/* Giriş Ekranı Özelliştirme Son */
#login h1 içindeki;
background: url(https://www.nurettinuslu.com/wp-content/themes/nuslu2017/res/login-logo.png) no-repeat top center;
…kodunu kendinize göre değiştirebilirsiniz.
Kendi giriş tasarımınızı bu kodları değiştirerek elde edebilirsiniz.
İyi çalışmalar…