WordPress Admin Sayfası Düzenleme

WordPress admin sayfasını isteğinize göre düzenleyebileceğinizi biliyor muydunuz? WordPress admin paneline giriş yapacağımız sayfada wordpressin kendi logosunu görüyoruz. WordPress genel olarak çok sade bir giriş sayfasına sahiptir. WordPress wp-admin paneli sayfanızı düzenlemek istiyorsanız yazımı okumaya devam edin.

Aşağıdaki görsel wp-admin varsayılan görselimiz bakalım ne gibi değişiklikler yapabileceğiz.

WordPress içerisindeki tema klasörüne geliyoruz. Benim localhostta olduğu için klasör yolum aşağıdaki gibidir. Burada önemli olan tema klasörünün içinde olmanız.

C:\xampp\htdocs\wordpress\wp-content\themes\Reflux

Daha sonra tema klasörü içindeki functions.php dosyasını açıyoruz ve dosyasının son satırına kadar inmenizi tavsiye ederim. Aksi takdirde var olan fonksiyonları bozabilirsiniz.

Admin Logo ve Arkaplan Değiştirme

//WP-Login Customizer
function custom_login_logo() {
    echo '
    <style type="text/css">
    h1 a { 
     background: url('.get_bloginfo('template_directory').'/images/logo.png) !important; 
     background-repeat: no-repeat !important; 
     width:167px !important; 
     height:142px !important
}
    body { 
     background: linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),  url('.get_bloginfo('template_directory').'/images/bg.jpg) !important; 
     background-repeat: no-repeat, repeat !important;
     background-size: cover !important;
}
    </style>';

}
add_action('login_head', 'custom_login_logo');

Bu kod bloğunda önemli olan kısım width:167px ve height:142px alanlarıdır. Eğer sizin logonuz bu boyutlarda değilse width ve height değerlerini logonuza göre ayarlamanız gerekir aksi takdirde logonuzun bir kısmı kırpılmış olarak çıkacaktır. Ayrıca, benim verdiğim kod bloğunu kullanmak istiyorsanız tema klasörünüzün içinde images klasörü olması gerekiyor ve resimleri/fotoğrafları bu alana logo.png ve bg.jpg olarak kaydetmelisiniz.

Not: /images/bg.jpg ve /images/logo.png dosya yollarını değiştirerek de istediğiniz görselleri kullanabilirsiniz.

Wp-admin Giriş Formu Düzenleme

Bu bölümde giriş formu ve formun altındaki yazıların renkleri ve düzeni ile ilgili değişiklikler yapacağız.

a { color: #fff !important; } -> Bu kod “Parolanızı mı unuttunuz?” ve “Reflux Me sitesine geri dön” yazılarını beyaz renge çeviriyor.

input[type=text],input[type=password] -> Form içerisindeki kullanıcı adı ve parola labellarını düzenlememizi sağlıyor.

form { background: transparent !important; border: none !important;} -> Bence en güzel kısım burası formun arka planını transparan hale getiriyoruz. Çok şık bir görünüme sahip oluyor.

a { color: #fff !important; } 
input[type=text],input[type=password]{border: 3px solid #d1020c !important;background: transparent !important; border-radius:10px !important; } 
form { background: transparent !important; border: none !important;} 
label { color: #fff !important;border-color:#d1020c !important;} 
.wp-core-ui .button-primary{background: #d1020c;border-color: #d1020c;} 
.wp-core-ui .button-primary:hover{background: #fff;border-color: #d1020c;color: #d1020c;} 
.dashicons{color: #d1020c !important;} 
.login #login_error, .login .message, .login .success{border-left: 4px solid #d1020c;}

Logoya Tıklayınca Siteye Yönlendirme

Admin sayfasındaki logoya tıklayınca kendi sitemize yönlendirsin istiyorsak functions.php içerisine aşağıdaki kodu eklemeniz gerekiyor. http://www.siteadresi.com yerine kendi site adresini yazarsan logoya tıklayınca sitene yönlendirecektir.

// Admin sayfası logo link düzenleme

function custom_loginlogo_url($url) {

return 'https://www.siteadresi.com';

}
add_filter( 'login_headerurl', 'custom_loginlogo_url');

Son Söz

Kodumuzun son hali aşağıdaki gibi oluyor. Sizler de kodu düzenleyerek admin giriş sayfanızı dilediğiniz şekle getirebilirsiniz. Faydalı olduysa yazımı paylaşarak destek olursanız çok memnun olurum.

Sorularınız olursa daima elimden geldiği kadar destek olmaya çalışırım.

//WP-Login Customizer 
   function custom_login_logo()
   { 
       echo ' 
       <style type="text/css"> 

       h1 a { background: url('.get_bloginfo('template_directory').'/images/logo.png) !important; 
       background-repeat: no-repeat !important; width:150px !important; height:99px !important} 
       body { background: linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('.get_bloginfo('template_directory').'/images/bg.jpg) !important; 
       background-repeat: no-repeat, repeat !important; background-size: cover !important;} 
       a { color: #fff !important; } 
        input[type=text],input[type=password]{border: 3px solid #d1020c !important;background: transparent !important; border-radius:10px !important; } 
        form { background: transparent !important; border: none !important;} label { color: #fff !important;border-color:#d1020c !important;} 
           .wp-core-ui .button-primary{background: #d1020c;border-color: #d1020c;} .wp-core-ui .button-primary:hover{background: #fff;border-color: #d1020c;color: #d1020c;} 
           .dashicons{color: #d1020c !important;} .login #login_error, .login .message, .login .success{border-left: 4px solid #d1020c;} 
  </style>'; 
   } 

   add_action('login_head', 'custom_login_logo');