03 Mart 2009

WordPress Giriş Sayfasını Özelleştirin

WordPress Yorum Ekle

WordPress'in giriş (login) ekranı WordPress 2.7 ile birlikte değişti. Normalde giriş formunu wp-admin\css\login.css ve wp-admin\images\logo-login.gif dosyalarıyla oynayarak birşeyler yapabilirsiniz. Ama bir tema tasarlayıcısıysanız ve bu giriş ekranının da temanıza uygun olmasını istiyorsanız o zaman ne yapacaksınız? Kullanıcıdan şurayı, burayı değiştirmesini isteyemezsiniz. Böyle bir durumda bu işi temanızın functions.php dosyasına ekleyeceğiniz kodlarla ve oluşturacağınız .css dosyasıyla bu işi otomatik olarak yaptırabilirsiniz.
Bu güzel yönteme Create Your Own WordPress Login Design başlıklı yazıdan ulaşabilirsiniz.

Giriş için Özel Stil Dosyasını Yükleyelim

Aşağıdaki kodu temanızdaki Tema Fonksiyonları (functions.php) dosyanızda uygun bir yere ekleyin. Bu kod ile tema_adi/custom-login/custom-login.css dosyasını giriş ekranında arasına ekler. Bu .css dosyası ile de formu istediğiniz gibi biçimlendirebilirsiniz.

  1. function fb_custom_login() {
  2.     echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('template_directory') . '/custom-login/custom-login.css" />';
  3. }
  4. add_action('login_head', 'fb_custom_login');

Giriş Ekranına Özel Stil Dosyası

Aşağıda verilen .css dosya içeriği, giriş ekranındaki sınıf ve ID'leri içeriyor. Bunları kafanıza göre değiştirebilirsiniz. Kendi bilgisayarınızda deneme yapmadan, doğrudan siteniz üzerinde denemeyin, benden söylemesi.

  1. html {
  2. background-color: #fff;
  3. }
  4.  
  5. #login form {
  6. padding-top: 100px;
  7. }
  8. #login form .submit input {
  9. border-color: #bcb38f !important;
  10. color: #777 !important;
  11. }
  12. #login form .submit input:hover {
  13. border-color: #bcb38f !important;
  14. color: #bcb38f !important;
  15. }
  16. #login h1 {
  17. display: none;
  18. }
  19. .login #nav a {
  20. color: #777 !important;
  21. }
  22. .login #nav a:hover {
  23. color: #bcb38f !important;
  24. }
  25.  
  26. #wphead img, #wphead h1 {
  27. display: none;
  28. }
  29. #wphead {
  30. height: 100px;
  31. }
  32. #wphead-info {
  33. padding-top: 27px;
  34. }
  35.  
  36. #footer {
  37. display: none;
  38. }
  39. #footer_custom {
  40. clear: both;
  41. text-align: center;
  42. width: 500px;
  43. margin: auto;
  44. height: 100px;
  45. }
  46. #footer_custom .docs {
  47. padding-top: 0px;
  48. line-height: 100%;
  49. }
  50. #footer_image {
  51. border:none;
  52. }

Temanıza buradaki kodları ve .css dosyasını ekleyerek, temanızla uyumlu bir giriş ekranı oluşturabilirsiniz ki bence böylesi temanızı kullananları coşturacaktır.

Son Olarak

Aşağıdaki kodu da functions.php dosyasına eklerseniz, giriş ekranının varsayılan stil dosyasının yüklenmesini kaldırabilirsiniz.

  1. if ( basename($_SERVER['PHP_SELF']) == 'wp-login.php' )
  2.     add_action( 'style_loader_tag', create_function( '$a', "return null;" ) );

Bu yazının kısa bağlantısı http://www.yakupgovler.com/?p=706.

Yazılarımı RSS aboneliği ile takip edebilir, yeni yazılarıma kolaylıkla ulaşabilirsiniz. Bunun için ise RSS adresimi kullanabilirsiniz.


“WordPress Giriş Sayfasını Özelleştirin” yazısı için 5 Yorum

Bu yazıya yapılan yorumları dilerseniz, ( RSS 2.0 ) beslemesini kullanarak takibe alabilirsiniz.

  1. Doğan dedi ki:

    Selamlar hocam bu resimli bağlantıları yapıyorumda alt alta sıralanıyor yan yana gelmesi için ne yapmalıyım biraz yardımcı olurmusun birde sizin gibi üstü gölgeli yapsam kaliteli durur ne önere bilirsiniz hocam bana...Cevıbınızı bekliyicem İyi günler

  2. Yakup Gövler dedi ki:

    Resimli Bağlantılar'dan kastınız yan menümdeki bağlantılar kısmı ise bunu http://www.yakupgovler.com/?p=510 adresindeki bileşenimi kullanarak yapabilirsiniz.

  3. Doğan dedi ki:

    Hocam zaten benim tema sizinkinden bu eklentiyi kurmam şartmı yoksa kendine ait olan bağlantı kategorilerindenmi düzenliyoruz resimler koyuyorum ama yan yana olmuyor anlamış değilim 🙁 alt alta sıralanıyor

  4. Doğan dedi ki:

    Yakup hocam birde ingilizce bu anlatım :))ingilizcem olsa ingiltere başkanı olurdum 😀 biz harabayık hocam ne anlarız ingilizceden 😛

  5. Yakup Gövler dedi ki:

    Adresi güncelledim, adres http://www.yakupgovler.com/?p=510 olacaktı. İlgili sayfada ayrıntılı bilgi bulunmakta. Bu tür işlemleri eklenti ile yapmanız gerekiyor, en azından efekt vermek ya da farklı şekillerde göstermeyi kolaylaştırmak için şart.