Özel bir WordPress giriş sayfası nasıl oluşturulur

Giriş sayfasının herhangi bir WordPress sitesinin en önemli sayfası olduğu iddia edilebilir. Giriş yapma yeteneği olmadan, blog sahipleri başka nasıl harika içerik yayınlayabilir? İçerik oluşturmaya ek olarak, bu aynı zamanda çeşitli WordPress yapılandırma seçeneklerine giden yoldur.

Varsayılan giriş sayfası oldukça basittir ve amacına çok iyi hizmet eder. Kullanıcının WordPress kimlik bilgilerini girmesi için gerekli alanlara sahiptir ve sayfa, yönetim ekranlarına erişimi kontrol ederek yalnızca kayıtlı kullanıcıların giriş yapmasına izin verir.

Bir tasarımcı olarak, muhtemelen mükemmel web sitesi tasarımını oluşturmak için saatler harcadınız. Tüm kullanıcılar oturum açma sayfasıyla etkileşime girmese bile, bu tasarımı tüm kullanıcı deneyimi boyunca taşımak önemlidir. Bu, bu ekstra ayrıntıyı eklemek için başka bir fırsattır ve siteye düzenli olarak giriş yapan kullanıcılar için olumlu bir izlenim bırakacaktır. (Ayrıca, sayfayı biraz daha az belirgin olan bir URL'ye taşımak en iyi WordPress güvenliği uygulaması olarak kabul edilir!) Genellikle WordPress tema kurulumunun bir parçası olmasa da, WordPress giriş sayfasında özelleştirmeler yapmak oldukça basittir.

WordPress giriş sayfasına nasıl erişilir

Site sorumluluklarınızın kapsamı ne olursa olsun, muhtemelen bu sayfaya erişmeye çok aşinasınızdır. Ancak aradan bir süre geçmişse, genellikle web sitesinin kök dizininde bulunur. Giriş sayfası genellikle www.mysite.com/wp-login.php gibi bir şeydir. Gördüğünüz gibi, bu henüz şekillendirilmedi.

Bazı durumlarda, kendi alt dizininde bir WordPress kurulumu olabilir. O zaman www.mysite.com/directory-name/wp-login.php gibi bir şey olurdu.

WordPress giriş sayfası nasıl özelleştirilir

Aşağıdaki adımlarda, stil oluşturma amacıyla CSS kullanılacaktır. Ayrıca, özel sayfanın gerçekleşmesi için functions.php dosyasına temaya özel kod eklenecektir.

Çoğu öğretici gibi, bunu önce test ortamınızda denemek isteyeceksiniz. İyi bir test ortamı aracı arıyorsanız, Yerel'e aşina olmak isteyeceksiniz. Canlı yayına geçmeden önce sitenizdeki yeni şeyleri verimli bir şekilde test edebilirsiniz.

Değişikliklerin nasıl çalıştığını görebilmeniz için bu eğitimde functions.php dosyasında değişiklikler yapacağız. Ancak, bu kavramları bir eklenti oluşturmak ve olası değişiklikleri burada functions.php dosyası yerine eklemek için kullanma seçeneği de vardır. Bu eğitim için, giriş sayfasının tasarım değişiklikleri çok temaya özeldir, bu yüzden onları bir eklenti yapmak yerine temaya eklemeyi seçtim.

Özelleştirmeler için yeni bir klasör oluşturun

Bir temaya özelleştirmeler eklerken organize olmak çok önemlidir. Özellikle bu değişiklikler için yeni bir klasör oluşturmak isteyeceksiniz. Bunu yapmak için mevcut aktif temanızı bulun ve ardından “login” adlı bir klasör oluşturun.

Ardından, özel oturum açma stillerine başvurmak için bir CSS dosyası gerekir. Yeni oturum açma klasöründe boş bir CSS dosyası oluşturun ve ona hatırlanması kolay bir ad verin. Bu durumda, login-styles.css .

Bu stil sayfası nasıl bağlanacak? Temanın functions.php dosyasında referans alınması gerekecek. functions.php dosyasını açın ve aşağıdaki parçacıkları yapıştırın. ( login-styles.css farklı bir şey kullandıysanız, CSS dosyasına kendi adınızı eklediğinizden emin olun.)

function custom_login() {
echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('stylesheet_directory') . 'login/login-styles.css" />';
}
add_action('login_head', 'custom_login');


logoyu değiştirme
Bu, yapılması oldukça kolay bir değişikliktir ve markalaşmanın geliştirilmesi üzerinde çok fazla etkisi vardır. Tarayıcı denetçi araçları, sayfanın yapısını belirlemede çok yardımcıdır. Bu örnekte, Chrome Geliştirici Araçları kullanılmıştır. WordPress logosunu kendi logonuzla değiştirmek için bu başlıkla ilişkili CSS stillerini değiştirmeniz gerekir:
		


<h1><a href="http://wordpress.org/" title="Powered by WordPress">Your Site Name</a></h1>



CSS'yi spesifik hale getirmek istiyoruz, böylece div .login sınıfıyla hedeflemek, o div içindeki başlığı ve bağlantıyı biçimlendirmemize izin verecektir.

İşleri düzenli tutmak için ayrı bir resim klasörü oluşturdum. Bu isteğe bağlıdır ve isterseniz başka bir konumdaki bir dosyaya başvurabilirsiniz. Sadece kullanmak istediğiniz görüntü için dosya yolunun doğru olduğundan emin olun.
		


.login h1 a {
  background-image: url('images/login-logo.png');
}



Bunu, varsayılan stilde belirtilen 84 piksel yüksekliğini kullanarak yaptık. Daha büyük veya daha küçük yapmak isterseniz, bunu bu CSS stil sayfasında belirtebilirsiniz. Farklı kenar boşlukları ve dolgu belirtme olanağı da vardır.

Orijinal logo neden değiştirilemiyor? Bunun nedeni, WordPress güncellendiğinde silinebilir.
Bu basit stil ile artık genel WordPress logosuna veda edebiliriz. Bu logo değişimi çok daha kişisel ve markalı hissettiriyor.

Özel arka planı şekillendirme
Arka plan düz bir renk, desen veya görüntü tabanlı bir şey olabilir. Bu örnekte, arka plana siyah beyaz, soyut, "teknik" bir fotoğraf ekleyeceğiz.
		



Tarayıcı geliştirme araçlarını kullanarak yapı incelenebilir. İncelerken, gövde için arka plan stillerinin ayarlandığını göreceksiniz. İşler oldukça geneldir, bu nedenle işleri daha spesifik hale getirmek, istemediğiniz herhangi bir genel değişiklik yapmamanızı sağlayacaktır. Gövdeye uygulanan .login adında çok faydalı olacak bir sınıf vardır (seçicinin bir parçası olduğu için yukarıdaki örnekte logo için bunu kullandık).

body.login {
  background-image: url('images/example-image.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
}


Görüntü görünmüyorsa (bunu birkaç kez yaşadım, itiraf etmek istediğimden daha fazla), görüntünün yolunun doğru olup olmadığını iki kez kontrol edin.
		



Burada işler şekillenmeye başlıyor; Sadece bu küçük değişikliklerle bile, giriş sayfası varsayılandan çok daha markalı ve daha ilginç görünüyor.
Logo bağlantısını ayarlama
Bu kesinlikle bir gösterici değil, ancak şimdi giriş sayfasında kendi logonuz olduğuna göre, gerçek web sitenize bağlantı vermelidir. Şu anda wordpress.org gidiyor. Hepsi iyi ve güzel, çünkü wordpress.org popüler ve faydalı bir yer, ancak bence bunun için bir tarayıcı yer iminin olması fazlasıyla yeterli. Giriş sayfasının bir parçası olmak zorunda değil çünkü proje sitesine ulaşmanın hızlı bir yolunun olması daha kullanışlı görünüyor.
		


Bağlantı değerini, logonun WordPress sitenize bağlanması için değiştirmek için bu işlevi kullanın (ve kendi web sitesi URL'nizi eklemeyi unutmayın):
function login_logo_url() {
    return 'https://www.mysite.com';
}
add_filter('login_headerurl', 'login_logo_url');


Filtrelerin nereden geldiğini merak ediyorsanız, login_headerurl ve login_headertitle bulmak için fonksiyon referansına bakmam gerekti.
Yani şimdi bağlantı doğru yere gidiyor, peki ya başlık metni? Logonun üzerine geldiğinizde, başlık etiketi olarak “Powered by WordPress”i göreceksiniz. Bu kesinlikle iyi, ancak bu, bağlantının nereye gittiğini tam olarak açıklamıyor. Bu oldukça hızlı ve düzeltilmesi kolaydır, bu nedenle ekstra zamana değer. Daha doğru bir başlık için bu basit işlevi ekleyin.
		


function login_logo_text() {
    return 'The Title';
}
add_filter('login_headertitle', 'login_logo_text');


Daha fazla stil seçeneği
CSS'yi çıldırmaktan ve burada yaptığımız şeyi genişletmekten çekinmeyin. WordPress giriş sayfasındaki her HTML öğesini CSS ile biçimlendirebilirsiniz. Yukarıdaki örnekler sadece yüzeyi çizdi. Düğme, bağlantılar ve form arka planının tümü özelleştirilebilir. Tipografiyi de unutma, çünkü o da özelleştirilebiliyor.

Bir form stili geliştirdiyseniz, bu stilleri oturum açma sayfasına taşımak sorunsuz bir deneyim olacaktır. Aynı şey düğmeler için de geçerli. Bu, onu tutarlı bir deneyim haline getirir ve gerçek sitede kullanılandan tamamen farklı bir düğmeye sahip olarak kullanıcıları üzmez. Bir web stili kılavuzu oluşturduysanız, bu, oturum açma sayfasına tutarlı tasarımın nasıl uygulanacağını belirlemede çok yardımcı olacaktır.
Ve CSS sizin işiniz değilse, özel bir WordPress giriş sayfası oluşturmanıza yardımcı olacak mevcut WordPress eklentileri vardır. İşte kontrol etmeye değer birkaç seçenek:

Tema Girişim
Özel Giriş
Özel Giriş Sayfası Özelleştiricisi

Giriş sayfası genellikle unutulur, ancak bu sayfanın sahip olduğu potansiyeli bilerek, tasarım sürecinin bir parçası haline gelebilir. Birkaç basit değişiklikle WordPress giriş sayfanızı sitenizin görünümüne ve tarzına uyacak şekilde kolayca kişiselleştirebilirsiniz.