Wordpress Giriş Sayfanızı Özelleştirin!

[guclusat]

Bu yazı Wordpress Giriş Sayfasını özelleştirmek isteyenlere...

http://www.bulanca.com/wp-content/uploads/2010/08/customize-wordpress-login.gif
​

WordPress büyük bir platformdur ve birçok özellik sağlar. Sizde kendi isteklerinize göre blogunuzun Admin giriş sayfasını özelleştirebilirsiniz.

Bende bugün wordpress giriş sayfasını özelleştirme hakkında bir eğitim yazısı paylaşmayı düşündüm. Sizde isterseniz bu makaleyi okuduktan sonra arka plan rengi, metin rengi ve hatta varsayılan logoyu dahi değiştirebilirsiniz.

Wordpress Giriş Sayfası Nasıl Özelleştirilir?

Giriş sayfamızı özelleştirmek için 2 dosyayı düzenleyeceğiz. Bunlar:

1. wp-login.php
2. login.css

NOT: wp-login.php dosyası “wp-admin” dizini içindedir. login.css dosyası ise “wp-admin/css/” dizini içerisindedir.

Dosyaları düzenlemek için ise FTP hesabınıza erişmelisiniz.

1- Logoyu ve Linki Değiştirme

Giriş sayfanız için yapmanız gereken ilk şey varsayılan logoyu değiştirmek. Ancak gerekli değişiklikleri yapmak için hosting hesabınıza erişmeniz gerekiyor.

Öncelikle,” wp-admin” dizini altındaki wp-login.php dosyasını açın ve aşağıdaki kodu bulun:

<div id="login"><h1><a href="<?php echo apply_filters('login_headerurl', 'http://wordpress.org/'); ?>" title="<?php echo apply_filters('login_headertitle', __('Powered by WordPress')); ?>"><?php bloginfo('name'); ?></a></h1>

Burada wordpress.org yerine kendi blogunun linki ekle ve kaydet.

Sırada logomuzu hosta yüklemek gerekiyor. 310×70 px boyutundaki logoyu hosta yükleyin ve yüklediğiniz dizini unutmayın. Şimdi wp-admin/css/ içerisindeki login.css dosyasını açın ve aşağıdaki kodu bulun:

h1 a { background: url(../images/logo-login.gif) no-repeat top center; width: 326px; height: 67px; text-indent: -9999px; overflow: hidden; padding-bottom: 15px; display: block; }

Sonra ../images/logo-login.gif yerine hosta yüklediğiniz logo dosyanızın yolunu yazın ve kaydedin.

2- Giriş Formunu Özelleştirme

Login.css dosyasında değişiklik yaparak istediğiniz görünümü sağlayabilirsiniz. Örneğin ben giriş kutusunun arka planını değiştirdim. Bunu yapmak için login.css dosyasındaki aşağıdaki kodu bulun:

form{margin-left: 8px;padding: 16px 16px 40px 16px;font-weight: normal;

Bunu şu kodlarla değiştirin:

form{margin-left: 8px;padding: 16px 16px 40px 16px;font-weight: normal;-moz-border-radius: 11px; -khtml-border-radius: 11px;-webkit-border-radius: 11px;border-radius: 5px;background: #99CCFF;border: 1px solid #FFF;-moz-box-shadow: rgba(200,200,200,1) 0 4px 18px;-webkit-box-shadow: rgba(200,200,200,1) 0 4px 18px;-khtml-box-shadow: rgba(200,200,200,1) 0 4px 18px;box-shadow: rgba(200,200,200,1) 0 4px 18px;}

İşte bu kadar. Sizde kendi zevkinize göre farklı kombinasyonlar oluşturabilirsiniz. Kolaylıklar dilerim.Alıntıdır

 

[uydudoktoru]

WordPress Giriş Sayfasını Özelleştirin

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.

function fb_custom_login() {    echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('template_directory') . '/custom-login/custom-login.css" />';}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.

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;}

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.

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