WordPress'te Eklenti Kullanmadan Popup Nasıl Oluşturulur?

WordPress sitenize eklenti kurmadan popup eklemek mi istiyorsunuz?

Eklenti kullanmanıza gerek yok. Kısa bir kod parçası, sitenize popup koymak için yeterli.

Her eklenti bakım ister. Güncellenecek bir şey daha demektir, sitenin güvenliği için bir açık kapı daha. Bazıları siteyi de yavaşlatır.

Popup eklentisiz çalışabiliyorken neden eklentiyle uğraşasınız ki?

Kullanımı kolay bir popup oluşturucu olan Popupsmart'ta tek satır kod yeter; popup'larınızı ücretsiz olarak oluşturursunuz.

Bütün kurulum 5 dakikanızı alır.

Neye ihtiyacınız var:

• WordPress panelinize bir yönetici girişi (çoklu site ağında süper yönetici).
• Klasik tema kullanıyorsanız bir alt tema (child theme), böylece tema güncellemesi kodunuzu silmez.
• Embed yöntemi için ücretsiz bir Popupsmart hesabı; kendi kodladığınız yöntem için başka hiçbir şey.
• Birkaç dakika; embed yöntemi kod bilgisi gerektirmez.

Sitenize hangi eklentisiz yöntem uyar?

Kod yazmadan potansiyel müşteri toplayan ve sayfa hedefleyen bir popup istiyorsanız doğru yöntem embed script'idir; tek bir duyuru için kendi kodladığınız <dialog> yeterlidir. WordPress webin büyük bir bölümünü çalıştırıyor: W3Techs verilerine göre içerik yönetim sistemi bilinen web sitelerinin %58,7'si, tüm web sitelerinin %40,2'si WordPress kullanıyor (30 Eylül 2026). Yine de WordPress'in bir popup bloğu yok; bu yüzden her WordPress popup'ı bir eklentiden, bir script'ten ya da sizin kodunuzdan gelir.

WordPress Sitenize Popup Kodunu Nasıl Ekleyebilirsiniz?

Popupsmart yönteminde temanıza tek bir script eklersiniz, siteyi doğrularsınız; sonra her popup Popupsmart panelinden oluşturulup yayınlanır. Aşağıdaki adımlar klasik bir temanın Tema Dosya Düzenleyici'sini kullanıyor; blok temalar ve functions.php bir sonraki bölümde.

İlk iş, Popupsmart'ta ücretsiz bir hesap açın.

1. Kayıt olduktan sonra kontrol panelinize yönlendirilirsiniz. İşe web sitenizi ekleyerek başlayın: profilinize tıklayın ve "Web Siteleri" seçeneğini seçin.

2. "Yeni web sitesi" butonuna tıklayın.

3. Web sitenizin URL'sini girin ve kaydedin.

4. Web siteniz "Doğrulanmamış" olarak görünecektir. "Doğrulanmamış" seçeneğine tıklayarak embed kodunuzu görebilirsiniz.

Kod tek satırdır: <script src="https://cdn.popupsmart.com/bundle.js" data-id="…" async defer></script>. Buradaki data-id sizin hesabınıza aittir.

5. Embed kodunu panoya kopyalayın. WordPress yönetici panelinde "Appearance (Görünüm)" menüsüne gidin ve "Theme File Editor (Tema Dosya Düzenleyici)" seçeneğine tıklayın.

6. Temanızı kontrol edin ve "Footer (Altbilgi)" seçeneğine tıklayın.

7. Embed kodunuzu </body> etiketinden önce yapıştırın.

8. Dosyayı kaydetmek için "Update File" butonuna tıklayın.

Burada yer önemli. Kod, "body" etiketi kapanmadan hemen önce durmalı, sonra değil.

9. Popupsmart kontrol panelinize geri dönün ve "Doğrula" butonuna tıklayın.

Buton sizi WordPress sitenize götürür. Ekranda "Popupsmart kurulumu doğrulandı." yazan küçük bir modal açılıyorsa kurulum çalışıyor.

Popupsmart'ın Web Siteleri sayfasında doğrulanmış bir site şöyle görünür:

Popup da sitede yayında:

Hiç eklenti kurmadan WordPress'te bir popup yayına aldınız.

Kurulum tek seferlik bir iştir. Bundan sonra Popupsmart'ta bir kampanya oluşturur, WordPress sitenizi seçer, popup şablonlarından birini alır, kimin ne zaman göreceğini ayarlar ve yayınlarsınız. Popupsmart'ın ücretsiz planı bir web sitesi, bir yayında popup ve ayda 5.000 sayfa görüntüleme içerir, bu yüzden bu rehberi ödeme yapmadan bitirebilirsiniz. WordPress popup rehberi aynı kurulumu Popupsmart yardım merkezinin ekran görüntüleriyle anlatıyor.

Embed kodunu nereye yapıştırmalı: blok temalar ve klasik temalar

Kodun yeri tema türünüze bağlıdır. Bir blok temanın (Twenty Twenty-Four, Twenty Twenty-Five) düzenleyeceğiniz bir footer.php dosyası yoktur ve Site Düzenleyici'de değiştirilir; klasik bir temada ise düzenleyebileceğiniz header.php ve footer.php dosyaları vardır, tercihen bir alt temada. Her tema script'i functions.php üzerinden de yükleyebilir.

Blok temalar: Site Düzenleyici'de bir Özel HTML bloğu

1. Görünüm → Düzenleyici (Appearance → Editor) sayfasına gidin ve Footer şablon parçasını açın (Desenler (Patterns) altında ya da herhangi bir şablonda altbilgiye tıklayarak).
2. Altbilginin sonuna bir Özel HTML (Custom HTML) bloğu ekleyin ve embed kodunu yapıştırın.
3. Kaydet'e tıklayın.

Site Düzenleyici, değiştirdiğiniz şablon parçasını veritabanına kaydeder; bu yüzden tema güncellemesi kodu silmez. Başka bir temaya geçmek ise siler, çünkü değişiklik o temaya aittir. Blok, <script> etiketini yalnızca filtresiz HTML yayınlama izni olan kullanıcılar için korur: tek sitede yöneticiler, çoklu site ağında süper yöneticiler.

Klasik temalar: bir alt temada footer.php veya header.php

Görünüm → Tema Dosya Düzenleyici sayfasında kodu, yukarıdaki 5. ile 8. adımlar arasında anlatıldığı gibi footer.php dosyasında </body> etiketinden hemen önceye ya da header.php dosyasında </head> etiketinden hemen önceye yapıştırın. İkisi de çalışır, çünkü script async defer ile yüklenir ve sayfayı bekletmez. Bunu bir alt temada yapın: ana temanın dosyaları her güncellemede değiştirilir.

Tema Dosya Düzenleyici'yi bulamıyorsanız, hostinginiz ya da bir güvenlik ayarı onu büyük olasılıkla kapatmıştır (DISALLOW_FILE_EDIT sabiti bunu yapar). O zaman SFTP'yi, bir alt temada functions.php dosyasını ya da Google Tag Manager kurulumunu kullanın.

Her tema: wp_enqueue_script ile functions.php

WordPress'te script eklemenin WordPress'e özgü yolu wp_enqueue_script fonksiyonudur. WordPress 6.3'ten bu yana bir yükleme stratejisi (async ya da defer) alır; küçük bir filtre de Popupsmart'ın okuduğu data-id niteliğini ekler. Aşağıdaki üç kod parçası da aynı script'i yükler:

<!-- Footer şablon parçasının sonundaki Özel HTML bloğu -->
<script src="https://cdn.popupsmart.com/bundle.js" data-id="HESAP_KIMLIGINIZ" async defer></script>

<?php /* Alt temanın footer.php dosyası: önce wp_footer(), sonra script, sonra </body> */ ?>
<?php wp_footer(); ?>
<script src="https://cdn.popupsmart.com/bundle.js" data-id="HESAP_KIMLIGINIZ" async defer></script>
</body>
</html>

// Alt temanın functions.php dosyası, WordPress 6.3 veya üstü.
add_action( 'wp_enqueue_scripts', function () {
	wp_enqueue_script(
		'popupsmart',
		'https://cdn.popupsmart.com/bundle.js',
		array(),
		null, // ?ver= sorgu dizesi eklenmez
		array( 'in_footer' => true, 'strategy' => 'async' )
	);
} );

// Embed kodunuzdaki data-id niteliğini ekleyin.
add_filter( 'script_loader_tag', function ( $tag, $handle ) {
	if ( 'popupsmart' === $handle ) {
		$tag = str_replace( ' src=', ' data-id="HESAP_KIMLIGINIZ" src=', $tag );
	}
	return $tag;
}, 10, 2 );

HESAP_KIMLIGINIZ yerine kendi embed kodunuzdaki numarayı yazın. Çalıştığını şuradan anlarsınız: sayfa kaynağında (Ctrl+U) tek bir cdn.popupsmart.com/bundle.js satırı görünür ve Popupsmart'ın Doğrula adımı kurulum mesajını gösterir.

HTML, CSS ve JavaScript ile popup nasıl yapılır

Kendi kodladığınız bir WordPress popup'ı, showModal() ile açılan bir <dialog> öğesidir. Tarayıcı zor kısımları sizin yerinize yapar: MDN'nin dialog başvurusuna göre modal bir dialog sayfanın geri kalanını etkileşime kapatır, arkasına bir ::backdrop çizer ve Esc tuşuyla kapanır. Bu örnek beş saniye sonra, her ziyaretçiye bir kez açılır ve × butonu, Esc ya da arka plana tıklamayla kapanır.

<dialog id="wp-popup" class="wp-popup" aria-labelledby="wp-popup-title">
  <div class="wp-popup__inner">
    <form method="dialog">
      <button class="wp-popup__close" aria-label="Kapat">×</button>
    </form>
    <h2 id="wp-popup-title">Yeni yazıları e-postayla alın</h2>
    <p>Haftada bir e-posta. İstediğiniz zaman ayrılın.</p>
    <a class="wp-popup__cta" href="/bulten/">Abone ol</a>
  </div>
</dialog>

<style>
  .wp-popup { width: min(420px, calc(100% - 2rem)); padding: 0; border: 0; border-radius: 12px; }
  .wp-popup::backdrop { background: rgb(0 0 0 / 0.5); }
  .wp-popup__inner { position: relative; padding: 2rem 1.5rem 1.5rem; text-align: center; }
  .wp-popup__close { position: absolute; top: 0.5rem; right: 0.5rem; width: 44px; height: 44px;
    border: 0; background: none; font-size: 1.5rem; cursor: pointer; }
  .wp-popup__cta { display: block; padding: 0.75rem; border-radius: 8px;
    background: #1b6ef3; color: #fff; text-decoration: none; }
  @media (prefers-reduced-motion: no-preference) {
    .wp-popup[open] { animation: wp-popup-in 0.2s ease-out; }
  }
  @keyframes wp-popup-in { from { opacity: 0; transform: translateY(8px); } }
</style>

<script>
  (function () {
    var popup = document.getElementById('wp-popup');
    if (!popup || typeof popup.showModal !== 'function') return;
    try { if (localStorage.getItem('wpPopupSeen')) return; } catch (e) {}

    setTimeout(function () {
      popup.showModal();
      try { localStorage.setItem('wpPopupSeen', '1'); } catch (e) {}
    }, 5000);

    // Arka plana yapılan tıklama iç kutuya değil, dialog'un kendisine düşer.
    popup.addEventListener('click', function (event) {
      if (event.target === popup) popup.close();
    });
  })();
</script>

Nereye koymalı: popup'a ihtiyaç duyan tek sayfada bir Özel HTML bloğuna ya da her sayfada göstermek için footer şablon parçasına (veya footer.php dosyasına). WordPress düzenleyicisi, embed kodunda olduğu gibi, <script> etiketini yalnızca filtresiz HTML yayınlama izni olan kullanıcılar için korur.

Bu popup'ın yapmadığı şey, işin geri kalanıdır. Abone ol butonu yalnızca bir sayfaya bağlantı verir: bir e-posta adresini saklamak, bir formu e-posta aracınıza ya da bir form eklentisine bağlamak demektir. Her birini siz yazmadıkça sayfaya, cihaza ya da trafik kaynağına göre hedefleme, A/B testi ve popup'ı kaç kişinin gördüğüne dair bir rapor yoktur. Tek bir duyuru için bu yeterli; potansiyel müşteri toplamak içinse embed yöntemi o tek satırı hak ediyor.

Kendi kodladığınız popup için erişilebilirlik kontrol listesi:

• Dialog başlığıyla adlandırılır (aria-labelledby) ve kapatma butonunun erişilebilir bir adı vardır (aria-label="Kapat").
• show() değil, showModal(): yalnızca modal sürüm arkadaki sayfayı etkileşime kapatır ve Esc ile kapanır.
• Telefonda dokunulabilsin diye en az 44×44 px'lik bir kapatma alanı.
• Hareket yalnızca prefers-reduced-motion: no-preference içinde.
• Her sayfa görüntülemede değil, ziyaretçi başına bir kez (localStorage bayrağı).

Neden beş saniye? Makul bir varsayılan, o kadar. Popupsmart'ın 2026 popup kıyaslamasında, görünmeden önce bekleyen popup'lar, sayfa yüklenir yüklenmez gösterilenlere karşı %0,83'e %0,61 dönüştürüyor (medyan kampanya); yön verinin her yılında aynı kalıyor ama fark istatistiksel olarak güvenilir değil, bu yüzden bir kural değil, eğilim olarak okuyun.

Gecikme süresinin kendisi (0-5 saniyeye karşı 21-60 saniye) dönüşümde ölçülebilir bir fark yaratmıyor; bu yüzden setTimeout içindeki sayıyı ayarlamaya uzun zaman harcamayın.

min(420px, calc(100% - 2rem)) genişliğinin ve 44 px'lik kapatma butonunun önemi bu rakamlardan geliyor: popup'ınızı görenlerin çoğu onu telefonda görecek. Yayınlamadan önce 375 px genişlikte test edin; yerleşim kuralları için mobil popup rehberini okuyun.

Görsel ve video popup'ları için hiç kod gerekmeyebilir. Çekirdekteki Görsel bloğunun Expand on click (tıklayınca büyüt) ayarı, görseli bir lightbox içinde açar; kendi kodlayacağınız diğer modal kalıpları için modal popup rehberine bakın. Popup'ı bir zamanlayıcı yerine butonla açmak için buton ile açılan popup'lara göz atın.

WordPress sitelerinde popup'lar nasıl performans gösteriyor?

WordPress sitelerindeki popup'lar kampanyaların dörtte birinde e-posta veya telefon numarası istiyor ve medyan WordPress kampanyası gösterimlerinin %0,66'sında dönüşüyor. Popupsmart verisinde, kıyaslamadaki işletmelerin %43'ü (Ocak 2024 - Eylül 2026) Shopify'da çalışıyor; WordPress ekosistemi (WordPress ve WooCommerce) %14'ünü, Next.js gibi çatılarla özel geliştirilmiş siteler %2,5'ini oluşturuyor. Shopify mağazalarındaki popup kampanyalarının %35'i e-posta veya telefon numarası istiyor; WordPress sitelerinde bu oran %25. Shopify mağazalarındaki popup'lar %1,07 dönüştürüyor, WordPress sitelerinde bu oran %0,66 (medyan kampanya).

WordPress rakamını kurulum yönteminin değil, sitelerin bir tarifi olarak okuyoruz: bir WordPress sitesi çoğu zaman bir blog ya da kurumsal sitedir ve orada daha az popup bir şey ister. Popup'ı nasıl eklediğiniz, eklentiyle mi script'le mi, veride yok. Değiştirebileceğiniz şey ne istediğiniz ve ne zaman istediğinizdir.

Popup eklentisi ne zaman hâlâ daha iyi seçimdir?

Her şeyin WordPress içinde kalmasını istiyorsanız ya da siteye hiç kod ekleyemiyorsanız eklenti daha iyi seçimdir. Şu durumlarda bir eklenti seçin:

• Potansiyel müşteriler WordPress veritabanınızda kalmalıysa, örneğin üçüncü taraf bir hizmeti dışlayan bir veri politikası nedeniyle.
• Zaten bir form eklentisi kullanıyorsanız, Contact Form 7, Gravity Forms ya da WPForms gibi, ve bir popup eklentisi bu formları açabiliyorsa.
• Tema dosyalarını, functions.php dosyasını ya da Özel HTML'i düzenleyemiyorsanız, örneğin çoklu site ağında editör olarak, ve Google Tag Manager bir seçenek değilse.
• WordPress içerik kurallarına uyan popup'lar istiyorsanız, örneğin tek bir kategorideki yazılarda gösterilen ve WordPress yönetim panelinde zaten çalışan kişilerin yönettiği popup'lar.

WordPress popup eklentileri karşılaştırması başlıca seçenekleri ve her birinin ücretini ele alıyor. E-posta aracınız Mailchimp ise, WordPress'e Mailchimp popup'ı ekleme rehberi hem Mailchimp'in kendi popup formunu hem de popup oluşturucu yolunu gösteriyor.

WordPress popup'ı görünmüyor mu? Bunları kontrol edin

Eklentisiz bir popup görünmediğinde önce önbelleği, sonra kodu, sonra tetikleyiciyi kontrol edin:

• Bir önbellek eski sayfayı sunuyor. Kodu ekledikten sonra önbellek eklentinizi ve CDN'inizi temizleyin, sonra gizli pencerede test edin.
• Bir optimizasyon eklentisi JavaScript'i geciktiriyor ya da birleştiriyor. "JavaScript'i geciktir" ve "script'leri birleştir" ayarları embed kodunu ziyaretçi etkileşime girene kadar bekletebilir. cdn.popupsmart.com adresini bu ayarların dışında tutun.
• Tema güncellendi. Ana temanın footer.php dosyasına yapıştırılan kod güncellemeden sonra gider; kodu bir alt temaya ya da Site Düzenleyici'ye yapıştırın.
• Kod sayfada iki kez var. Sayfa kaynağında bundle.js arayın; tek bir kopya bırakın.
• Web sitesi doğrulanmamış ya da adres eşleşmiyor. www.example.com ile example.com Popupsmart için farklı sitelerdir. Ziyaretçilerinizin kullandığı adresi ekleyin.
• Popup'ı zaten gördünüz. Ziyaretçi başına bir kez kuralı (Popupsmart'ın sıklık ayarı ya da yukarıdaki localStorage bayrağı) ikinci ziyaretinizde onu gizler. Gizli pencere temiz başlar.

Eklentisiz WordPress popup'ı hakkında sık sorulan sorular

WordPress'e eklenti olmadan popup eklenebilir mi?

Evet. WordPress'in bir popup bloğu yok, ama bir popup aracının embed script'ini temanıza yapıştırabilir, Site Düzenleyici'de bir Özel HTML bloğuyla ekleyebilir ya da HTML dialog öğesiyle popup'ı kendiniz kodlayabilirsiniz. Üç yöntem de eklenti kurmadan popup ekler.

WordPress'te popup kodunu nereye yapıştırmalıyım?

Blok temada, Görünüm → Düzenleyici üzerinden Footer şablon parçasındaki bir Özel HTML bloğuna yapıştırın. Klasik temada, alt temanızın footer.php dosyasında kapanış body etiketinden hemen önceye ya da header.php dosyasında kapanış head etiketinden önceye yapıştırın.

Tema güncellemesi popup kodumu siler mi?

Kodu ana temanın dosyalarına yapıştırdıysanız evet: tema güncellemesi bu dosyaları değiştirir. Kodu bir alt temaya koyun ya da blok temada Site Düzenleyici'yi kullanın; Site Düzenleyici şablon parçası değişikliklerinizi tema dosyalarına değil veritabanına kaydeder.

WordPress'e eklentisiz popup eklemenin ücretsiz bir yolu var mı?

Evet. Kendi kodladığınız bir dialog popup'ı yalnızca zamanınıza mal olur. Popupsmart'ın ücretsiz planı da embed koduyla bir popup çalıştırır: bir web sitesi, bir yayında popup ve ayda 5.000 sayfa görüntüleme.

WordPress'te eklentisiz exit-intent popup yapabilir miyim?

Evet. Popupsmart'ın embed kodu, panelden ayarladığınız exit intent, kaydırma ve süre tetikleyicilerini destekler. Kendi yazdığınız JavaScript'te imlecin sayfadan çıkışını sizin dinlemeniz gerekir ve bu, imlecin olmadığı telefonlarda çalışmaz.

WordPress popup'ım neden görünmüyor?

En sık nedenler: eski ya da geciktirilmiş bir script sunan bir önbellek veya optimizasyon eklentisi, sonradan güncellenen bir temaya yapıştırılmış kod, iki kez eklenmiş embed kodu ya da Popupsmart'ta doğrulanmamış bir web sitesi. Önce önbelleği temizleyin ve gizli pencerede test edin.

Popup script'i WordPress'i yavaşlatır mı?

Popupsmart'ın embed kodu async ve defer ile yüklenir, bu yüzden tarayıcı sayfayı göstermeden önce onu beklemez; Popupsmart script'i yaklaşık 97 KB olarak ölçüyor. Kendi kodladığınız bir dialog popup'ı ise yalnızca yazdığınız birkaç satırı ekler.

Sonuç

Eklentisiz bir WordPress popup'ı tek bir karara iner: popup'ı <dialog> ile kendiniz yazın ya da tek bir script yapıştırıp popup'ı Popupsmart'ta oluşturun. Hangisini seçerseniz seçin, bir güncelleme silemesin diye bir alt temaya ya da Site Düzenleyici'ye koyun ve önce telefonda test edin.

Bundan sonrası kampanyaların işi. Popup'larınız yayına girdikten sonra dönüşümlerinizi artırmak için dönüşüm oranı optimizasyonu rehberine göz atın.

Bunlar da ilginizi çekebilir:

• Hedefe göre 13 popup kullanım alanı