İster tipik bir online mağaza işletiyor, ister kurs satıyor, listeler sağlıyor veya herhangi bir üyelik tabanlı içeriğe sahip olun, kullanıcılarınızın web sitenize kaydolması ve oturum açması için net bir yola ihtiyacınız var. WordPress oturum açma sayfası bu amaçla kullanılabilirken, kullanıcıları ilgi alanlarından varsayılan bir oturum açma sayfasına yönlendirdiği için pek kullanıcı dostu değildir. Web sitenize giriş yaptıktan sonra, kullanıcıların genellikle ilgilendikleri içeriğe nasıl erişecekleri konusunda kafaları karışır ve potansiyel dönüşümleri ve geliri kaybedersiniz.
Bu yüzden daha kullanıcı dostu bir özel oturum açma seçeneğine ihtiyaç vardır. Bu sorun için en iyi çözüm, kullanıcıların diğer sayfalara yönlendirilmeden web sitesinde kayıt olmalarına ve oturum açmalarına olanak tanıyan bir oturum açma açılır penceresi eklemektir. Bu yüzden web sitesindeki genel kullanıcı deneyimini iyileştirerek daha fazla satışa yol açar. Oturum açma açılır penceresi, web sitesinin çeşitli bölümlerine eklenebilir ve daha önce bahsedildiği gibi, büyüyen online mağazalarda ve üyelik web sitelerinde değerli bir varlık olduğunu kanıtlar. Bu yazıda, böyle bir giriş açılır penceresini WordPress web sitenize nasıl ekleyebileceğinizi açıklayacağız.
İşte ele alacağımız konu:
-
Oturum Açma/Kaydolma Açılır Eklentisini Kullanma
-
Oturum Açılır Penceresini Menü Öğesi Olarak Ekleme
-
Oturum Açılır Penceresini Bağlantı Olarak Ekleme
-
Kısa Kod Kullanarak Oturum Açılır Penceresini ve Satır İçi Formu Ekleme
-
Ek İpuçları
Login/Signup Popup eklentisini kullanma
Üyelik web siteleri iyi bilinen bir niş olduğundan, özel oturum açma ekranları, açılır pencereler ve benzeri işlevler sunan birçok WordPress eklentisi vardır. Bu işlevler temalara da entegre edilebilir. Bu yüzden bir eklentiye başvurmadan önce mevcut temanızın işlevlerini incelemelisiniz. Bu makalede, WordPress.org’un eklenti deposunu keşfederken bulduğumuz, özellikle bu amaç için yapılmış bir eklentinin tüm nüanslarını açıklayarak yalnızca eklenti yöntemini ele alacağız.
Login/Signup Popup eklentisi, kayıt işlemleri, parolaların sıfırlanması ve WooCommerce ile birleştirilebilen oturum açma açılır pencereleri eklemek için hafif bir eklentidir. Eklenti sosyal giriş, Google reCAPTCHA, özel kayıt alanları, tek seferlik şifre girişi ve e-posta doğrulama gibi ek premium özellikler sunarken, bu eklentinin ücretsiz özellikleri bu makale için fazlasıyla yeterli.
Eklentinin kendisi, tam anlamıyla kullanılması için oldukça fazla önceden WordPress bilgisi gerektirdiğinden, orta düzey WordPress kullanıcıları için tasarlanmıştır. Bununla birlikte tüm WordPress kullanıcıları tarafından kullanılabilmesi için aşağıdaki eklentinin tüm nüanslarını açıklamak için elimizden gelenin en iyisini yaptık. Bununla birlikte makalenin ana bölümüne geçelim.
Eklentiyi kurup etkinleştirdikten sonra, Oturum Açma/Kayıt Açılır Penceresi bölümüne gidin. Bu bölümün, eklentinin kullanımına ilişkin tüm seçeneklerin ayarlandığı Ayarlar ve Alanlar olmak üzere iki alt bölümü vardır. Bu alt bölümlerin her ikisi de ilgili seçenekleri içeren sekmelere bölünmüştür. Bu makale için yalnızca eklentinin ücretsiz işlevlerine odaklanacağız. Eklentiler sekmesinde premium eklentileri ele almayacağız.
Bunu söyledikten sonra, seçenekleri ele alalım. Ayrı sekmelere bölünmüş olsalar da, onları iki kategoriye ayırmanın daha uygun olduğunu düşünüyoruz – oturum açma açılır penceresinin işlevselliği ile ilgili olanlar ve stilizasyonu için kullanılanlar. Bunları da yazının ilerleyen kısımlarında bu şekilde açıklayacağız.
Oturum açma açılır penceresinin işlevselliğini ayarlamak için, Oturum Açma/Kayıt Açılır Penceresi > Ayarlar bölümünde bulunan Genel sekmesiyle başlamalıyız. İçinde, kayıt işlemini etkinleştirebilir, kayıt olduktan sonra varsayılan kullanıcı rolünü ayarlayabilir, kaydolduktan sonra otomatik oturum açmayı etkinleştirebilir ve şifreyi sıfırlama imkanını kullanabilirsiniz. Ek olarak kayıt işleminin düzgün çalışması için, yönetici panelinizin Ayarlar> Genel bölümünde bulunan “Herkes kayıt olabilir” seçeneğini de etkinleştirmeniz gerekir.
Genel sekmesinin Ana alt bölümünde, oturum açtıktan, kaydolduktan veya oturumu kapattıktan sonra ve başarılı bir oturum açma veya kaydın URL’ye aşağıdaki etiketleri ekleyerek URL’ye yansıtılıp yansıtılmayacağının yanı sıra yeniden yönlendirmeler ayarlayabilirsiniz – “login =başarı” veya “kayıt=başarı”, yapılan işleme bağlı olarak.
Bunu takiben, eklenti tarafından sağlanan formlar, etkinleştirilmişse, WooCommerce’in Hesabım sayfası formunu ve Ödeme sayfasındaki giriş formunu değiştirmek için de kullanılabilir.
Ek olarak bu eklenti tarafından sağlanan oturum açma penceresinin otomatik olarak açılmasını da ayarlayabilirsiniz. Bu durum tüm sayfalar için, bir kez veya her zaman veya yalnızca belirli sayfalar için ayarlanabilir. Oturum açma açılır penceresinin otomatik olarak görüneceği sayfaları belirtmek için bir sayfa/yazı kimliği veya sayfa/yazı bilgisi ekleyin. Tabii ki, bu seçeneği tam anlamıyla kullanmak, sayfa/yazı kimliklerini ve kalıcı bağlantı bilgilerini nasıl bulacağınızı bilmenizi gerektirir.
Son olarak oturum açma açılır penceresini otomatik olarak açmayı seçerseniz, bir sayfa yüklendikten sonra açılır pencerenin görünmesi için gecikme süresini de seçebilirsiniz. Gecikme, varsayılan değer olarak 500ms yani yarım saniye ile milisaniye cinsinden ifade edilir.
Bu durum Genel sekmesinde bulunan seçeneklere genel bakışı sonlandırır. Amaçlarını bilerek, ihtiyaçlarınıza göre ayarlayabilirsiniz. Bunu yaptıktan sonra, seçimlerinizi kaydetmek için alttaki “Kaydet” düğmesine basın.
Giriş/kayıt açılır penceresinin işlevselliği ile ilgili kalan seçeneklere geçiyoruz. Daha doğrusu bunlar, kayıt formunun alanlarını, yani açılır pencerenin Kaydol sekmesindeki alanları özelleştirmenizi sağlar.
Alanlar sekmesindeki Oturum Açma/Kayıt Açılır Penceresi > Alanlar bölümüne giderek veya Oturum Açma/Kaydolma Açılır Penceresi > Ayarlar bölümüne gidip Kayıt Alanları seçeneğinin yanındaki “Yönet” bağlantısını tıklayarak bunlara erişin. Ne yazık ki, mevcut alanları yalnızca her biri için sağlanan seçeneklerle düzenleyebilirsiniz. Kayıt formunu yeni alanlarla genişletmek, premium eklenti eklentilerinden biriyle sınırlıdır.
Kayıt/kayıt formundaki alanların birkaç farklı düzenlenebilir yönü vardır. Bunlar elbette alana bağlıdır ve alan etiketi, yer tutucu metin, simge, forma dahil edilip edilmemesi ve formun toplam genişliğinin yüzde kaçını alması gerektiğini içerir.
Hatta bazı alanlar için karakter sınırlarını belirleyebilir, ekstra CSS sınıfları ekleyebilir, gizlilik politikası metni ve bağlantısı ekleyebilir ve hatta WooCommerce faturalandırma ve gönderim alanlarını Ad ve Soyadı alanlarının içeriğiyle otomatik olarak doldurabilirsiniz.
Yine bu alanlar, Kayıt Ol sekmesinde bulunan kayıt formunun bir parçasıdır ve özellikleri ihtiyaçlarınıza göre düzenlenmelidir. Bunu yaptıktan sonra, seçimlerinizi kaydetmek için ekranın sağ üst köşesindeki “Kaydet” düğmesine tıkladığınızdan emin olun. Ek olarak Hüküm ve Koşullar alanını kontrol etmeli ve bir HTML bağlantı etiketi kullanılarak eklendiğinden, Gizlilik Politikası sayfanızın bağlantısının doğru şekilde bağlandığından emin olmalısınız.
Bunu söyledikten sonra, oturum açma açılır formlarını şekillendirmeye yönelik eklenti seçeneklerine değinelim. Bu seçeneklerin ilk kısmı Stil sekmesinde Oturum Açma/Kaydolma Açılır Penceresi > Ayarlar bölümünde bulunur. Burada, aşağıdaki seçenekleri ayarlayabilirsiniz: açılır pencerenin ekrandaki konumu, boyutları, o açılır pencerenin parçası olan oturum açma ve kayıt formlarının etrafındaki dolgu, açılır pencerenin arka plan rengi, içindeki metnin rengi açılır pencere, açılır pencereyle birlikte kullanılan görüntü, açılır pencerenin sol veya sağ tarafında konumlandırılıp konumlandırılmadığı ve toplam genişliğin yüzde kaçını kapladığı.
Tüm bu seçenekler basittir, bu yüzden onlara daha fazla girmeyeceğiz. Kenar çubuğu görüntüsünün yalnızca daha geniş ekranlar için olduğunu not edeceğiz. Daha küçük ekranlarda yalnızca Oturum Aç ve Kaydol sekmesi gösterilecektir. Sunulan seçeneklerden bu açık olmadığı için, belirtmenin en iyisi olduğunu düşündük.
Oturum açma açılır penceresinin oturum açma ve kayıt formlarıyla ilgili stilizasyon seçeneklerinin ikinci bölümüne geçiyoruz. Form alt bölümünden sekmelere ve sekmelerdeki butonlara ilişkin özellikleri ayarlayabilirsiniz. Bunlar hem etkin hem de etkin olmayan sekme için bir sekmenin arka plan rengini ve içindeki metnin rengini içerir. Düğmelere gelince, bunların arka plan rengini, metin rengini, yüksekliğini ve kenarlık özelliklerini ayarlayabilirsiniz.
Tabii ki, bunu yalnızca Özel düğme tasarımı seçeneğini seçerseniz yapın. Bu durum tercihinize bağlı olarak daha sonra değiştirilebilecek bir şeydir. Fakat seçimlerinizi kaydetmek ve web sitesinde uygulamak için stil seçeneklerini seçtikten sonra “Kaydet” düğmesine tıkladığınızdan emin olun.
Son olarak Login/Signup Popup > Fields bölümüne ait Settings sekmesinde bulunan stilizasyon seçeneklerinin son kısmına geliyoruz. Alternatif olarak Oturum Açma/Kayıt Açılır Penceresi > Ayarlar bölümündeki Form Alanları Stili seçeneğinin yanındaki “Yönet” bağlantısını tıklayarak bu sekmeye erişebilirsiniz.
Alanlar bölümündeki Ayarlar sekmesi, oturum açma ve kayıt formlarının alanları için stilizasyon seçeneklerini içerir. Bunlar ilgili alanların yanına simgelerin eklenip eklenmeyeceğini, bunların boyutunu, rengini, kap genişliğini ve simge kabının arka plan rengini içerir. Hatta form alanlarının kenarlık rengini ve alt kenar boşluklarını da ayarlayabilirsiniz. Ve özellikle her formun çoğunluğunu oluşturan giriş alanları için, metnini ve arka plan rengini hem odaklanmışken hem de odaklanmamışken ayarlayabilirsiniz.
Daha önce olduğu gibi, bu stilizasyon seçeneklerini tercihinize göre bu noktada veya daha sonra ayarlayabilirsiniz. Fakat şimdi yapmayı seçerseniz, Ayarlar sekmesinin altında bulunan “Değişiklikleri Kaydet” düğmesine tıklamayı unutmayın.
Bu durum eklenti tarafından sağlanan stilizasyon seçeneklerine genel bakışımızı sonlandırıyor. Fakat kasıtlı olarak en sona bıraktığımız iki önemli sekme var. Bunlar Oturum Açma/Kaydolma Açılır Penceresi > Ayarlar bölümünde bulunan Gelişmiş ve Bilgi sekmeleridir.
Gelişmiş sekmesi, oturum açma açılır penceresini ve bileşenlerini sağlanan seçeneklerden daha fazla stilize etmek için ihtiyaç duyabileceğiniz herhangi bir özel CSS’yi depolamak için tasarlanmıştır. Makaleyi oluştururken bu sekmeyi kullanmadık. Bunun yerine, bir WordPress web sitesine CSS kodu eklemek için varsayılan konum olan Görünüm > Özelleştir > Ek CSS bölümünü kullandık.
Bilgi bölümüne gelince, mevcut oturum açma açılır penceresini uygulamanın tüm olası yollarını görüntüler. Bu yüzden bu eklenti ile oturum açma açılır penceresinin nasıl ekleneceğine ilişkin bir kullanım kılavuzudur.
Bununla birlikte bu talimatların çoğu yeni WordPress kullanıcılarına uygun olmadığından, tüm bu kullanımları ayrı alt bölümlerde özellikle ele almaya karar verdik. WordPress kullanıcılarının tümü olmasa da çoğu tarafından anlaşılabilmeleri için bunları mümkün olduğunca kapsamlı bir şekilde ele almaya çalışacağız. Daha sonra tercihinize bağlı olarak web siteniz için en uygun oturum açma açılır penceresini uygulamanın yollarını seçebilirsiniz. Bunu söyledikten sonra başlayalım.
Oturum Açılır Penceresini Menü Öğesi Olarak Ekleme
Bilgi sekmesinde belirtilen dört yöntemden, oturum açılır penceresini bir menü öğesi olarak eklemek en kullanıcı dostu ve en sık kullanılan yöntemdir. Bu sebeple öncelikle onu da ele alacağız.
Oturum açma açılır penceresini bir menü öğesi olarak eklemek için Görünüm > Menüler’e gidin ve düzenlemek istediğiniz menüyü seçin. Soldaki Menü öğeleri ekle bölümünde Oturum Açma/Kaydolma Açılır menü öğeleri türünü bulun. Bu alt bölümü genişleterek, eklentinin desteklediği tüm menü öğelerini göreceksiniz. Bunlar arasında oturum açma, kayıt olma, kayıp parola, oturum kapatma, iki merhaba menü öğesi ve hesabım menü öğesi yer alır. Bu menü öğelerinden ilk üçü yalnızca oturumu kapatmış kullanıcılar tarafından görülebilirken geri kalanı yalnızca oturum açmış kullanıcılar tarafından görülebilir. İlk üçü, giriş açılır penceresinin bir parçasıdır ve bu makalede neleri göstereceğiz.
Bu öğelerden herhangi birini seçilen menüye eklemek istiyorsanız, yanındaki onay kutusunu işaretleyin ve aşağıda bulunan “Menüye ekle” düğmesini tıklayın.
Seçilen menü öğesi/öğeleri menünün sonuna eklenecektir. Fakat onu seçili menüde herhangi bir yere sürükleyip bırakabilirsiniz. Bu yazı için mevcut menünün sonuna Login menü öğesini eklemeyi seçtik. Eklenti tarafından verilen özel bir CSS sınıfı xoo-el-login-tgr ile özel bir bağlantı olarak eklenecektir.
Elbette, eklediğiniz menü öğesine bağlı olarak ön eki olan farklı bir CSS sınıfı görebilirsiniz…