WordPress – WP-Login Giriş Sayfasını Özelleştirme: Arka Plan, Logo ve Buton Rengi

WordPress – WP-Login Giriş Sayfasını Özelleştirme: Arka Plan, Logo ve Buton Rengi

WordPress kullanıyorsanız, varsayılan wp-login.php giriş sayfası size çok sade ve kişiselleştirmeye kapalı gelebilir. Bu yazıda, sadece giriş sayfasını (wp-login.php) etkileyen özel bir kod ile arka plan rengini, oturum aç butonunu ve logoyu nasıl değiştirebileceğinizi göstereceğiz.

1. Ne Yapacağız?

• Giriş sayfasının arka plan rengini #E3C2B3 yapacağız.
• “Oturum Aç” butonunu bu renkle eşleştireceğiz.
• Özel bir logo kullanacağız (harici bir bağlantı üzerinden).
• Tüm bu değişiklikler sadece wp-login.php sayfasını etkileyecek, diğer sayfalar (örneğin WooCommerce “Hesabım”) etkilenmeyecek.

2. Kodu functions.php Dosyanıza Ekleyin

Aşağıdaki kodu WordPress temanızın functions.php dosyasına ekleyin:

function custom_login_styles() {
    echo '<style>
        body.login {
            background-color: #E3C2B3;
        }
        .login h1 a {
            background-image: url("https://gorselurl.com/wp-content/uploads/2025/04/gorsel.png");
            background-size: contain;
            background-repeat: no-repeat;
            width: 300px;
            height: 80px;
        }
        #wp-submit {
            background-color: #E3C2B3;
            border-color: #E3C2B3;
            color: #000;
        }
        #wp-submit:hover {
            background-color: #d4ae9f;
            border-color: #d4ae9f;
        }
    </style>';
}
add_action('login_head', 'custom_login_styles');

Not: Kod içerisinde kullanılan logo bağlantısını kendi sitenize göre değiştirebilirsiniz.

3. Bu Kod Ne İşe Yarar?

• body.login: Giriş sayfasının arka planını belirler.
• .login h1 a: Logo alanını özelleştirir ve özel logoyu yükler.
• #wp-submit: “Oturum Aç” butonunun rengini ve stilini değiştirir.
• add_action('login_head', ...): Bu stilin sadece wp-login.php sayfasında çalışmasını sağlar.

4. Dikkat Edilmesi Gerekenler

• Bu kod sadece wp-login.php sayfasında çalışır. WooCommerce gibi diğer sayfalarda görünmez.
• Logo URL’si dış kaynaklıysa, bağlantının doğru olduğundan emin olun.
• Kodu eklemeden önce functions.php dosyanızın yedeğini almanız önerilir.

5. Sonuç

Bu basit ama etkili özelleştirme ile WordPress giriş sayfanıza marka kimliğinizi yansıtabilir, kullanıcılarınıza daha profesyonel bir ilk izlenim bırakabilirsiniz. Renkler, butonlar ve logolar gibi basit değişiklikler, kullanıcı deneyimini önemli ölçüde iyileştirebilir.