WordPress ile Özel Giriş Sayfası Nasıl Oluşturulur

WordPress söz konusu olduğunda, web sitenizi barındırmak için en iyi platformlardan biri olduğuna dair hiçbir tartışma yoktur; kesinlikle sağlamlığı, uyarlanabilirliği ve daha da önemlisi kullanım kolaylığı ile öne çıkıyor.

Ancak ilk web sitenizi kurmayı planlıyorsanız, normal WordPress giriş sayfası yerine müşterilerinizin kullanması için özel bir giriş sayfası oluşturmayı düşünebilirsiniz.

Yeni başlayanlar için, ağırbaşlı eski WordPress giriş sayfasını kullanmak biraz profesyonelce değil ve en azından söylemek gerekirse çekici değil – müşterilerinizin giriş yapması için özel bir sayfa ayarlamak için neden fazladan çaba sarf etmeyesiniz?

Birini kurma işlemi oldukça kolaydır, bunu manuel olarak veya kurulum sürecini otomatikleştiren özel bir eklenti yükleyerek yapabilirsiniz.

Ancak, bir tanesini manuel olarak ayarlamak söz konusu olduğunda, WordPress'inizi güncellediğinizde temada yaptığınız tüm değişikliklerin silinebileceğini unutmayın. Hem kılavuz hem de eklenti süreci, referans olması için aşağıda yayınlanmıştır.

1. Eklentisiz Özel Giriş Sayfası WordPress Oluşturun

Özel oturum açma sayfasını manuel olarak ayarlamak söz konusu olduğunda, tek gereksinim HTMP, PHP, CSS3 vb. konularda oldukça usta olmanız gerektiğidir.

Kolaylıkla kendi özel WordPress giriş sayfanızı oluşturabilirsiniz – sadece aşağıda yayınlanan talimatları izleyin. Tema dosyanıza gitmeniz ve function.php dosyasındaki değişiklikleri yapmanız gerekecek.

Bir Giriş Sayfasını Özelleştirmek için Temel Değişiklikler

Bunlar, logonun arka planından başlayarak ana WordPress giriş sayfanızda yapmak isteyeceğiniz bazı önemli değişikliklerdir.

Bu değişiklikleri dahil etmek, özel giriş sayfanızın daha profesyonel görünmesine ve tüm doğru nedenlerle öne çıkmasına yardımcı olacaktır.

• Özel bir arka plan ekleyin.
• Özel bir logo ekleyin.
• Giriş formunun görünümünü özelleştirin.
• Oturum açma logosu URL'sini değiştirin.
• Kayıp şifre bağlantısını kaldırın.
• "Geri dön" bağlantısını kaldırın.
• Oturum açma hata mesajını gizleyin.
• Giriş sayfası sallanmasını kaldırın.
• Yönlendirme URL'sini değiştirin.
• "Beni Hatırla" seçeneğini işaretli olarak ayarlayın.

İlgili Mesaj:12+ En İyi Ücretsiz WordPress Özel Giriş Eklentisi

Bundan sonra yapmanız gerekenler:

Giriş sayfası WordPress tema kurulumunun bir parçası olmadığı için WordPress tema stil sayfanızı yüklemez. Bu nedenle, özel giriş sayfası için kendi stil sayfanızı bulmanız gerekir.

Bundan önce, tema klasörünüzde Login adlı yeni bir klasör oluşturacaksınız. Bunun içinde yeni bir .txt dosyası oluşturun ve bunu custom-login-style.css olarak kaydedin. Lütfen yakında ihtiyaç duyacağınız için dosya adını hatırladığınızdan emin olun.

Giriş sayfası için bir CSS'niz olduğunda, WordPress'e bunu açıkça yüklemesini söylemelisiniz. Bunun için, bu kodu function.php içine koyacaksınız, böylece bu dosyayı mükemmel bir şekilde yükleyecektir.
–

functionmy_custom_login()
{
Eko '';
}
add_action('login_head', 'my_custom_login');

Bu hemen görünmelidir, stil sayfasının düzgün yüklenip yüklenmediğini görmek için değişiklikleri önizleyebilirsiniz. Küçük bir hata bile özel oturum açma sayfanızın yüklenmesini engelleyebileceğinden CSS koduna dikkat edin. İşlemin bir sonraki adımına geçelim ve bu özel arka plan eklemek.

Özel Arka Plan Ekleme:

Giriş sayfanıza tercih ettiğiniz herhangi bir arka plan resmini ekleyebilirsiniz. Özel sayfa CSS'nizin 2. satırında bunun doğru adını belirtmeniz yeterlidir. Arka planı ayarlamak için kod aşağıdaki gibidir

body.login
{
background-image:url("../image/login-page-bg.jpg");
arka plan-tekrar:tekrar yok;
arka plan eki:sabit;
arka plan konumu:merkez;
}

Özel Logo Ekleme:

Bu, bir marka kimliğini işaretlemek için en önemli adımdır. Çoğu kullanıcı WordPress logosunu kullanmayı tercih eder, ancak özellikle yepyeni bir işletme web sitesi kuruyorsanız bu bir hatadır.

Özel bir giriş sayfası oluşturmanızın nedenlerinden biri, bunu kendinizi yeniden markalamak için kullanabilmenizdir. WordPress logosu yerine kendi özel logonuzu ekleyebilirsiniz. Özel logo görüntüsünü Login/image klasörüne kaydedin. Bunu aşağıdaki gibi yapacaksın

giriş h1 a {
arka plan resmi: url("../image/logo-1.png");
arka plan boyutu: 75 piksel;
}

Giriş Formunu Özelleştirme:

Bu işlem, kodlamaya yeni başlayanlar için bunaltıcı görünebilir, ancak oldukça basittir ve birkaç saniye içinde yapılamaz. Oturum açma formunun görünümünü site görünümünüze uyacak şekilde değiştirmeniz gerekir.

Dolguyu, formun kenar boşluğunu ayarlayabilirsiniz. Bunun için arka plan rengini, etiketi vs. de değiştirmelisiniz, aşağıdaki örnek kodu inceleyebilirsiniz.

.Giriş Formu{
kutu gölgesi:yok;
dolgu:20 piksel;
}
#giriş yapmak {
arka fon:
#FFF;
kenar boşluğu: 50 piksel otomatik;
dolgu: 40 piksel 20 piksel;
genişlik: 400 piksel;
}
.login etiketi {
renk:
#555;
yazı tipi boyutu: 14 piksel;
}
.login formu .unutmayın{
kayan nokta: yok;
}
Gönder düğmesinin görünümünü değiştirmek için ayrıca kenar boşluğu, kenarlık, yükseklik, genişlik ve rengini ayarlayabilirsiniz. Öyleyse, bu satırları CSS'nize ekleyin

#giriş formu p.gönder{
üst kenar boşluğu:15 piksel;
}
.login.wp-core-ui .button-birincil {
arka fon:
#7B417A;
sınır rengi:
#7B417A;
kutu gölgesi: 0 1px 0
#7B417A;
renk:
#FFF;
metin gölgesi: yok;
yüzer: yok;
ikisini de temizle;
Ekran bloğu;
genişlik: %100;
dolgu: 7 piksel;
yükseklik: otomatik;
yazı tipi boyutu: 15 piksel;
}

Giriş Logosu URL'sini değiştirin:

Logo URL'si varsayılan olarak WordPress.org'a bağlanır. Ancak aşağıda listelenen kodlama ile aşağıdaki gibi başka bir URL'ye yönlendirebilirsiniz.

functioncustom_login_logo_url() {
returnget_bloginfo('url');
}
add_filter('login_headerurl', 'custom_login_logo_url');

functioncustom_login_logo_url_title() {
'Varsayılan Site Başlığı'nı döndür;
}
add_filter('login_headertitle', 'custom_login_logo_url_title');

Kayıp Parola Bağlantısını Kaldır

Kayıp şifre bağlantısı, şifrenizi unuttuğunuzda kullanışlıdır. Oldukça yararlı olabilir, ancak bu özellik, web sitenize koymanın artık riskli olarak kabul edildiği noktaya kadar sıklıkla kötüye kullanılmıştır. Sadece aşağıda listelenen kodları ekleyin ve bu hile yapmalıdır.

p#nav
{
görüntü yok;
}

"Geri dön" bağlantısını kaldırın:

“Geri…” bağlantısı, kullanıcıların ana sayfaya dönmesini sağlar. Ancak bu, web sitenizin biraz retro görünmesine neden olabilir, yalnızca dağınıklığa katkıda bulunduğundan bahsetmiyorum bile. Bu belirli sayfa öğesini kaldırmak her zaman iyi bir fikirdir. Bunun için şunu ekleyeceksiniz

p#backtoblog
{
görüntü yok;
}

Giriş Hata Mesajını Gizle:

Oturum açma hata mesajları, genellikle kullanıcı yanlış kimlik veya parola girdiğinde oluşturulur. Nedeni, kullanıcı adı yanlış veya şifre yanlış olabilir. Bu mesaj kullanıcılar için faydalıdır ancak bilgisayar korsanları kullanıcı oturum açma bilgilerini kırabileceğinden bir boşluk yaratır.

Bu nedenle oturum açma hata mesajı, bilgisayar korsanlarının sitenize erişmesine olanak tanıdığı için bir güvenlik riski oluşturabilir. Bu nedenle function.php dosyasındaki hata mesajını aşağıdaki gibi değiştirmek daha iyidir.

functioncustom_login_error_message()
{
return 'Lütfen geçerli oturum açma bilgilerini girin.';
}
add_filter('login_errors', 'custom_login_error_message');

Giriş Sayfası Sarsıntısını Kaldırın:

Kullanıcı yanlış oturum açma kimlik bilgilerini gönderdiğinde oturum açma formu sallanıyor. Ancak bu özelliği beğenmediyseniz, bunu kaldırabilirsiniz.

WordPress bunu ilk tanıttığında sevimliydi, ancak işlevselliğini yitirdi ve bu günlerde web sitesinin profesyonelce ve biraz da çocukça görünmesini sağlıyor.

functioncustom_login_head() {
remove_action('login_head', 'wp_shake_js', 12);
}
add_action('login_head', 'custom_login_head');

Yönlendirme URL'sini değiştirin:
WordPress'te oturum açarsanız, sizi doğrudan kontrol paneline yönlendirir. Yönetici hariç hepsini ana sayfaya aşağıdaki gibi yönlendirebilirsiniz.

functioncustom_login_redirect( $redirect_to, $request, $user )
{
küresel $kullanıcı;
if( isset( $user->roles ) &&is_array( $user->roles ) ) {
if(in_array( "yönetici", $kullanıcı->roller ) ) {
$redirect_to döndür;
} Başka {
eve dönüş_url();
}
}
Başka
{
$redirect_to döndür;
}
}
add_filter("login_redirect", "custom_login_redirect", 10, 3);
"Beni Hatırla" seçeneğini İşaretli olarak ayarlayın
Beni Hatırla kutusu varsayılan olarak işaretli değildir. Kontrol edilen duruma aşağıdaki gibi değiştirebilirsiniz:

add_filter('login_footer', 'default_rememberme_checked');
}
add_action('init', 'default_checked_remember_me');
functiondefault_rememberme_checked() {
echo "document.getElementById('rememberme').checked = true;";
}

Bu tamamen bir giriş sayfasını kodla özelleştirmekle ilgiliydi. Basit CSS kodundaki tüm değişiklikleri deneyebilirsiniz. Kopyalayabilir, yapıştırabilirsiniz ve onunla birlikte ayarlamalısınız.

2. Şablon ekmek kızartma makinesi eklentileriyle özel bir giriş sayfası oluşturma:

Kullanabileceğiniz birkaç eklenti var, ancak şablon ekmek kızartma makinesi eklentileri aynı şekilde kullanmak daha iyidir. Bu özel eklentiyi web sitenize yükleyerek.

Kendinizi yeniden markalamanızı ve sonuç olarak daha fazla müşteriye ulaşmanızı mümkün kılacak kendi benzersiz özel giriş sayfanızı oluşturabilmelisiniz.

Giriş sayfası kolayca özelleştirilebilir ve bu özel eklenti, dolgudan kenar boşluklarına ve hatta logo ve arka plan resimlerine kadar tam da bunu yapmanıza olanak tanır.

Bu yüzden bu eklentiyi kontrol edin ve aynısını en erken web sitenize yükleyin. Ayrıca diğer eklentiler arasında benim eklentim, Yönetici özel oturum açma temasını da deneyebilirsiniz. Özel giriş sayfanızı birkaç dakikadan kısa bir sürede kurabilmelisiniz.