WordPress’te Gelişmiş Popup Kullanımı – Hazır Kodlarla Anlatım

WordPress kullanıcıları için ziyaretçilerin dikkatini çekmenin en etkili yollarından biri, akıllı popup kullanımıdır. Popup’lar sayesinde; kampanyalarınızı tanıtabilir, kullanıcıları e-posta bülteninize abone yapabilir veya önemli duyuruları kolayca gösterebilirsiniz.

İlginizi çekebilir 👉 WordPress’te Yazı İçinde Rastgele Benzer Yazı Ekleme Kodu

Bu yazıda, WordPress sitenize kolayca entegre edebileceğiniz 3 farklı gelişmiş popup senaryosunu örnek kodlarla birlikte paylaşıyoruz:

✅ 1. Yalnızca İlk Ziyarette Gözüken Popup (localStorage ile)

Bu popup yalnızca kullanıcı sitenizi ilk defa ziyaret ettiğinde görünür. Daha sonra aynı tarayıcıyla gelse bile tekrar gösterilmez.

📌 Ne İçin Uygun?

• Hoş geldin mesajı
• Gizlilik politikası bildirimi
• İlk ziyaret indirim teklifleri

💻 Kod:

✅ footer.php dosyasına veya Code Snippets eklentisine ekleyin:

<!-- HTML -->
<div id="popup1-overlay"></div>
<div id="popup1-box">
  <div id="popup1-content">
    <span id="popup1-close">&times;</span>
    <h2>Hoş Geldin!</h2>
    <p>Sitemize ilk ziyaretiniz. Keyifli gezintiler dileriz!</p>
  </div>
</div>

<!-- CSS -->
<style>
#popup1-overlay {display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;z-index:9998;}
#popup1-box {display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;padding:20px;border-radius:10px;z-index:9999;max-width:400px;width:90%;}
#popup1-content {position:relative;text-align:center;}
#popup1-close {position:absolute;top:10px;right:15px;cursor:pointer;font-size:20px;}
</style>

<!-- JavaScript -->
<script>
window.addEventListener("load", function() {
  if (!localStorage.getItem("popup1_seen")) {
    document.getElementById("popup1-overlay").style.display = "block";
    document.getElementById("popup1-box").style.display = "block";
    localStorage.setItem("popup1_seen", "true");
  }
});
document.getElementById("popup1-close").onclick = function() {
  document.getElementById("popup1-overlay").style.display = "none";
  document.getElementById("popup1-box").style.display = "none";
};
</script>

✅ 2. Popup Kapatıldıktan Sonra Aynı Oturumda Tekrar Gösterilmez

Bu senaryo, popup’ı yalnızca bir kez göstermeyi sağlar. Ziyaretçi kapattığında, aynı tarayıcı oturumu boyunca tekrar çıkmaz.

📌 Ne İçin Uygun?

• Çerez bilgilendirme
• Tek seferlik duyurular
• Acil bilgilendirmeler

💻 Kod:

<!-- HTML -->
<div id="popup2-overlay"></div>
<div id="popup2-box">
  <div id="popup2-content">
    <span id="popup2-close">&times;</span>
    <h2>Duyuru</h2>
    <p>Bu popup yalnızca bir kez gösterilir.</p>
  </div>
</div>

<!-- CSS -->
<style>
#popup2-overlay {display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;z-index:9998;}
#popup2-box {display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;padding:20px;border-radius:10px;z-index:9999;max-width:400px;width:90%;}
#popup2-content {position:relative;text-align:center;}
#popup2-close {position:absolute;top:10px;right:15px;cursor:pointer;font-size:20px;}
</style>

<!-- JavaScript -->
<script>
window.addEventListener("load", function() {
  if (!sessionStorage.getItem("popup2_closed")) {
    document.getElementById("popup2-overlay").style.display = "block";
    document.getElementById("popup2-box").style.display = "block";
  }
});
document.getElementById("popup2-close").onclick = function() {
  document.getElementById("popup2-overlay").style.display = "none";
  document.getElementById("popup2-box").style.display = "none";
  sessionStorage.setItem("popup2_closed", "true");
};
</script>

✅ 3. Sayfa Aşağıya Kaydırıldığında Açılan Popup

Bu popup, ziyaretçi sayfanızda belirli bir mesafeyi aşağıya kaydırdığında gösterilir. Bu, gerçekten içerikle ilgilenen kullanıcıları hedeflemek için ideal bir yöntemdir.

📌 Ne İçin Uygun?

• E-bülten aboneliği
• Özel kampanya tanıtımı
• Sayfa içi CTA (Call-to-Action)

💻 Kod:

<!-- HTML -->
<div id="popup3-overlay"></div>
<div id="popup3-box">
  <div id="popup3-content">
    <span id="popup3-close">&times;</span>
    <h2>Bizden Kaçma!</h2>
    <p>Sayfada gezinirken bu fırsatı kaçırma!</p>
  </div>
</div>

<!-- CSS -->
<style>
#popup3-overlay {display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;z-index:9998;}
#popup3-box {display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;padding:20px;border-radius:10px;z-index:9999;max-width:400px;width:90%;}
#popup3-content {position:relative;text-align:center;}
#popup3-close {position:absolute;top:10px;right:15px;cursor:pointer;font-size:20px;}
</style>

<!-- JavaScript -->
<script>
let popupShown = false;
window.addEventListener("scroll", function() {
  if (!popupShown && window.scrollY > 300) {
    document.getElementById("popup3-overlay").style.display = "block";
    document.getElementById("popup3-box").style.display = "block";
    popupShown = true;
  }
});
document.getElementById("popup3-close").onclick = function() {
  document.getElementById("popup3-overlay").style.display = "none";
  document.getElementById("popup3-box").style.display = "none";
};
</script>

🎯 Sonuç: WordPress’te Akıllı Popup Kullanımıyla Etkileşimi Artırın

Bu üç senaryoyu kullanarak WordPress sitenize ziyaretçi odaklı bir deneyim sunabilir, geri dönüşleri artırabilir ve profesyonel bir görünüm elde edebilirsiniz. Kodları dilerseniz doğrudan tema dosyanıza veya Code Snippets gibi eklentilerle kolayca uygulayabilirsiniz.

🧠 Daha fazlası için bizi takip edin!
🚀 “www.softindir.tr” ile WordPress’inizi akıllı hale getirin!