Ö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

Kaynak + Download: Kendi WordPress Giriş Sayfanızı Oluşturun | WP Uzmanı