Öncelikle bir dersimize daha hoşgeldiniz diyorum ve hemen konuya geçiyorum
BildiÄŸimiz gibi WordPress’in giriÅŸ sayfası gerçekten çok sade duruyor. Hadi sadeliÄŸini de geçelim, siz bu sayfayı özelleÅŸtirmek istiyorsunuz, ama nasıl yapacaksınız ?
İşte tam burda bizim dersimiz devreye giriyor
Wordpressin giriÅŸ sayfasını düzenlemek gerçekten çok kolay. AÅŸağıda göreceÄŸiniz kodlarla, kendi CSS’inizi (stil dosyası) kullanarak, bu sayfayı nasıl düzenleyebileceÄŸinizi öğreneceksiniz. Bunu görmeden önce isterseniz, hemen ÅŸu an sitemizde aktif olan görünümüne bir bakabilirsiniz.
Åžimdi ÅŸunu düşünüyor olabilirsiniz; “Eee oldu da wordpress güncellendi, ben her defasında bunları en başından mı yapacağım ?”
Bunu düşünüyorsanız, artık düşünmeyi bırakın
Bu işlemin en güzel tarafı da bu zaten, bir daha düzenleme gerektirmiyor.
Yapacağımız iÅŸlemler tamamen WP’nin kendi fonksiyonlarına dayanıyor, yani deÄŸiÅŸme ihtimali yok. Yapacağımız iÅŸlemleri adım adım takip ederseniz, çok basit bir ÅŸekilde, hiç karıştırmadan kendi giriÅŸ sayfanıza sahip olabilirsiniz
* Bu arada derste okuduklarınız hepsi, yazı sonunda indirilebilir halde verilecektir.
BaÅŸlıyoruz…
1. Functions.php Dosyasının Düzenlenmesi
Temanız içerisinde functions.php dosyası olabilir de olmayabilir de.
Eğer varsa, aşağıdaki kodu, dosyanın en altına ekleyin.
Eğer yoksa, Notepadde boş bir sayfa oluşturun, içine kodları ekleyin ve adını functions.php yapıp kaydedin.
Eklemeniz Gereken Kodlar:
<?php
function wpu_login() {
echo '
<link rel="stylesheet" type="text/css" href="' . get_bloginfo('template_directory') . '/wpugiris/wpuzmani.css" />';
}
add_action('login_head', 'wpu_login');
?>
2. Temanın Hazırlanması
Öncelikle giriş sayfasını düzenlediğiniz stil dosyalarını oluşturmak için bize bir yer lazım. Biz bu yeri, yukarıda verdiğimiz fonksiyonda da göreceğiniz üzere,
temaklasörü/wpugiris/wpuzmani.css olarak belirttik.
Yani şimdi yapmanız gereken işlem, tema klasörünün içine, wpugiris adında bir klasör
oluÅŸturmak.
Klasörü oluşturduktan sonra, hemen o klasörün içine, wpuzmani.css adında, yeni bir stil dosyası oluşturun.
3. CSS Dosyasının İçeriğini Hazırlama
wpuzmani.css dosyasını bir yazı editörü yardımıyla açın ve içine şu satırları ekleyin:
/*=========== GİRİŞ SAYFASI ARKAPLANI =============*/
html {background:#EBE9E1 url(bg.jpg) center no-repeat;}
/* WordPress Logosunun yerine gelecek resim ayarları */
h1 a {
background:url(logo.png) 40px 20px no-repeat;
width:415px;
height:70px;
}
/******** ÜST KISIM ********/
#backtoblog {
background:#eee; /* üst link arkaplan rengi */
position:absolute;
top:0;
height:30px;
border-bottom:2px solid #ccc; /* üst kısım border ayarı */
width:100%;
}
.login p#backtoblog a:link, .login p#backtoblog a:visited {color:#17272d;} /* üst link rengi */
.login p#backtoblog a:hover, .login p#backtoblog a:active {color:#17272d;text-decoration:underline;} /*
/*======== GİRİŞ FORMU AYARLARI =======*/
#loginform {
background:#eee;
border:2px solid #ddd;
}
/******** kullanıcı adı girişi *********/
#user_login { background: url(user.png) 5px center no-repeat #fff; }
/******** kullanıcı şifre girişi *********/
#user_pass { background: url(key.png) no-repeat 5px center #fff; }
#loginform .input {
font-family:Tahoma, Geneva, sans-serif;
font-size:13px;
padding:6px;
padding-left:25px;
width:240px;
}
/*===== Åžifrenizi mi Unuttunuz ? =====*/
#nav { background: url(forgetpass.png) no-repeat left 12px; padding-left:30px; }
#nav a { font-weight:bold; text-decoration:none; text-decoration:underline; }
Bu benim kendi giriş sayfamda kullandığım stil dosyasının içeriği.
Siz buradaki ayarları değiştirerek daha güzelini elde edebilirsiniz

“Kendinize Özgü WordPress GiriÅŸ Sayfası” için 9 Yorum var
Çok güzel oldu sağol semih
Merhaba semih kardeş.Söylediklerini harfiyen uyguladım desem yinede olmadı! Senin link verdiğin kendi giriş sayfasıda, klasik görünümde: http://www.wpuzmani.com/wp-login.php
Theme klasörünün içine değilde, kendi kullandığımız tema klasörünün içerisine, hazırladığın zipli dosyasının içindeki wpugiris klasörünü yükledim.
Bu kodlarıda temanın içindeki functions.php en alt satırına yapıştırdım.
<?php
2.function wpu_login() {
3.echo ‘
4. ‘;
5.}
6.add_action(’login_head’, ‘wpu_login’);
7.?>
Yinede wp-admin giriş panelim değişmedi.Daha eksik yaptığım bişey var mı?
Güzel yazı olmuş,teşekkürler.
Yakında güzel tasarım yapıp paylaşan arkadaşlar olur.Bakalım nasıl tasarımlar ortaya çıkıcak.
Güzel bi yazı olmuş. Yazarları olan bloglar için ya da kendini tatmin edicek olan blog sahipleri için tam yerinde bi yazıı.
hehe =) ben ÅŸimdi kendimi tatmin mi etmiÅŸ oldum
Faydası olsunda, iyi yada kötü farketmez
Yukarıdaki kodu satırlar olmadan kopyaladığınıza emin misiniz?
Kodun üzerine geldiğinizde sağ üst köşede butonlar çıkıyor, en baştaki butona bastığınızda, size kaynak kodu verir. Oradan kopyalayıp yapıştırın.
Ayrıca kendi sitemde olmadığı için üzerini çizmiştim oranın. Eski temada vardı, düzeltmedim