WordPress Giriş Sayfası Oluşturma – Detaylı Anlatım

Web siteniz için özel bir WordPress giriş sayfası oluşturmak ister misiniz?

Eğer üyelikli bir WordPress sitesi veya çevrimiçi bir mağaza işletiyorsanız kullanıcılarınızın çoğu giriş sayfasını sık sık görür. Varsayılan WordPress giriş sayfasını özelleştirmek size daha iyi bir kullanıcı deneyimi sunmanıza izin verir.

Bu yazımda, size özel bir WordPress giriş sayfası oluşturmanın farklı yollarını göstereceğim. Ayrıca özel bir WooCommerce giriş sayfası oluşturmak için de kullanabileceksiniz.

Neden Özel Bir WordPress Giriş Sayfası Oluşturmalısınız?

Sitenin giriş sayfası varsayılan olarak WordPress markasını ve logosunu gösterir. Küçük bir blog kullanıyorsanız veya yönetici erişimine sahip tek kişiyseniz görsel pek sizi ilgilendirmeyebilir.

Ancak, websiteniz kullanıcıların kayıt olmasına ve giriş yapmasına izin veriyorsa, özel bir giriş sayfası daha iyi bir kullanıcı deneyimi sunar.

Kendi logonuzu ve tasarımınızı kullanmak, kullanıcılarınızın daha güvenilir hissetmesini sağlar. Eğer ki websitenize benzeyen varsayılan WordPress giriş ekranına yönlendirmek, kullanıcılarınız için şüpheli olarak görünebilir.

Ayrıca varsayılan WordPress giriş ekranı giriş formundan başka bir şey değildir. Halbuki özel bir WordPress giriş sayfası oluşturarak diğer sayfaları veya özel promosyonları tanıtmak için kullanabilirsiniz.

Bazı özel WordPress giriş sayfası tasarımı örneklerine bir göz atalım.

WordPress Giriş Sayfası Tasarım Örnekleri

Websitesi sahipleri, WordPress giriş sayfasını farklı stil ve teknikleri kullanarak özelleştirebilirler.

Bazıları websitelerinin tema ve renklerini kullanan özel bir giriş sayfası oluşturur. Bazıları ise özel bir arka plan, renkler ve kendi logolarını ekleyerek varsayılan giriş sayfasını değiştirir.

1. WPForms

WPForms, bana göre piyasadaki en iyi WordPress iletişim formu eklentisidir. Yazının devamında da anlatacağım güzel bir WordPress giriş ve kayıt formu eklentisidir.

Yukarıdaki görselde görüldüğü üzere WpForms ile oluşturulan özel giriş sayfası 2 sütun içermekte. Sol sütun giriş bilgilerinin doldurulacağı kısım iken, sağ sütun sitenin belirlediği bir görsel ve içerikten oluşmaktadır.

2. Rock My Wedding

Rock My Wedding sitesinin kullandığı özel giriş ekranı yukarıda da görüldüğü gibi pop-up şeklinde kullanıcılarına sunuyor. Pop-up kullanmanın avantajına gelecek olursak, kullanıcıların sayfadan ayrılmadan giriş yapabilmelerini sağlar. Onları yeni bir sayfa yükünden kurtarır ve daha hızlı bir kullanıcı deneyimi sunar.

3. Church Motion Graphics

Hareketli grafik tasarım şirketinin giriş sayfası ise işlerinin neyle ilgili olduğunu yansıtan renkli bir arka plan kullanıyor. Giriş ekranında aynı site üstbilgi, altbilgi ve gezinme menülerini göstererek kullanıcılarına özel giriş formu sunuyor.

4. MITSLoan Management Review

MITSLoan Management Review web sitesi varsayılan WordPress giriş ekranını kullanıyor. WordPress markalamasını gizlemek ve kendi logolarını kullanmak için CSS kulanarak değiştiriyor.

Kullanıcılarına özel WordPress giriş sayfası deneyimi sunan websitelerine örnek verdikten sonra artık nasıl yapıldığını anlatmak istiyorum. Bunun için 2 farklı temadan bahsedeceğim.

Theme My Login Kullanarak WordPress Giriş Sayfası Oluşturma

İlk olarak Theme My Login eklentisini sitemize kurup aktif etmeliyiz. Websitenize nasıl bu eklentiyi kuracağınızı bilmiyorsanız benimle iletişime geçebilirsiniz.

Aktif ettikten sonra Theme My Login otomatik olarak linkleri oluşturuyor.

URL’leri değiştirmek için Theme My Login »General sayfasını ardından Slug kısmından bu işlemi gerçekleştirebilirsiniz.

Eklenti ile linkleri değiştirebileceğimiz gibi aynı zamanda giriş ve kayıt sayfasını da değiştirebiliriz.

Giriş sayfasından başlayalım.

Yeni bir WordPress sayfası oluşturmak için Sayfalar »Yeni Ekle’ye gidin. Sayfanıza bir başlık vermeniz ve ardından içerik alanına aşağıdaki “[tema-giriş bilgilerim”] kısa kodunu girmeniz gerekir.

Artık özel giriş sayfanızı görüntülemek için sayfanızı yayınlayabilir ve önizleme yapabilirsiniz.

Aşağıdaki kısa kodları kullanarak başka sayfalar oluşturmak için aynı işlemlere devam edebilirsiniz.

[theme-my-login action=”register”] Kayıt olma sayfası

[theme-my-login action=”lostpassword”] şifre unutma sayfası

[theme-my-login action=”resetpass”] parola sıfırlama sayfası

WPForms Kullanarak Özel bir WordPress Giriş Sayfası Oluşturma

WPForms, piyasadaki en iyi WordPress form oluşturucu eklentisidir. Kolayca web siteniz için özel giriş ve kayıt formları oluşturmanıza olanak sağlar.

WPForms, premium bir WordPress eklentisidir ve kullanıcı kayıt eklentisine erişmek için en azından pro özeliklere ihtiyacınız olacak. Eklentiyi araştırırken bir tane kupona denk geldim. Hala geçerliliği devam etmektedir. Kullanmak için tıklayınız. SAVE50

İlk olarak WPForms eklentisini yüklemek ve etkinleştirmek gerekiyor. WPForms eklentisini kuramayan varsa benimle iletişime geçebilirler.

Aktivasyon için, lisans anahtarınızı girmek gerekiyor. Öncelikle WPForms »Ayarlar sayfasını ziyaret etmeniz gerekir. Bu bilgiyi WPForms web sitesinde hesabınızın altında bulabilirsiniz.

Lisans anahtarını girdikten sonra eklentinin Add-on larını yükleyebilirsiniz. WPForms »Addons sayfasına tıklayın ve
“User Registration Addon” u bulun. Install Addona tıklayarak kurun.

Artık kendi özel giriş formlarınızı oluşturmaya hazırsınız.

WPForms » Add New ‘ye gidin ve “User Login Form” şablonuna gidin. Devam etmek için “Create a User Login Form” butonuna tıklamanız gerekiyor.

WPForms, Kullanıcı Giriş Formunu gerekli alanlarla birlikte yükleyecektir. Kendi tanımınızı veya etrafındaki metni eklemek için mavi alanları tıklayabilirsiniz.

Diğer ayarları da değiştirebilirsiniz. Örneğin, otomatik olarak düğme başlığı olarak button Submit’i ekler. Bunun yerine Giriş olarak değiştirebilirsiniz.

Bir kullanıcı başarıyla giriş yaptıktan sonra ne olacağına da karar verebilirsiniz. Settings » Confirmation sekmesine gidin ve bir eylem seçin.

Kullanıcıyı başka bir URL’ye yönlendirebilir, ana sayfaya yönlendirebilir veya şimdi giriş yaptıklarını bildirbilirsiniz.

Form ayarlarından memnun kaldığınızda, ekranın sağ üst köşesindeki Kaydet düğmesine tıklayın ve form oluşturucuyu kapatın.

Özel Giriş Formunu WordPress Sayfasına Eklemek

WPForms, herhangi bir WordPress gönderisine veya sayfasına özel giriş formunu eklemenizi oldukça kolaylaştırır.

Bunun için giriş formunu eklemek veya yeni bir tane oluşturmak istediğiniz sayfayı düzenleyin. Sayfa düzenleme ekranında, WPForms bloğunu içerik alanınıza ekleyin.

Ardından, daha önce oluşturduğunuz giriş formunu seçin; WPForms bloğu otomatik olarak içerik alanına yüklenir.

Artık giriş formu sayfasını düzenlemeye devam edebilir veya değişikliklerinizi kaydedip yayınlayabilirsiniz.

WordPress Giriş Sayfası Tasarımınızı Özelleştirme

Varsayılan olarak özel WordPress giriş sayfası temanızın sayfa şablonunu ve stillerini kullanır. Temanızın gezinme menüleri, üstbilgi, footer ve kenar çubuğu widgetları yer alacaktır.

Eğer tüm sayfayı tamamen düzenlemek ve sıfırdan bir şey tasarlamak istiyorsanız, herhangi bir WordPress sayfa oluşturucu eklentisini kullanabilirsiniz. Bunun için WordPress page builder diye google da aratıp bakabilirsiniz.

Bu eklentiler ile özel bir sayfa düzeni oluşturabilir ve ardından My Login veya WPForms tarafından sağlanan giriş widget’ını ekleyebilirsiniz.

Aşağıdaki ekran görüntüsünde, popüler Beaver Builder eklentisini kullandım. Tam ekran olarak arka plan resmi kullandım ve iki sütun ekledim. Bir sütuna bazı metinler ve bir düğme ekledim. Diğer sütuna WPForms widget’ını ekledim.

Beaver Builder’ın avantajı % 100 sürükle ve bırak özelliğine sahip olmasıdır.

Not: Zaten giriş yapmış olduğunuzdan, hem Theme My Login ve WPForms giriş sayfasının canlı bir önizlemesini göstermeyebilir. WPForms eklentisi, form ayarlarında bunu kapatabileceğiniz bir seçeneğe sahip oradan kapatabilirsiniz.

Tüm bunları yaparken formu ve giriş sayfasını kendi stilinize göre ayarlamak için özel CSS de kullanabilirsiniz.

WordPress Giriş Logosunu ve URL’sini değiştirin

Websiteniz için tamamen özel bir WordPress giriş sayfası oluşturmanıza gerek yoktur. Pek çok websitesi WordPress logosunu ve logosunu değiştirerek hala varsayılan giriş sayfasını kullanıyor.

Giriş ekranındaki WordPress logosunu kendi logonuzla değiştirmek istiyorsanız, bir WordPress eklentisini kullanarak veya özel kod ekleyerek kolayca yapabilirsiniz. Size en uygun olanı kullanabileceğiniz her iki yöntemi de size göstereceğim.

Eklenti kullanarak WordPress Giriş Logosunu ve URL adresini değiştirin

İlk olarak Colorlib Login Customizer‘ı yükleyip etkinleştiriyoruz. Nasıl yapacağınızı bilmiyorsanız bana ulaşabilirsiniz.

Eklentiyi aktif ettikten sonra WordPress admin kenar çubuğuna Custom Login Customizer adında yeni bir öğe ekler. Tıklayıp düzenleme sayfasını açıyoruz. Eklenti, solda kişiselleştirme seçenekleri ve sağda varsayılan WordPress giriş ekranınızı canlı önizleme ile yükler.

WordPress logosunu kendi logonuz ile değiştirmek için sağdaki “Logo Options” sekmesine tıklayın. Buradan WordPress logosunu gizleyebilir, kendi özel logonuzu yükleyebilir, logo URL’sini ve metnini değiştirebilirsiniz.

Eklenti, varsayılan WordPress giriş sayfasını tamamen kişiselleştirmenize de izin verir. Sütun, arka plan resmi ekleyebilir, giriş formu renklerini değiştirebilir ve daha fazlasını yapabilirsiniz.

Temel olarak, varsayılan WordPress giriş URL’sini değiştirmeden özel bir WordPress giriş sayfası oluşturabilirsiniz.

İşiniz bittiğinde, değişikliklerinizi kaydetmek için yayınla düğmesini tıklamanız yeterlidir. Özel giriş formunuzu çalışırken görmek için şimdi WordPress giriş sayfasına bakabilirsiniz.

Eklenti olmadan WordPress Giriş Logosunu ve URL adresini değiştirin (Kodlama ile)

Bu yöntem giriş ekranındaki WordPress logosunu kendi özel logonuzla manuel olarak değiştirmenize olanak sağlar.

Öncelikle, özel logonuzu medya kütüphanesine yüklemeniz gerekir.
Media » Add New ekle ve özel logonuzu yükleyin.

Resmi yükledikten sonra, yanındaki ‘Edit’ bağlantısını tıklayın. Bu, dosya URL’sini kopyalamanız ve bilgisayarınızdaki boş bir metin dosyasına yapıştırmanız gereken medya düzenleme sayfasını açar.

Ardından, temanızın functions.php dosyasına giriş yapmanız gerekmekte ve aşağıdaki kodu eklemeniz gerekmektedir.

function wpb_login_logo() { ?>
    <style type="text/css">
        #login h1 a, .login h1 a {
            background-image: url(RESİM LİNKİ BURAYA GELECEK);
        height:100px;
        width:300px;
        background-size: 300px 100px;
        background-repeat: no-repeat;
        padding-bottom: 10px;
        }
    </style>
<?php }
add_action( 'login_enqueue_scripts', 'wpb_login_logo' );

Arka plan resmi URL’sini daha önce kopyaladığınız dosya URL’siyle değiştirmeyi unutmayın. Özel logo resminize uyacak şekilde diğer CSS özelliklerini de ayarlayabilirsiniz.

Özel logonuzu çalışırken görmek için artık WordPress giriş sayfasını ziyaret edebilirsiniz.

Bu kod yalnızca WordPress logosunun yerini alır. WordPress.org web sitesine işaret eden logo bağlantısını değiştirmez.

Şimdi bunu da değiştirelim.

Aşağıdaki kodu temanızın functions.php dosyasına az önce eklediğiniz kodun hemen altına ekleyin.

function wpb_login_logo_url() {
    return home_url();
}
add_filter( 'login_headerurl', 'wpb_login_logo_url' );
 
function wpb_login_logo_url_title() {
    return 'SİTE ADI BURAYA YAZILACAK';
}
add_filter( 'login_headertitle', 'wpb_login_logo_url_title' );

‘Site Adınızı’ değiştirmeyi unutmayın. Giriş ekranınızdaki özel logoya tıklayınca sitenizin ana sayfasına yönlendirecektir.

Hepsi bu kadar. Bu makale sayesinde websiteniz için bir WordPress giriş sayfası oluşturmanın farklı yollarını öğrenmenize yardımcı olacağını umarım.

Dilerseniz WordPress Kullanıcıları İçin Post Oluşturma Limiti Ayarlama yazımı da okuyabilirsiniz.