blog posts

Özel WordPress kayıt formu tasarımı (eklentili ve eklentisiz)

WordPress web siteniz güçlü bir kullanıcı yönetim sistemine sahiptir. Bu sistem aracılığıyla kullanıcılar çevrimiçi mağazalara, abonelik web sitelerine ve bloglara kaydolabilirler. WordPress ile kayıt formu oluşturma eklentili ve eklentisiz olarak değiştirilebilir. Yazılı dergideki bu yazımızda WordPress kayıt formunu tasarlamayı Özel WordPress kayıt formu tasarımı amaçlıyoruz.

WordPress kayıt formu

Varsayılan olarak, giriş formunda WordPress logosu ve markalama görüntülenir. Küçük bir web siteniz varsa veya kullanıcı odaklı bir işletmeniz yoksa bu makaleyi okumanıza gerek yok.

WordPress kayıt formu

Ancak kullanıcılar web sitenize kaydolup giriş yapabiliyorsa özel giriş sayfası daha iyi bir kullanıcı deneyimi sağlar. Giriş sayfasının markanızla hiçbir ilgisi yoksa bazı kullanıcılar şüphelenecektir. Özel kayıt sayfasında kullanıcıyı diğer sayfaları ve teklifleri görmeye teşvik edebilirsiniz. Şimdi WordPress’teki özel giriş ve kayıt sayfalarının bazı örneklerine göz atalım.

WordPress giriş sayfası tasarım örneği

Web sitesi sahipleri, farklı stil ve yöntemleri kullanarak sayfayı ve giriş formunu özelleştirebilir. Bazıları web sitesinin tasarımına ve rengine sahip bir açılış sayfası oluşturur. Diğerleri bir arka plan, renk ve logo ekleyerek varsayılan sayfayı değiştirir. Aşağıda WordPress kayıt sayfası ve formunun bazı örnekleri verilmiştir.

WPFormları

Piyasadaki en iyi WordPress iletişim formu eklentisi WPForms’tur. Bu arada, bu eklentinin WordPress kayıt formunu tasarlamaya yönelik bir aracı var ve bunu makalenin ilerleyen kısımlarında tanıtacağız.

WPFormları

Bu işletmenin özel giriş sayfası kolay katmanlama kullanıyor. Sol sütun giriş formunu içerir ve sağ sütun promosyonları ve diğer harekete geçirici mesaj düğmelerini vurgulamak için kullanılır. WPForms oturum açma sayfası kullanıcıların yeni özellikleri görmesine olanak tanır. Bu sayfada benzersiz bir giriş deneyimi oluşturmak için markalama, arka plan görselleri ve özel marka renkleri kullanılır.

Jacquelynne Steves

Jacquelynne Steves, ev dekorasyonu, kapitone, desenler, nakışlar ve daha fazlası hakkında içerik yazdığı bir sanat ve el sanatları web sitesidir.

Jacquelynne Steves

Giriş sayfaları, web sitesinin temasıyla eşleşen benzersiz bir arka plan resmi kullanır ve giriş formu sağ taraftadır.

Kilise Hareketli Grafikleri

Bu hareketli grafik tasarım şirketinin giriş sayfası, işletmenin çalışma alanını yansıtan renkli bir arka plan kullanıyor.

Kilise Hareketli Grafikleri

Giriş sayfasındaki site üstbilgisi, altbilgisi ve gezinme listeleri diğer sayfalarla aynıdır. Giriş formu, açık renkli bir arka planla çok basit bir şekilde tasarlanmıştır.

MITS Kredi Yönetimi İncelemesi

MITSloan Management Review, WordPress kayıt formunu tasarlamak için açılır pencere yöntemini kullanır.

MITS Kredi Yönetimi İncelemesi

Pop-up kullanmanın avantajı kullanıcıların sayfadan ayrılmadan giriş yapabilmesidir. Artık yeni bir sayfa yüklemeye gerek yok ve kullanıcı deneyimi daha hızlı hale geliyor. Şimdi WordPress giriş sayfasının nasıl oluşturulacağını öğrenmeye hazır mısınız?

Theme My Login’i kullanarak WordPress kayıt formu tasarımı

Ücretsiz Theme My Login eklentisi, giriş sayfanızı WordPress temanıza uyacak şekilde değiştirir. Çok fazla özelleştirme seçeneği yoktur ancak varsayılan WordPress logo sayfasının yerini alır ve web sitesine daha profesyonel bir görünüm kazandırır. Öncelikle Theme My Login eklentisini kurun ve etkinleştirin. Etkinleştirildiğinde, Giriş Temam, WordPress kayıt sayfası ve giriş, çıkış, şifremi unuttum ve şifre kurtarma seçenekleri gibi diğer önemli sayfalar için otomatik olarak URL’ler oluşturacaktır.

Sayfa URL’lerini Tema Girişim >> Genel sayfasından değiştirebilirsiniz. Eklentinin varsayılan URL’lerini değiştirmek için Sümüklüböcekler bölümüne gidin.

Theme My Login'i kullanarak WordPress kayıt formu tasarımı

Tema Girişim eklentisinde, giriş ve kayıt sayfaları oluşturmak için kısa kodları da kullanabilirsiniz. Her eylem için kolayca bir sayfa oluşturun ve eklentinin görünüp kullanıcıları oraya götürebilmesi için eklentiyi koyun.

Giriş sayfasıyla başlayalım.

  • Sayfa >> Yeni Ekle’ye gidin ve yeni bir WordPress sayfası oluşturun. Daha sonra, sayfa için bir başlık seçmeli ve [girişim teması] kısa kodunu sayfaya koymalısınız.

Theme My Login ile WordPress kayıt formu tasarımı

  • Artık sayfayı yayınlayabilir ve özel giriş sayfanızın işlevselliğini test edebilirsiniz. Test sitemizdeki giriş formu bu şekildedir.

Test web sitesindeki giriş formu

  • Aşağıdaki kısa kodları kullanarak başka sayfalar oluşturmak için aynı işleme devam edin.
  • Kayıt formu için [theme-my-login action=”register”].
  • Şifremi unuttum sayfası için [theme-my-login action=”lostpassword”]
  • Şifre sıfırlama sayfası için [theme-my-login action=”resetpass”].

WPForms kullanarak WordPress’te kayıt formu tasarlama

WordPress’teki en iyi form oluşturma eklentilerinden biri WPForms’tur. Web siteniz için kolayca özel giriş ve kayıt formları oluşturabilirsiniz. WPForms ücretli bir eklentidir ve kayıt formu oluşturma özelliklerine erişmek için profesyonel planını almanız gerekir. save50 kodunu kullanarak planınızda %50 indirimden yararlanabilirsiniz.

Öncelikle WPForms eklentisini kurun ve etkinleştirin. Etkinleştirmeden sonra WPForms >> Ayarlar’a gidin ve lisans anahtarını girin. Anahtar ve ilgili bilgiler WPForms web sitesindeki hesabınızda bulunur.

WPForms kullanarak WordPress'te kayıt formu tasarlama

Lisans anahtarını girdikten sonra eklenti ekleyebilmelisiniz. WPForms >> Eklentiler sayfasına gidin ve Kullanıcı Kayıt Eklentisini bulun.

Kullanıcı Kayıt Eklentisi

Daha sonra indirip etkinleştirmek için Eklentiyi Yükle’ye tıklayın. Artık özel giriş formları oluşturmaya hazırsınız. WPForms >> Yeni Ekle sayfasına gidin ve Kullanıcı Giriş Formu şablonunu bulun. Şablonu Kullan düğmesini tıklayın.

Eklentiyi Yükle

WPForms, kullanıcı oturum açma formunu gerekli alanlarla yükler. Alanın çevresine bir açıklama veya metin eklemek için alanı tıklayın.

WPForms ile form oluşturma

Ayrıca diğer ayarları da değiştirebilirsiniz. Örneğin, düğmenin varsayılan başlığı Gönder sözcüğüdür. Düğmeye tıklayıp Giriş olarak değiştirebilirsiniz.

Ayrıca, kullanıcı oturum açtıktan sonra etkinliği ayarlayabilirsiniz. Ayarlar >> Onay sekmesine gitmeniz ve bir eylem seçmeniz gerekir. Seçici eylemler arasında kullanıcıyı başka bir URL’ye yönlendirmek, kullanıcıyı ana sayfaya yönlendirmek veya kullanıcının başarıyla oturum açtığına dair bir mesaj görüntülemek yer alır.

Kullanıcı oturum açtıktan sonraki etkinlik

Form ayarlarını istediğiniz gibi değiştirdiğinizde sağ üst köşedeki Kaydet düğmesine basın ve form oluşturucuyu kapatın.

WordPress sayfasına özel bir giriş formu ekleme

Özel bir giriş formunu bir WordPress gönderisine veya sayfasına yerleştirmek WPForms ile kolaydır. Formu yerleştirmek veya yeni bir sayfa oluşturmak için istediğiniz sayfanın düzenle düğmesini tıklayın. Ardından, WPForms bloğunu sayfanın içerik bölümüne ekleyin.

WordPress sayfasına özel bir giriş formu ekleme

Şimdi daha önce oluşturduğunuz formu seçin; WPForms onu otomatik olarak istediğiniz alana yükleyecektir. Son olarak sayfa değişikliklerini kaydedin ve yayınlayın.

SeedProd kullanarak WordPress kayıt formu tasarımı

WordPress giriş ve kayıt formu sayfası, varsayılan olarak tema sayfasının şablonunu ve stilini kullanır. Sayfada temaya özel gezinme listeleri, üstbilgiler, altbilgiler ve kenar çubuğu widget’ları bulunur. Sayfanın tamamını sıfırdan tasarlamak istiyorsanız WordPress sayfa oluşturucu eklentisi işinize yarayacaktır.

SeedProd, en iyi WordPress sayfa oluşturucularından biridir. SeedProd’un sürükle ve bırak modu, giriş sayfası, yakında sayfası, bakım sayfası ve daha fazlası dahil olmak üzere her türlü açılış sayfasını oluşturmanıza olanak tanır. Bu makale için SeedProd’un pro sürümünü kullandık çünkü bir giriş sayfası şablonuna ve özelleştirme için gelişmiş sayfa bloklarına sahiptir. SeedProd’un ücretsiz bir sürümü de var, ancak WordPress web sitenizde bir giriş sayfası oluşturma seçeneği bulunmuyor.

Öncelikle SeedProd eklentisini web sitenize yüklemeniz gerekir. Eklenti etkinleştirildikten sonra WordPress yönetici alanındaki SeedProd sayfasına yönlendirileceksiniz. Burada lisans anahtarınızı yazıp Anahtarı doğrula butonuna tıklamanız gerekmektedir. Anahtarı SeedProd web sitesinden satın alabilirsiniz.

SeedProd kullanarak WordPress kayıt formu tasarımı

Ardından SeedProd giriş sayfanızı oluşturmaya hazırsınız. Başlamak için SeedProd >> Açılış Sayfaları’na gidin ve Oturum Açma Sayfası Ayarla düğmesini tıklayarak Oturum Açma Sayfası seçeneğini seçin.

SeedProd >> Açılış Sayfaları

Bir sonraki sayfada giriş sayfanız için bir şablon seçebilirsiniz. Ayrıca Boş Şablonu kullanarak sıfırdan bir sayfa oluşturabilirsiniz. Ancak bir şablon kullanmanızı öneririz çünkü onu beğeninize göre özelleştirmek daha kolay ve hızlıdır.

Şablonu seçtikten sonra bir açılır pencere açılacak ve sizden sayfanın adını isteyecektir. SeedProd ayrıca adresi için sayfanın adını kullanır. Ayrıntıları yazdıktan sonra Kaydet ve Sayfayı Düzenlemeye Başla düğmesine basın.

Sayfayı Kaydet ve Düzenlemeye Başla düğmesi

Artık SeedProd’un Tasarım sekmesindeki sürükle/bırak sayfa oluşturucusunu kullanarak giriş sayfanızı düzenleyebilirsiniz. Bu sayfa oluşturucuda soldaki listeden herhangi bir bloğu sürükleyebilir ve sayfanın herhangi bir yerine bırakabilirsiniz.

Örneğin giriş sayfasına metin, video veya yeni bir düğme ekleyebilirsiniz. Geri sayım sayacını, sosyal medya simgelerini ve daha fazlasını bulabileceğiniz Gelişmiş Bloklar bölümünde daha fazla özelleştirme seçeneği vardır. Çöp kutusu simgesine tıklayarak mevcut şablon bloklarını bile silebilirsiniz.

SeedProd sürükle/bırak sayfa oluşturucu

Daha sonra, giriş sayfasının herhangi bir bölümünü tıklarsanız tonlarca özelleştirme seçeneği göreceksiniz. Örneğin, boşlukların metnini ve rengini değiştirebilir, yeni bir yazı tipi seçebilir, düğmenin rengini düzenleyebilir vb.

Giriş sayfası tasarımı

Giriş sayfasının tasarımından memnun kaldığınızda üst kısımdan Bağlan sekmesine girin. Bu bölümde Constant Contact, Drip ve SendinBlue gibi farklı e-posta pazarlama hizmetlerini forma bağlayabilirsiniz.

SendinBlue

Daha sonra sayfa ayarları sekmesine gitmeniz gerekiyor. Genel Ayarlar’da sayfanın başlığını ve durumunu taslaktan yayına değiştirebilirsiniz.

Genel Ayarlar

SEO ayarları aynı zamanda açılış sayfasını arama motorları için optimize etmek istediğiniz durumlara da yöneliktir. Bunun için All In One SEO eklentisini yüklemeniz gerekir.

Hepsi Bir Arada SEO eklentisi

Komut dosyası ayarları bölümünde giriş sayfasına farklı kod parçacıkları koyabilirsiniz. Örneğin sayfaya Google Analytics kodunu, Facebook pikselini veya başka bir izleme kodunu eklemeniz gerekebilir.

İzleme kodları

Artık sayfa ayarlarını değiştirdiğinize göre Kaydet düğmesine tıklayın. Daha sonra giriş sayfasını etkinleştirmeniz gerekir. Bunu yapmak için sayfa oluşturucudan çıkın ve SeedProd >> Açılış Sayfaları’na gidin. Bu bölümde sayfanın durumunu Etkin Değil’den Etkin’e değiştirebilirsiniz.

SeedProd >> Açılış Sayfaları

Sayfayı görüntülemek için URL’sini yazın ve enter tuşuna basın. Aşağıda SeedProd’un sayfa oluşturucusu ile oluşturulan giriş sayfasının ekran görüntüsü bulunmaktadır.

SeedProd sayfa oluşturucuyla oluşturulan giriş sayfasının ekran görüntüsü

Bu eklenti ile WordPress kayıt formu oluşturmanın çok basit olduğunu gördünüz. Sayfa oluşturucu eklentilerinin özellikleri size yetmiyorsa CSS kodlarını kullanarak giriş sayfasının stilini değiştirebilirsiniz.

Siteye cep telefonu numarası ile giriş formu (Digits eklentisi)

Son zamanlarda bazı web sitelerinde eski kayıt ve e-posta adresiyle giriş yapma yöntemlerine cep telefonu numarasıyla giriş yapmayı eklediklerini görmüş olabilirsiniz. Cep telefonu numarasıyla giriş yapmanın avantajlarından biri de orijinal şifreyi unutmanız durumunda kullanılabilecek tek kullanımlık şifredir.

Digits eklentisi, telefon numarasıyla giriş formu oluşturmak için en popüler kullanıcı kayıt eklentisidir. Bu eklentinin popülaritesinin nedenleri arasında Android ve iOS işletim sistemleriyle uyumluluk, İran SMS panelleri (120 panel) ve yabancı (170 panel) ile uyumluluk, kullanıcı dostu ve akıllı tasarım, kapsamlı istatistik sistemi ve farklı yöntemlerle kimlik doğrulamayı sayabiliriz. 

WordPress’in logosunu ve giriş URL’sini değiştirin

Bir WordPress kayıt formunu her zaman sıfırdan tasarlamaya başlamanız gerekmez. Aslında çoğu web sitesi varsayılan giriş sayfasını korur ve logosunu ve URL’sini değiştirir. Bir eklenti veya kodlama kullanarak varsayılan WordPress logosunu kendi logonuzla kolayca değiştirebilirsiniz. Size her iki yöntemi de gösteriyoruz.

Eklentiyi kullanarak WordPress girişinin logosunu ve URL’sini değiştirme

Öncelikle Colorib Login Customizer eklentisini kurup etkinleştirmeniz gerekiyor. Etkinleştirmeden sonra bu eklenti, WordPress tema özelleştiricisine yeni bir menü ekler. Görünüm >> Özelleştir’e gidin ve oturum açma özelleştiriciyi başlatmak için Colorib Oturum Açma Özelleştirici’ye tıklayın.

Eklentiyi kullanarak WordPress girişinin logosunu ve URL'sini değiştirme

Giriş sayfası özelleştirici, varsayılan WordPress sayfasını solda kişiselleştirici seçenekleri ve sağda önizlemesi olacak şekilde yükler. WordPress logosunu değiştirmek için sağ taraftaki Logo seçenekleri sekmesine tıklayın.

Giriş sayfası özelleştirici

Bu bölümde WordPress logosunu gizleyebilir, özel logonuzu yükleyebilir ve logonun URL’sini ve metnini değiştirebilirsiniz. Ayrıca metnin boyutunu ve rengini, logonun uzunluğunu ve genişliğini özelleştirmek mümkündür.

Özel logo

Bu eklentiyi kullanarak WordPress giriş sayfasını ve formunu tamamen değiştirebilirsiniz. Örneğin, sütunlar ve arka plan resimleri ekleyin veya oturum açma formunun renklerini değiştirin. Temel olarak, URL’yi değiştirmeden giriş sayfasını özelleştirebilirsiniz. İşiniz bittiğinde değişiklikleri kaydetmek için Yayınla düğmesine basın. Artık değişiklikleri görmek için WordPress giriş sayfasını ziyaret edebilirsiniz.

Giriş sayfası logosunu ve adresini eklenti olmadan değiştirme (kodlama)

Bu şekilde özel logonuzu kaynak kodu aracılığıyla manuel olarak WordPress logosuyla değiştirebilirsiniz. Bu sayede herhangi bir eklentiye ihtiyaç duymazsınız.

Öncelikle logonuzu web sitesinin medya kitaplığına yüklemeniz gerekir. Bunu yapmak için Medya >> Yeni Ekle’ye gidin. Resmi yükledikten sonra yanındaki “Düzenle” kelimesine tıklayın. Şimdi oradan dosya bağlantısını kopyalayıp boş bir dosyaya yapıştırın, böylece daha sonra erişebilirsiniz. Daha sonra kaynak koduna gidip şablonunuzun function.php dosyasına aşağıdaki kodu eklemeniz gerekiyor.

function wpb_login_logo() { ?>

    <style type="text/css">

        #login h1 a, .login h1 a {

            background-image: url(http://path/to/your/custom-logo.png);

        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' );

4. satırdaki arka plan resminin adresini logo dosyanızın adresiyle değiştirmeye dikkat edin. Ayrıca CSS kullanarak logonuza daha fazla renk ve parlaklık katabilirsiniz. Şimdi özel logonuzu görmek için WordPress giriş sayfasını ziyaret edin.

Giriş sayfası logosunu ve adresini eklenti olmadan değiştirme (kodlama)

Ancak bu kod yalnızca WordPress logosunu değiştirir ve WordPress.org web sitesine işaret ederek bağlantıyı değiştirmeden bırakır. Bunu da değiştirelim. Aşağıdaki kodu şablon işlev dosyanıza eklemeniz yeterlidir. Bu kodu önceki kodun altına koyabilirsiniz.

function wpb_login_logo_url() {

    return home_url();

}

add_filter( 'login_headerurl', 'wpb_login_logo_url' );

  

function wpb_login_logo_url_title() {

    return 'Your Site Name and Info';

}

add_filter( 'login_headertitle', 'wpb_login_logo_url_title' );

Site Adınız ve Bilgilerinizi sitenizin gerçek adıyla değiştirmeye dikkat edin. Artık özel giriş sayfası logosu sitenin ana sayfasını ifade etmektedir.

WordPress giriş sayfasında dil değiştiriciyi devre dışı bırakma

WordPress 5.9 sürümünde, web sitesi giriş sayfasına, kullanıcının giriş yaparken tercih ettiği dili seçmesine olanak tanıyan bir açılır menü eklendi. Web sitesinde birden fazla aktif dil varsa bu seçenek görünecektir.

WordPress giriş sayfasında dil değiştiriciyi devre dışı bırakma

Bu seçenek, çok dilli web siteleri ve farklı kullanıcılara sahip ekipler için çok kullanışlıdır; Çünkü WordPress kontrol panelini farklı dillerde kullanmaları gerekiyor. Ancak giriş sayfasını basit tutmak istiyorsanız ve kullanıcılarınızın farklı dillere ihtiyacı yoksa eklentili veya eklentisiz olarak kaldırmalısınız.

Dil değiştiriciyi eklentiyle devre dışı bırakma

Tek yapmanız gereken Oturum Açma Dil Değiştiricisini Devre Dışı Bırak eklentisini yüklemek ve etkinleştirmek. Bu eklenti etkinleştirildiği anda giriş sayfasındaki dili değiştirme yeteneği kaybolacaktır. Yapılandırılacak başka ayar yok.

Dil değiştiriciyi eklentiyle devre dışı bırakma

Artık web sitesinin giriş sayfasına gittiğinizde dil değiştirici olmadan standart ve basit giriş görselini göreceksiniz.

Dil değiştiriciyi kodlayarak devre dışı bırakma

Dil değiştiriciyi devre dışı bırakmanın başka bir yolu da WordPress’e kod eklemektir. Aşağıdaki kodu function.php dosyasına eklemeniz yeterlidir.

add_filter( 'login_display_language_dropdown', '__return_false' );

Çözüm

Umarım bu makale web sitenizin giriş sayfasını istediğiniz gibi oluşturmanıza yardımcı olmuştur. WordPress’in içerisinde binlerce eklenti ile birleştirilmiş ve en güçlü içerik yönetim sistemini oluşturan birçok özellik bulunmaktadır.