WordPress Admin Girişi Tasarımı

Merhabalar, ben Rıza Selçuk Saydam.RSS-EMS.com ve RSSKitap.com başta olmak üzere bir kaç sitenin baş yazarlığını yapmaktayım.Ömer Fatih Yılmaz’ın isteği üzerine sizlere konuk yazar olarak bir yazı hazırladım.Beğenmeniz dileğiyle.

WordPress sisteminin panellerine tek bir yoldan giriş var.Kurulu olan dizine /wp-admin yazmak.İşte burada alışkanlıkların dışına çıkmak gerçekten sıradışı olmak güzel bir durum.Bu yazıda bu giriş alanını nasıl düzenleyebileceğinizi anlatacağım.

Giriş Paneli Kaynak Dosyası

Giriş panelini düzenleyebilmek için bu dosyaların kaynağını bilmek gerek.Biraz araştırınca ” functions.php ” dosyasının içersinde login_head değişkeninden bir imkan sağlandığını görüyoruz.Temanıza özgü giriş alanı oluşturabilirsiniz.
// custom login for theme
// folder themes/theme_name/custom-login/
function fb_custom_login() {
echo ' ';
}

add_action('login_head', 'fb_custom_login');

Üstteki kod aracılığıyla yapacağımız şey mevcut temamızda ” /custom-login ” klasörü içersinde custom-login.css adlı bir dosya oluşturmak.

custom-login.css dosyası da karmaşık bir yapıya sahip değil.Gayet basit ve net.İşte sizlere o dosyanın da içeriğini yayımlıyorum.

html {
background-color: #fff;
}

#login form {
padding-top: 100px;
}
#login form .submit input {
border-color: #bcb38f !important;
color: #777 !important;
}
#login form .submit input:hover {
border-color: #bcb38f !important;
color: #bcb38f !important;
}
#login h1 {
display: none;
}
.login #nav a {
color: #777 !important;
}
.login #nav a:hover {
color: #bcb38f !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;
}

Bu konuyu çok ayrıntılı anlatmak için CSS ve bir çok kod deri vermek gerek.Eğer sistemsel olarak anlamadığınız bir nokta varsa sorularınız için yorum alanını kullanınız.

Jvstin’den örnek bir admin giriş paneli edinmek isterim derseniz buradan ayrıntılı bilgi alabilir veya hemen indirebilirsiniz.

Saygılarımla.. Rıza Selçuk SAYDAM