Kendi WordPress Giriş Sayfanızı Oluşturun - WordPress Türkiye İletişim

Kendinize Özgü WordPress Giriş Sayfası

Ö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ı

Tema Klasörü

Tema Klasörü

Ö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 ;)

Benzer Yazilar


“Kendinize Özgü WordPress GiriÅŸ Sayfası” için 9 Yorum var

  1. volkan diyor ki:

    Çok güzel oldu sağol semih ;)

  2. Mümin diyor ki:

    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ı?

  3. Serhatks diyor ki:

    Güzel yazı olmuş,teşekkürler.

  4. Golden diyor ki:

    Yakında güzel tasarım yapıp paylaşan arkadaşlar olur.Bakalım nasıl tasarımlar ortaya çıkıcak. :)

  5. Berkan diyor ki:

    Güzel bi yazı olmuş. Yazarları olan bloglar için ya da kendini tatmin edicek olan blog sahipleri için tam yerinde bi yazıı.

  6. Semih diyor ki:

    hehe =) ben ÅŸimdi kendimi tatmin mi etmiÅŸ oldum :D

  7. Semih diyor ki:

    Faydası olsunda, iyi yada kötü farketmez :)

  8. Semih diyor ki:

    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 :)

Kendimi Şanslı Hissediyorum

Şansını denemek istiyorsan, yukarıya tıkla :)

Duyuru

WordPress'inizi yeni özellikler için ve olası güvenlik açıklarına karşın 2.9.2 sürüme yükseltmeniz tavsiye edilir.

Yükleme Sayfası

Bağlantılar