WordPress Giriş Logosunu Değiştirme: Eklenti, Kod ve CSS Yöntemleri

WordPress giriş sayfası varsayılan olarak WordPress logosunu görüntüler — profesyonel veya müşteriye yönelik bir sitede yeri olmayan genel bir marka öğesi. Kendi logonuzla değiştirmek beş dakikadan az sürer ve derin teknik bilgi gerektirmez; ancak marka tutarlılığı üzerindeki etkisi anında hissedilir. Bu kılavuz, üç üretime hazır yöntemi kapsar: GUI tabanlı bir eklenti yaklaşımı, doğrudan functions.php enjeksiyonu ve bağımsız özel bir CSS eklentisi — her biri ilk seferinde doğru şekilde uygulamanız için gereken tam kod, dosya yolları ve uç durumlarla birlikte.

Varsayılan Giriş Logosu Neden Düşündüğünüzden Daha Önemlidir

Bir ekip üyesi, müşteri veya yönetici /wp-login.php adresine her gittiğinde bir WordPress logosu görür. Beyaz etiketli bir ajans yapısında, SaaS platformunda veya çok kiracılı bir WordPress kurulumunda, bu varsayılan marka, sitenin diğer her yerinde oluşturduğunuz profesyonel imajı aktif olarak zayıflatır.

Estetik açısının ötesinde, özel bir giriş logosu ince ama gerçek bir güvenlik işlevi görür: kullanıcılarınıza standart WordPress giriş ekranının bir kimlik avı klonunda değil, meşru ve kontrollü bir ortamda olduklarını bildirir. WordPress’i kök erişimiyle bir VPS Hosting ortamında barındırdığınızda, paylaşımlı ortamların getirdiği kısıtlamalar olmaksızın dosya izinlerinden tema dağıtımına kadar bu özelleştirmenin her katmanı üzerinde tam kontrole sahip olursunuz.

Üç Özelleştirme Yönteminin Karşılaştırması

Temel mimari ayrım: üst temanın functions.php dosyasına dayanan yöntemler her tema güncellemesinde üzerine yazılır. Doğrudan dosya değişikliği için her zaman bir alt tema kullanın.

Yöntem 1: Eklenti Kullanımı

Bu, geliştirici olmayanlar için en güvenli yol ve üç dakikadan kısa sürede çalışan bir sonuç isteyen herkes için en hızlı yoldur.

Adım 1: LoginPress’i Yükleyin ve Etkinleştirin

1. WordPress kontrol panelinize giriş yapın.
2. Eklentiler > Yeni Ekle bölümüne gidin.
3. LoginPress veya Custom Login Page Customizer için arama yapın.
4. Şimdi Yükle‘ye, ardından Etkinleştir‘e tıklayın.

Her iki eklenti de aktif olarak güncellenmekte, geniş kurulum tabanlarına sahip olmakta ve ayarlarını yerel WordPress Özelleştirici aracılığıyla sunmaktadır — yani öğrenilmesi gereken yabancı bir arayüz yoktur.

Adım 2: Logonuzu Yükleyin ve Yapılandırın

1. LoginPress > Özelleştirici‘ye gidin (veya eklentiye bağlı olarak Görünüm > Giriş Özelleştirici).
2. Sol paneldeki Logo bölümünü bulun.
3. Görsel Seç‘e tıklayın ve logonuzu Medya Kitaplığı’ndan veya yerel makinenizden yükleyin.
4. Eklentinin canlı önizleme kontrolleri ile genişlik, yükseklik ve dolgu değerlerini ayarlayın.
5. Yayımla‘ya tıklayın.

Uç durum: Logonuz yüksek DPI (Retina) ekranlarda bulanık görünüyorsa, tam olarak hedeflenen görüntüleme boyutunuzun 2 katı büyüklüğünde bir görsel yükleyin ve eklentinin piksel boyutlarına güvenmek yerine CSS width ile kısıtlayın. Örneğin, 250 piksel genişliğinde bir logo istiyorsanız, 500 piksel genişliğinde bir PNG yükleyin ve görüntüleme genişliğini 250px olarak ayarlayın.

Yöntem 2: functions.php’de Manuel Kod (Gelişmiş)

Bu yöntem, ek bir eklenti yüklemeden konumlandırma, bağlantı davranışı ve üzerine gelme durumları dahil her CSS özelliği üzerinde hassas kontrol sağlar. Özel temalar oluşturan veya yalın bir eklenti ayak izi sürdüren geliştiriciler için tercih edilen yaklaşımdır.

Adım 1: Alt Tema Oluşturun veya Erişin

Bir üst temanın functions.php dosyasını asla doğrudan düzenlemeyin. Henüz bir alt tema oluşturmadıysanız, devam etmeden önce bunu yapın. cPanel’li VPS‘te veya SSH erişimi olan herhangi bir sunucuda, alt tema dizinini ve gerekli dosyaları manuel olarak oluşturabilirsiniz.

WordPress kontrol panelinizden Görünüm > Tema Dosya Düzenleyici‘ye gidin ve alt temanızın functions.php dosyasını seçin.

Adım 2: Giriş Logosu Kancasını Ekleyin

Alt temanızın functions.php dosyasına aşağıdaki kod bloğunu ekleyin:

/**
 * Replace the default WordPress login logo with a custom image.
 * Hook: login_enqueue_scripts fires before the login page renders.
 */
function custom_login_logo() { ?>
    <style type="text/css">
        #login h1 a,
        .login h1 a {
            background-image: url('<?php echo esc_url( get_stylesheet_directory_uri() ); ?>/images/custom-logo.png');
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            width: 250px;
            height: 80px;
            display: block;
            margin: 0 auto 20px;
        }
    </style>
<?php }
add_action( 'login_enqueue_scripts', 'custom_login_logo' );

Kritik ayrıntı: Birçok eğitimdeki orijinal kaynak kod yalnızca #login h1 a hedefler. WordPress 5.x’ten itibaren, giriş sayfası sarmalayıcısı aynı zamanda .login sınıfını da taşır; bu nedenle her iki seçiciyi de hedeflemek, tüm WordPress sürümleri ve gelecekteki yapısal değişiklikler genelinde uyumluluğu sağlar.

Adım 3: Logo Dosyanızı Yükleyin

Bir FTP istemcisi, barındırma dosya yöneticiniz veya SSH kullanarak logonuzu alt temanın images/ dizinine yükleyin:

# Example using scp from your local machine to the server
scp /local/path/custom-logo.png user@your-server-ip:/var/www/html/wp-content/themes/your-child-theme/images/

PHP fonksiyonundaki dosya yolu, her zaman aktif temanın kök URI’sine çözümlenen get_stylesheet_directory_uri() kullanır — bu da alt temanın neden zorunlu olduğunu doğrular. Hata yaparak üst temanın dizin fonksiyonu olan get_template_directory_uri()‘ü kullanırsanız, üst temayı değiştirdiğinizde veya güncellediğinizde yol bozulur.

Adım 4: Logo Bağlantısını ve Araç İpucunu Özelleştirin

Varsayılan olarak, giriş logosu wordpress.org adresine geri bağlanır. Büyük olasılıkla kendi ana sayfanıza işaret etmesini istersiniz. Aynı functions.php dosyasına şu iki ek kancayı ekleyin:

// Change the login logo link URL
function custom_login_logo_url() {
    return home_url();
}
add_filter( 'login_headerurl', 'custom_login_logo_url' );

// Change the login logo link title attribute
function custom_login_logo_url_title() {
    return get_bloginfo( 'name' );
}
add_filter( 'login_headertext', 'custom_login_logo_url_title' );

Bu, eğitimlerin büyük çoğunluğunun tamamen atladığı bir ayrıntıdır. Müşteriniz giriş sayfasındaki logoya tıklayıp wordpress.org adresine ulaşırsa, bu profesyonel bir başarısızlıktır. Bu iki filtre o açığı kapatır.

Adım 5: Kaydedin ve Doğrulayın

Tema Dosya Düzenleyici’de Dosyayı Güncelle‘ye tıklayın veya SSH/SFTP üzerinden çalışıyorsanız metin düzenleyiciniz aracılığıyla kaydedin. Önbelleğe alınmış varlıkların sonucu etkilememesi için özel bir tarayıcı penceresinde yourdomain.com/wp-login.php adresine gidin ve sonucu doğrulayın.

Yöntem 3: Özel CSS Eklentisi (functions.php Gerekmez)

Tema dosyalarını düzenlemenin riskli olduğu bir müşteri sitesinde çalışıyorsanız veya alt temayla güvenli şekilde genişletemeyeceğiniz üçüncü taraf bir tema kullanıyorsanız, özel bir CSS eklentisi en temiz çözümdür.

Adım 1: Simple Custom CSS and JS’i Yükleyin

1. Eklentiler > Yeni Ekle‘ye gidin.
2. Simple Custom CSS and JS (veya daha hafif olan Simple Custom CSS) için arama yapın.
3. Yükleyin ve etkinleştirin.

Adım 2: Giriş Sayfası CSS’ini Ekleyin

Custom CSS and JS > Özel CSS Ekle‘ye gidin ve aşağıdakini ekleyin:

/* Target the login logo anchor on the WordPress login page */
#login h1 a,
.login h1 a {
    background-image: url('https://yourdomain.com/wp-content/uploads/your-logo.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center top;
    width: 250px;
    height: 80px;
    display: block;
    margin: 0 auto 20px;
}

URL’yi yüklenen logonuzun doğrudan yoluyla değiştirin. En güvenilir kaynak Medya Kitaplığı‘dır: logonuzu Medya Kitaplığı’nda açın, ek ayrıntıları panelinden Dosya URL’sini kopyalayın ve doğrudan CSS kuralına yapıştırın.

Kaçınılması gereken tuzak: Burada göreli bir URL kullanmayın (örn. /wp-content/uploads/logo.png). WordPress bir alt dizine kuruluysa, göreli yollar sessizce bozulur. Her zaman Medya Kitaplığı’ndan mutlak URL’yi kullanın.

Eklenti sayfa bazlı hedeflemeyi destekliyorsa, her genel sayfada gereksiz CSS yüklenmesini önlemek için Nerede seçeneğini Ön Yüz veya Giriş Sayfası olarak ayarlayın.

Logo Görsel Özellikleri ve En İyi Uygulamalar

Dosya formatı: Şeffaf arka planlı PNG kullanın. JPEG sıkıştırma artefaktları, giriş sayfasının açık gri arka planında görünür. SVG modern tarayıcılarda desteklenir ancak ek CSS gerektirir (background-size: auto SVG’ler için farklı davranır) ve eski kurulumlarda render tutarsızlıklarına neden olabilir.

Boyutlar: WordPress giriş formu kapsayıcısı 320px genişliğindedir. 250 x 80px boyutundaki bir logo bu kısıtlamaya temiz şekilde sığar. Retina/HiDPI ekranlar için 500 x 160px boyutunda dışa aktarın ve CSS width: 250px; height: 80px ile görüntüleme boyutunu kısıtlayın.

Dosya boyutu: Logoyu 50KB altında tutun. Giriş sayfası yüksek frekanslı bir erişim noktasıdır — her yönetici, editör ve katkıda bulunan onu yükler. Şişirilmiş bir görsel dosyası, özellikle sınırlı G/Ç bant genişliğine sahip sunucularda gereksiz gecikme ekler.

Renk kontrastı: Varsayılan giriş sayfası arka planı #f0f0f1‘dir. Dağıtmadan önce logonuzu tam olarak bu hex değerine karşı test edin. Beyaz arka plan üzerinde beyaz logo görünmezdir — aceleyle yapılan dağıtımlarda utanç verici derecede yaygın bir hatadır.

Duyarlı davranış: 320px‘den daha dar mobil ekranlarda taşmayı önlemek için logo bağlantısına max-width: 100% ekleyin. WordPress giriş sayfası varsayılan olarak tam anlamıyla duyarlı değildir, ancak bu tek kural küçük görünüm alanlarında yatay kaydırmayı önler.

Barındırma Ortamı Değerlendirmeleri

Seçtiğiniz yöntem kısmen barındırma ortamınıza göre belirlenir. Dedicated Server‘da kısıtsız SSH erişiminiz vardır ve alt temalar dağıtabilir, dosya izinlerini yönetebilir ve dağıtım betikleri aracılığıyla logo güncellemelerini otomatikleştirebilirsiniz. Paylaşımlı Web Hosting‘de genellikle dosya yöneticisi ve WordPress kontrol paneliyle sınırlısınızdır — bu da eklenti yöntemini veya Özel CSS eklentisini tek pratik seçenek haline getirir.

Birden fazla WordPress kurulumunu yöneten ekipler için, siteler genelinde logo güncellemelerini otomatikleştirmek amacıyla WP-CLI kullanmayı düşünün:

# Activate a child theme via WP-CLI
wp theme activate your-child-theme --path=/var/www/html

# Verify the active theme
wp theme status --path=/var/www/html

WordPress siteniz kullanıcı kayıtlarını, müşteri portallarını veya e-ticaret girişlerini yönetiyorsa, markalı bir giriş sayfasını geçerli bir SSL Sertifikası ile eşleştirmek zorunludur. Giriş sayfası kimlik bilgilerini iletir — HTTPS temel gerekliliktir, isteğe bağlı bir geliştirme değil.

Karar Matrisi: Hangi Yöntemi Kullanmalısınız

Özel durumunuz için doğru yaklaşımı seçmek üzere bu kontrol listesini kullanın:

• Geliştirici değilseniz veya teknik olmayan bir müşteri için oluşturuyorsanız — Yöntem 1’i kullanın (LoginPress eklentisi). Geri alınabilir, kod gerektirmez ve eklenti duyarlı davranışı otomatik olarak yönetir.
• Özel bir alt tema sürdüren bir geliştiriciyseniz — Yöntem 2’yi kullanın (functions.php). Sıfır eklenti yükü ekler ve logo bağlantısı URL düzeltmesi dahil tam CSS kontrolü sağlar.
• Alt tema olmadan üçüncü taraf bir temayı özelleştirmeniz gerekiyorsa — Yöntem 3’ü kullanın (Özel CSS eklentisi). Tema güncellemelerinden yalıtılmıştır ve kaldırması kolaydır.
• Birden fazla siteyi yönetiyorsanız — Tutarlılık için Git veya WP-CLI aracılığıyla dağıtılan, müşteri başına siteye özgü bir alt temayla Yöntem 2’yi birleştirin.
• Logonuz Retina ekranlarda bulanık görünüyorsa — Yöntemden bağımsız olarak, 2 kat çözünürlüklü bir görsel yükleyin ve CSS width ile height özellikleri aracılığıyla görüntüleme boyutunu kısıtlayın.
• Özelleştirmeden sonra logo bağlantısı hâlâ wordpress.org’a işaret ediyorsa — Görsel için bir eklenti kullandıysanız bile Yöntem 2’deki login_headerurl ve login_headertext filtrelerini ekleyin.

SSS

Giriş logosunu değiştirmek WordPress güvenliğini etkiler mi?

Hayır, logo görselini değiştirmenin kimlik doğrulama güvenliği üzerinde hiçbir etkisi yoktur. Ancak özel bir giriş logosu, saldırganlar genellikle varsayılan WordPress giriş görünümünü klonladığından, kullanıcılarınızı hedef alan genel WordPress kimlik avı sayfalarının görsel etkinliğini azaltabilir. Gerçek güvenlik sertleştirmesi için bunu iki faktörlü kimlik doğrulama, giriş denemesi sınırlama ve HTTPS zorunluluğuyla birleştirin.

Özel giriş logosu bir WordPress çekirdek güncellemesinden sonra bozulur mu?

Çekirdek güncellemeler tema dosyalarına veya eklenti verilerine dokunmaz. Yöntem 2’yi bir alt temayla kullandıysanız, değişiklikleriniz hem çekirdek hem de üst tema güncellemelerinden tamamen yalıtılmıştır. Bir üst temanın functions.php dosyasını doğrudan düzenlediyseniz, tema güncellemesi kodunuzun üzerine yazar — bu yüzden alt tema gereksinimi tartışmasızdır.

WordPress giriş sayfasına CSS enjekte etmek için doğru kanca nedir?

login_enqueue_scripts kullanın. Bu eylem, stiller render edilmeden önce özellikle giriş sayfasında tetiklenir ve bu amaç için doğru ve resmi olarak belgelenmiş kancadır. wp_enqueue_scripts kullanmak giriş sayfasında çalışmaz — yalnızca ön yüzde tetiklenir.

Giriş logosu olarak SVG dosyası kullanabilir miyim?

Evet, ancak uyarılarla birlikte. WordPress, güvenlik nedeniyle (SVG’ler çalıştırılabilir JavaScript içerebilir) varsayılan olarak SVG yüklemelerini engeller. SVG yüklemelerini etkinleştirmek için Safe SVG gibi bir eklenti kullanmanız ya da CSS’inizde sabit kodlanmış mutlak bir URL aracılığıyla SVG’ye başvurmanız gerekir. Ayrıca, SVG ölçekleme davranışı raster görsellerden farklı olduğundan background-size: auto veya açık piksel boyutları ayarlayın.

Bu adımları takip etmeme rağmen logom görünmüyor — neyi kontrol etmeliyim?

Önce, tarayıcı önbelleğini atlamak için giriş sayfasını Ctrl+Shift+R (Windows/Linux) veya Cmd+Shift+R (Mac) ile yeniden yükleyin. İkinci olarak, görsel URL’sini doğrudan bir tarayıcı sekmesine yapıştırarak kamuya açık erişilebilir olduğunu doğrulayın. Üçüncü olarak, giriş sayfasında tarayıcı DevTools’u açın, #login h1 a öğesini inceleyin ve CSS kuralınızın uygulanıp uygulanmadığını ya da başka bir stil sayfası tarafından geçersiz kılınıp kılınmadığını kontrol edin. Dördüncü olarak, dosyanın doğru dizine yüklendiğini ve kodunuzdaki dosya adının büyük/küçük harf duyarlılığı dahil yüklenen dosya adıyla tam olarak eşleştiğini doğrulayın — Linux sunucuları Logo.png ve logo.png‘ü farklı dosyalar olarak değerlendirir.