WordPress’te Sayfa Oluşturucu Kullanmadan Popup Nasıl Oluşturulur?

WordPress'te popup hazırlamak için sayfa oluşturucu kullanmanız gerekmez. Özel bir popup eklentisi çoğu kampanyayı yönetebilir. Tek ve basit bir pencereye ihtiyaç duyan geliştiriciler ise küçük bir özel çözüm hazırlayabilir.

Ancak kullanılan araç tek başına iyi sonuç vermez. Yanlış anda açılan, mobilde sayfayı kapatan veya her ziyarette yeniden görünen bir popup, tasarımı ne kadar şık olursa olsun kullanıcıyı rahatsız eder. Mesaj, tetikleyici, hedef kitle ve kapatma davranışı en az tasarım kadar önemlidir.

Önce kampanyanın amacını, hedef kitlesini, tetikleyicisini ve gösterim sıklığını belirleyin. Çoğu site için popup eklentisi yeterlidir; tek ve basit bir ihtiyaçta erişilebilir özel kod da kullanılabilir.

WordPress popup nedir?

Popup, mevcut sayfanın üzerinde açılan bir mesaj kutusudur. Metin, form, görsel veya buton içerebilir. Ziyaretçi genellikle pencereyi kapatır ve sayfayı kullanmaya devam eder.

Örneğin fiyatlandırma sayfasındaki ziyaretçi içeriğin yarısını okuduktan sonra küçük bir pencere açılabilir. Bu pencere, herkesi hemen başka bir sayfaya göndermeden ürün demosu teklif eder.

Modern popup, yeni bir tarayıcı penceresi değildir. WordPress araçları çoğunlukla mevcut sayfanın içinde bir HTML katmanı gösterir. Böylece görünüm ve davranış site yöneticisinin kontrolünde kalır.

Popup hangi amaçlarla kullanılabilir?

Popup, mesaj ziyaretçinin yaptığı işle ilgili olduğunda daha faydalıdır. Her sayfayı aynı genel reklamla kesmek ise kısa sürede rahatsız edici hâle gelir. Mesajı ziyaretçinin o anda ilgilendiği içerikle ilişkilendirmek daha iyi sonuç verir.

• Yazının belirli bölümünü okuyan kişiyi e-posta listesine davet etmek.
• Seçili ürün veya fiyatlandırma sayfalarında süreli duyuru göstermek.
• Belirli kampanya koşullarını karşılayan ziyaretçiye kupon sunmak.
• Butona tıklandığında iletişim veya teklif formu açmak.
• Onaylanması gereken önemli bir bilgilendirme göstermek.

Sayfada zaten görünmesi gereken temel bilgileri popup içine saklamayın. Kargo ücretleri, yasal açıklamalar ve ana satın alma butonu, kullanıcı popup açmasa da bulunabilir olmalıdır.

İyi bir popup hangi parçalardan oluşur?

Anlaşılır bir popup genellikle beş parçaya sahiptir: başlık, kısa açıklama, tek ana eylem, görünür kapatma kontrolü ve ne zaman açılacağını belirleyen kural.

Başlık ziyaretçinin kazanacağı şeyi söylemelidir. Açıklama, başlığı farklı kelimelerle tekrarlamak yerine en önemli soruyu cevaplamalıdır. Buton da “Kontrol listesini indir” veya “Demo talep et” gibi sonraki adımı açıkça anlatmalıdır.

Kapatma butonunu saklamayın. Gizli bir çarpı yanlışlıkla daha fazla tıklama getirebilir, fakat güveni azaltır. Mobil ekranda kullanıcı yakınlaştırma yapmadan ve küçük bir alana denk getirmeye çalışmadan pencereyi kapatabilmelidir.

Önce amacı ve hedef kitleyi belirleyin

Eklenti ekranını açmadan önce tek bir amaç yazın. “Popup göstermek” bir amaç değildir. “Yedekleme yazılarını okuyanlara yedekleme kontrol listesi sunmak” ise mesajı ve hedeflemeyi belirleyecek kadar açıktır.

1. Mesajın gösterileceği sayfa veya sayfa grubunu seçin.
2. Ziyaretçinin yapmasını istediğiniz işlemi belirleyin.
3. Popup’ın hangi anda açılacağına karar verin.
4. Aynı kişiye ne sıklıkla gösterileceğini sınırlayın.
5. Ölçülecek tek bir temel sonuç seçin.

Bu kısa plan, önce kutuyu tasarlayıp daha sonra ona bir amaç bulmaya çalışma hatasını önler.

Eklenti mi, özel kod mu?

Çoğu WordPress kullanıcısı için en kolay yol özel bir popup eklentisidir. Sayfa oluşturucuya ihtiyaç duymadan içerik düzenleyici, gösterim kuralları, tetikleyiciler ve sıklık kontrolü sunar.

1. Popup eklentisini kurup etkinleştirin.
2. Yeni popup oluşturun ve anlaşılır bir iç ad verin.
3. Başlık, metin, form veya butonu ekleyin.
4. Görüneceği sayfaları ve cihazları seçin.
5. Tetikleyici ve gösterim sıklığını belirleyin.
6. Çıkış yapılmış oturumda önizleyin.
7. Yayımlayın ve ana işlemi baştan sona test edin.

“Popup 3” yerine “Fiyatlandırma demo — masaüstü — ağustos” gibi bir iç ad kullanın. Bu küçük ayrıntı, kampanyayı aylar sonra bulmayı ve yönetmeyi kolaylaştırır.

Doğru tetikleyici ve hedefleme kurallarını seçin

Tetikleyici popup’ın ne zaman açılacağını belirler. Zaman gecikmesi kolay anlaşılır, ancak ziyaretçi sayfayı görmeden çalışmamalıdır. Kaydırma oranı uzun yazılarda ilgi düzeyini gösterir. Tıklama tetikleyicisi ise pencereyi kullanıcı istediği için genellikle en az rahatsız eden seçenektir. Tetikleyiciyi okuma ilerlemesine ve kullanılan cihaza göre seçin.

• Zaman gecikmesi:makul bir beklemeden sonra genel davet göstermek.
• Kaydırma oranı:uzun sayfanın bir bölümünü okuyan kişiye ulaşmak.
• Tıklama:form, video veya ek bilgiyi isteğe bağlı açmak.
• Çıkış niyeti:masaüstünde imlecin tarayıcı kontrollerine yönelmesini algılamak.

Dokunmatik cihazlarda fare imleci olmadığı için çıkış niyeti aynı güvenilirlikle çalışmaz. Mobil için ayrı kural belirleyin. WordPress çıkış niyeti popup rehberibu farkı daha ayrıntılı açıklar.

Mesajı sayfa, cihaz ve kampanya ihtiyacına göre sınırlandırın. Sayfa ve cihaz kurallarıyla popup hedeflemeyazısında daha fazla örnek bulunur.

Popup gösterim sıklığını sınırlayın

Kapatılan popup sonraki sayfada hemen yeniden açılırsa kullanıcıya bozuk görünür. Aynı kişinin kampanyayı gereğinden fazla görmemesi için sıklık sınırı belirleyin. Aynı ziyaretçiye ne kadar sık gösterileceğini de baştan belirleyin.

Kural; popup’ın görüntülendiğini, kapatıldığını veya tamamlandığını çerez ya da tarayıcı depolamasıyla hatırlayabilir. E-posta daveti kapatıldıktan sonra birkaç gün gizlenebilir. Başarılı kayıt sonrasında ise çok daha uzun süre gösterilmemelidir.

Kuralı normal tarayıcı oturumunda ve ardından gizli pencerede test edin. WordPress popup gösterim sıklığırehberi farklı seçenekleri ele alır.

HTML ve JavaScript ile basit popup hazırlayın

Tek ve küçük bir pencereye ihtiyaç duyan geliştirici, yerleşik HTML <dialog>öğesini kullanabilir. Büyük bir sayfa oluşturucu bağımlılığı oluşmaz; fakat stil, açma, kapatma ve tarayıcı testlerini sizin hazırlamanız gerekir.

<button type="button" id="open-offer">Teklifi görüntüle</button>

<dialog id="offer-dialog">
    <h2>Ürün demosu talep edin</h2>
    <p>Uygun zamanı seçin, çalışma akışını birlikte inceleyelim.</p>
    <button type="button" id="close-offer">Kapat</button>
</dialog>

const dialog = document.getElementById('offer-dialog');

document.getElementById('open-offer').addEventListener('click', () => {
    dialog.showModal();
});

document.getElementById('close-offer').addEventListener('click', () => {
    dialog.close();
});

Bu yalnızca temel açma ve kapatma mekanizmasıdır. Gerçek kampanyada CSS, form işleme, gerektiğinde izin yönetimi ve gösterim sıklığı da gerekir. Tekrar kullanılacak davranışı rastgele bir şablona yapıştırmak yerine küçük eklentiye veya doğru şekilde yüklenen JavaScript dosyasına koyun.

Erişilebilirlik ve mobil görünümü kontrol edin

Modal pencere açıldığında klavye odağı pencerenin içine taşınmalıdır. Pencere açıkken odak içeride kalmalı ve kapatıldığında açan öğeye geri dönmelidir. Uygun durumlarda Escape tuşu çalışmalı, kapatma butonunun etiketi anlaşılır olmalıdır.

Resmî W3C modal dialog örüntüsü, klavye ve odak davranışını açıklar. Eklenti kullansanız bile bitmiş popup’ı yalnızca fareyle değil klavyeyle de test edin.

• Dar telefon ekranlarında popup’ı açın.
• Kapatma butonunun her zaman görünür kaldığını doğrulayın.
• Formu kullanılabilir ekran yüksekliğinden uzun yapmayın.
• Arka plandaki içeriğin yanlışlıkla çalıştırılmasını önleyin.
• Metin kontrastını ve odak çizgisini kontrol edin.

Popup sonuçlarını ölçme

Yalnızca buton tıklamasını saymayın. Popup’ın kaç kez gösterildiğini, kaç kez kapatıldığını ve hedef işlemin kaç kez tamamlandığını izleyin. Yüksek tıklama ile çok yüksek kapatma oranı birlikte görülüyorsa kampanya yine de rahatsız edici olabilir.

Her testte tek büyük unsuru değiştirin. Önce tetikleyiciyi, daha sonra mesajı, son olarak form uzunluğunu deneyebilirsiniz. Her şeyi aynı anda değiştirirseniz sonucu neyin iyileştirdiğini anlayamazsınız.

Popup'ı bir engel değil, ziyaretçinin bulunduğu sayfayla ilgili bir sonraki adım olarak tasarlayın. Tek hedef kitle, tek amaç ve ölçülü bir gösterim kuralıyla başlayın. Sonuçlar gerektirmedikçe sistemi karmaşıklaştırmayın.

Kaynaklar

• W3C WAI-ARIA Authoring Practices: Modal iletişim kutusu örüntüsü