Wordpress İframe Sorunu Nasıl Çözülür?

WordPress iframe kodunuz kayboluyorsa neredeyse her zaman sebebi şudur: yazınızı kaydeden kullanıcı hesabının "unfiltered_html" yetkisi yoktur, bu yüzden WordPress iframe etiketini güvenlik gereği siler. Çözüm, kodu "Özel HTML" bloğuna yapıştırmak, güvenilir bir iframe eklentisi kullanmak veya functions.php ile bu yetkiyi tanımlamaktır. Görünmeme sorunu ise genelde karşı sitenin X-Frame-Options başlığından kaynaklanır.

iframe (inline frame), bir web sayfasının içine başka bir sayfayı, videoyu, haritayı, formu veya takvimi gömmenizi sağlayan bir HTML etiketidir. WordPress'te bu son derece basit görünen işlem, çoğu zaman kullanıcıyı çileden çıkaran bir soruna dönüşür: kodu yapıştırırsınız, kaydedersiniz, sayfayı yenilersiniz ve iframe sanki hiç var olmamış gibi ortadan kaybolmuştur. Ya da kod durur ama çerçeve boş kalır, konsola "refused to connect" hatası düşer. Bu yazıda WordPress iframe sorununun bütün olası nedenlerini tek tek ele alacağız, her biri için kod örnekli ve adım adım çözümler vereceğiz. Amacımız, hangi senaryoda olursanız olun sorunu gerçekten çözmenizdir.

WordPress iframe kodum neden kayboluyor veya çalışmıyor?

Önce şunu netleştirelim: "iframe sorunu" aslında birbirinden çok farklı üç ayrı problemin ortak adıdır. Bunları ayırt etmeden çözüm aramak, yanlış yerde saatlerce dönüp durmanıza yol açar. Sorununuzun hangisi olduğunu belirlemek, çözümün yüzde sekseni demektir.

Birinci grup, kodun editörde tamamen kaybolmasıdır. iframe etiketini yapıştırıp kaydettiğinizde, geri döndüğünüzde kod yerinde yoktur. Bu, WordPress'in kendi içerik temizleme (sanitization) mekanizmasıyla ilgilidir ve neredeyse her zaman kullanıcı yetkisi veya bir güvenlik eklentisi kaynaklıdır.

İkinci grup, kodun durması ama iframe'in görünmemesidir. HTML kaynağında iframe etiketi vardır, ancak tarayıcıda boş bir kutu, beyaz bir alan ya da "bu içerik gösterilemiyor" mesajı görürsünüz. Bu genellikle gömmeye çalıştığınız karşı sitenin, kendisinin başka sayfalarda çerçeveye alınmasını yasaklamasından kaynaklanır (X-Frame-Options veya CSP başlığı).

Üçüncü grup ise görsel/boyut sorunlarıdır: iframe çalışır ama mobilde taşar, çok küçük görünür, kaydırma çubuğu çıkar ya da sayfanın düzenini bozar. Bu tamamen bir CSS meselesidir. Aşağıdaki tablo, karşılaştığınız belirtiye göre doğru grubu ve nedeni hızlıca bulmanızı sağlar.

Blok editör iframe kodumu neden siliyor?

Bu, en sık karşılaşılan senaryodur ve arkasındaki mantığı anlamak çözümü kalıcı hale getirir. WordPress, güvenlik gerekçesiyle içeriği kaydederken "temizler". Bu temizleme işleminin merkezinde wp_kses adlı bir fonksiyon ailesi bulunur. wp_kses, izin verilen HTML etiketlerinin bir listesini tutar ve bu listede olmayan her şeyi siler. Varsayılan olarak <iframe> etiketi bu güvenli liste içinde yer almaz, çünkü iframe teorik olarak zararlı içerik gömmek için kötüye kullanılabilir.

Peki neden bazı kullanıcılarda kayboluyor da yöneticide kaybolmuyor? Çünkü WordPress'te "unfiltered_html" adlı özel bir yetki vardır. Bu yetkiye sahip kullanıcılar (tek siteli kurulumda genelde Yönetici ve Editör rolleri) iframe, script ve benzeri "filtrelenmemiş" HTML'i kaydedebilir. Bu yetkiye sahip olmayan kullanıcılar (Yazar, Katkıda Bulunan roller) kaydettiğinde ise iframe silinir. Yaptığımız araştırma da bunu doğruluyor: kullanıcı unfiltered_html yetkisine sahip değilse içeriği wp_kses fonksiyonundan geçer ve iframe, embed gibi etiketleri yazılarına ekleyemez.

Multisite (çok siteli ağ) kurulumlarında durum daha da katıdır. Multisite ağında, Yönetici dahil hiç kimse varsayılan olarak unfiltered_html yetkisine sahip değildir; bu yetki yalnızca Süper Yönetici (Super Admin) hesabına aittir. WordPress çekirdeği, map_meta_cap() fonksiyonu içinde multisite kurulumda Süper Yönetici olmayan kullanıcılar için unfiltered_html yetkisini yok sayar. Yani multisite'te normal bir site yöneticisi bile iframe eklediğinde kod silinebilir. Bu, tasarlanmış bir güvenlik davranışıdır, bir hata değildir.

Özel HTML bloğu ile iframe nasıl doğru eklenir?

Eğer hesabınız yeterli yetkiye sahipse (tek siteli kurulumda Yönetici veya Editör iseniz), iframe eklemenin en temiz ve eklentisiz yolu Özel HTML bloğunu kullanmaktır. Sorun genellikle kullanıcıların iframe kodunu yanlış blok tipine yapıştırmasından kaynaklanır. Bir Paragraf bloğuna ham HTML yapıştırırsanız editör onu metin gibi işleyebilir veya kaydederken bozabilir. Doğru adımlar şöyledir:

1. Yazı veya sayfa düzenleyicisinde, iframe'in görünmesini istediğiniz yere gelin.

2. Artı (+) simgesine tıklayın ve blok arama kutusuna "Özel HTML" (İngilizce arayüzde "Custom HTML") yazın.

3. Özel HTML bloğunu ekleyin.

4. iframe kodunuzu bu bloğa olduğu gibi yapıştırın. Örneğin:

<iframe src="https://www.ornek-site.com/gomulu-sayfa"
  width="600" height="400" loading="lazy"
  title="Gömülü içerik" frameborder="0"></iframe>

5. Bloğun üstündeki "Önizleme" sekmesine tıklayarak nasıl göründüğünü kontrol edin.

6. Yazıyı kaydedin ve ön yüzde (siteyi ziyaretçi gibi açarak) tekrar kontrol edin.

Burada önemli bir ayrıntı vardır: WordPress'in Gutenberg editöründe Özel HTML bloğunun önizlemesi, kaydetme mantığından ayrı çalışır. Bazı sürümlerde önizleme, kullanıcının unfiltered_html yetkisini tam olarak dikkate almadan iframe'i editör içinde gösterebilir, ancak asıl kaydetme anında kod silinir. Yani "editörde görünüyordu ama yayınlayınca gitti" diyorsanız, bu tam olarak yetki kaynaklı bir sorundur; önizlemedeki görüntü sizi yanıltmasın. Gerçek testi her zaman siteyi ön yüzde açarak yapın.

unfiltered_html yetkisi nedir ve nasıl verilir?

Eğer iframe kodunuzun Editör veya Yazar rollerindeki kullanıcılar tarafından da kaydedilebilmesini istiyorsanız, ilgili role unfiltered_html yetkisini programatik olarak tanımlayabilirsiniz. Ancak önce ciddi bir uyarı: bu yetkiyi verdiğiniz rol, artık script dahil her türlü HTML'i kaydedebilir hale gelir. Bu, o role sahip birinin siteye zararlı JavaScript enjekte edebilmesi anlamına gelir. Yalnızca tamamen güvendiğiniz kullanıcılar için ve gerçekten gerekiyorsa yapın. Alternatif olarak, ileride anlatacağımız iframe eklentileri çok daha güvenlidir çünkü sadece iframe'e izin verir, tüm HTML'e değil.

Yetkiyi tanımlamak için tema klasörünüzdeki (tercihen bir alt tema veya site-specific eklenti içindeki) functions.php dosyasına şu kodu ekleyebilirsiniz. Bu örnek, Editör rolüne yetkiyi tek seferlik olarak ekler:

function ozel_editore_iframe_izni() {
    $role = get_role( 'editor' );
    if ( $role && ! $role->has_cap( 'unfiltered_html' ) ) {
        $role->add_cap( 'unfiltered_html' );
    }
}
add_action( 'init', 'ozel_editore_iframe_izni' );

Rol yetkileri veritabanına yazıldığı için, bu kodu bir kez çalıştırdıktan sonra dosyadan kaldırabilirsiniz; yetki kalıcı olur. Multisite kurulumunda ise get_role yaklaşımı yeterli olmaz, çünkü WordPress multisite'te unfiltered_html yetkisini map_meta_cap filtresiyle ayrıca kısıtlar. Multisite'te belirli kullanıcılara izin vermek için şu filtreyi kullanmak gerekir:

function multisite_iframe_izni( $caps, $cap, $user_id, $args ) {
    if ( 'unfiltered_html' === $cap ) {
        // Sadece belirli kullanıcı ID'lerine izin ver
        if ( user_can( $user_id, 'edit_pages' ) ) {
            $caps = array( 'unfiltered_html' );
        }
    }
    return $caps;
}
add_filter( 'map_meta_cap', 'multisite_iframe_izni', 1, 4 );

Bu kodları eklerken tek bir yazım hatasının bile sitenizi geçici olarak erişilemez hale getirebileceğini unutmayın. Değişiklikleri mutlaka önce bir yedek aldıktan sonra ve mümkünse bir test (staging) ortamında yapın. FTP erişiminizin hazır olması, bir hata durumunda dosyayı geri almanız için hayati önemdedir.

Güvenlik eklentileri (Wordfence, Sucuri) iframe'i filtreliyor mu?

Diyelim ki hesabınız Yönetici ve yetkiniz tam, ama iframe hâlâ kayboluyor. Bu durumda büyük ihtimalle bir güvenlik eklentisi araya giriyordur. Wordfence, Sucuri, iThemes Security (Solid Security) ve benzeri eklentiler, kaydedilen içeriği kendi kuralları üzerinden tarayarak iframe gibi "riskli" etiketleri temizleyebilir veya bir Web Application Firewall (WAF) katmanında engelleyebilir.

Belirtisi tipiktir: sorun yakın zamanda bir güvenlik eklentisi kurduktan veya güncelledikten sonra başlamıştır. Kontrol için önce eklentinin ayarlarına bakın; çoğunda "HTML filtreleme" veya "content sanitization" ile ilgili bir seçenek bulunur. Kesin teşhis için, iframe'i kaydetmeyi denerken güvenlik eklentisini geçici olarak devre dışı bırakın. Eğer iframe artık kayboluyorsa suçlu bulunmuştur. Bu testi mutlaka trafiğin düşük olduğu bir anda ve kısa süreliğine yapın, çünkü eklentiyi kapattığınız süre boyunca siteniz korumasız kalır.

Wordfence gibi eklentiler ayrıca bir WAF kuralı olarak iframe içeren istekleri "malicious" (zararlı) sayabilir ve kaydetmeyi tamamen bloklayabilir. Bu durumda eklentinin "firewall" bölümünde ilgili kuralı istisna (allowlist) listesine ekleyebilir ya da o URL için kuralı gevşetebilirsiniz. Ancak genel tavsiyem, güvenlik eklentisinin ayarlarını kurcalamak yerine, iframe'i güvenli bir şekilde ekleyen bir eklenti kullanmaktır; bu, güvenlik duvarınızı zayıflatmadan sorunu çözer.

X-Frame-Options ve CSP başlığı iframe'i nasıl engeller?

Şimdi ikinci büyük soruna geçelim: kod duruyor ama iframe boş görünüyor. Tarayıcınızın geliştirici konsolunu açtığınızda (F12), şuna benzer bir hata görürsünüz: "Refused to display '...' in a frame because it set 'X-Frame-Options' to 'sameorigin'" ya da "Refused to frame '...' because an ancestor violates the following Content Security Policy directive: frame-ancestors".

Bu, sizin sitenizin değil, gömmeye çalıştığınız karşı sitenin bir güvenlik ayarıdır. X-Frame-Options ve Content-Security-Policy'nin frame-ancestors direktifi, bir sitenin başka sayfalarda iframe içine alınıp alınamayacağını belirler. Bu, clickjacking denen saldırı türüne karşı bir korumadır. Karşı site "beni kimse çerçeveye almasın" (DENY) veya "sadece kendi alan adım çerçeveye alsın" (SAMEORIGIN) demişse, siz o siteyi kendi WordPress sayfanıza gömemezsiniz. Bu bir WordPress sorunu değildir ve WordPress tarafında yapacağınız hiçbir ayar bunu aşamaz.

Aşağıdaki tablo, bu iki başlığın değerlerini ve etkilerini özetliyor:

Bu durumda üç seçeneğiniz vardır. Birincisi, karşı sitenin sağladığı resmi gömme kodunu kullanmaktır. YouTube, Google Haritalar, Vimeo, Spotify gibi platformlar, "Paylaş" veya "Embed" menüsünden özel olarak çerçevelenmeye izin veren bir iframe kodu verir; bu kodun kaynak adresi (örneğin youtube.com yerine youtube-nocookie.com veya youtube.com/embed/) çerçevelenmeye izin verecek şekilde ayarlanmıştır. İkincisi, gömmek istediğiniz site sizin kontrolünüzdeyse, o sitenin ayarını değiştirmektir (aşağıda anlatıyoruz). Üçüncüsü ise, gerçekten gömemiyorsanız iframe yerine bir bağlantı, ekran görüntüsü veya API tabanlı bir alternatif kullanmaktır.

Kendi sitemi başka yere gömerken karşı taraf izin vermiyorsa ne yapmalıyım?

Bazen durum tersinedir: gömmek istediğiniz sayfa sizin kendi WordPress sitenizdir ve onu başka bir yere (örneğin bir iş ortağının sitesine veya kendi ikinci sitenize) gömmek istiyorsunuz ama çerçeve boş kalıyor. Bu, sizin WordPress sitenizin veya sunucunuzun X-Frame-Options başlığı gönderdiği anlamına gelir.

Yaptığımız araştırmaya göre WordPress, yönetici alanı (wp-admin) için varsayılan olarak send_frame_options_header() fonksiyonu aracılığıyla X-Frame-Options: SAMEORIGIN başlığı gönderir; ancak sitenizin ön yüzü (ziyaretçilerin gördüğü sayfalar) varsayılan olarak bu başlığı almaz. Yani ön yüzde bu başlık varsa, onu ya bir güvenlik eklentisi ya da sunucu yapılandırmanız (Apache/Nginx) ekliyordur.

Apache sunucusunda, sitenizin kök dizinindeki .htaccess dosyasında şuna benzer bir satır arayın ve bulursanız değiştirin veya kaldırın:

# Tüm sitelerin gömmesini yasaklayan katı ayar (kaldırılabilir)
# Header set X-Frame-Options "DENY"

# Sadece kendi sitenize izin veren ayar
Header set X-Frame-Options "SAMEORIGIN"

# Belirli bir güvenilir siteye izin vermek için modern yöntem:
Header set Content-Security-Policy "frame-ancestors 'self' https://guvenilir-ortak-site.com"

Burada kritik nokta şudur: X-Frame-Options başlığı yalnızca DENY ve SAMEORIGIN değerlerini güvenilir biçimde destekler; belirli bir üçüncü siteye izin vermek için eski ALLOW-FROM değeri modern tarayıcılarda artık desteklenmez ve bu değeri gören tarayıcılar başlığı tamamen yok sayar. Belirli bir alan adına gömme izni vermek istiyorsanız, doğru yol Content-Security-Policy başlığının frame-ancestors direktifini kullanmaktır. Araştırmamızın da doğruladığı gibi, bir yanıtta hem frame-ancestors hem X-Frame-Options bulunuyorsa modern tarayıcılar frame-ancestors direktifini uygular ve X-Frame-Options'ı tamamen yok sayar; yine de CSP'yi hiç desteklemeyen çok eski tarayıcılar için X-Frame-Options: SAMEORIGIN başlığını yedek olarak birlikte göndermek en iyi pratiktir.

Nginx kullanıyorsanız, aynı ayarlar site yapılandırma dosyanızda (server bloğu içinde) şöyle görünür:

add_header X-Frame-Options "SAMEORIGIN" always;
add_header Content-Security-Policy "frame-ancestors 'self' https://guvenilir-ortak-site.com" always;

oEmbed nedir, iframe yerine ne zaman kullanmalıyım?

WordPress'in çoğu kullanıcının farkında olmadığı çok güçlü bir özelliği vardır: oEmbed. YouTube, Vimeo, X (Twitter), Spotify, TikTok gibi popüler platformların bir içeriğini gömmek için aslında iframe koduna ihtiyacınız yoktur. İçeriğin sadece URL adresini (örneğin bir YouTube video bağlantısını) editörde boş bir satıra yapıştırmanız yeterlidir. WordPress bu adresi otomatik olarak tanır ve içeriği düzgün, mobil uyumlu ve güvenli bir gömülü oynatıcıya dönüştürür.

oEmbed'in iframe kopyalamaya göre üç büyük avantajı vardır. Birincisi, unfiltered_html yetkisi gerektirmez; Yazar rolündeki bir kullanıcı bile URL yapıştırarak video gömebilir, çünkü WordPress bunu güvenli bir yöntemle yönetir. İkincisi, gömme kodu platform tarafındaki değişikliklere karşı otomatik güncellenir. Üçüncüsü, çıktı zaten büyük ölçüde responsive'dir. Bu yüzden desteklenen bir platformdan içerik gömüyorsanız, ilk tercihiniz her zaman iframe kodu değil, düz URL yapıştırmak olmalıdır.

Ancak oEmbed her yerde çalışmaz. Kendi özel uygulamanız, harici bir form aracı, bir rezervasyon takvimi, bir PDF görüntüleyici veya oEmbed sağlayıcısı olmayan bir site söz konusuysa, bu durumda iframe kaçınılmazdır ve bu yazının diğer yöntemlerine başvurmanız gerekir. oEmbed'in desteklediği sağlayıcı listesi zaman içinde değişebilir; bazı platformlar API politikalarını değiştirdiğinde otomatik gömme çalışmayabilir, bu yüzden gömdükten sonra çıktıyı ön yüzde mutlaka doğrulayın.

HTTP / HTTPS karışık içerik (mixed content) iframe'i engelliyor mu?

Sık atlanan ama çok yaygın bir neden de "mixed content" (karışık içerik) sorunudur. Siteniz HTTPS (güvenli, kilitli) üzerinden yayınlanıyorsa ama iframe'in kaynak adresi (src) http:// ile başlıyorsa, tarayıcı güvenlik gereği bu iframe'i yüklemeyi reddeder. Konsolda "Mixed Content: The page was loaded over HTTPS, but requested an insecure frame" gibi bir uyarı görürsünüz ve iframe boş kalır.

Çözüm basittir: iframe kodundaki src="http://..." adresini src="https://..." olarak değiştirin. Eğer karşı site HTTPS desteklemiyorsa (yani güvenli sürümü yoksa), o içeriği HTTPS bir sayfaya gömemezsiniz; bu, tarayıcının koyduğu aşılamaz bir kuraldır. Bu durumda ya karşı sitenin HTTPS'e geçmesini beklemeniz ya da alternatif bir kaynak bulmanız gerekir. Protokolü belirtmeden başlayan (örneğin //ornek.com gibi) protokol-bağımsız adresler de sayfanın protokolünü kullandığı için burada işe yarar.

Tema veya sayfa oluşturucu iframe'i bozuyor olabilir mi?

Bazı durumlarda ne yetki ne de güvenlik başlığı sorunun kaynağıdır; suçlu, kullandığınız tema ya da bir sayfa oluşturucu (Elementor, WPBakery, Divi gibi) eklentisidir. Bu eklentiler kendi içerik işleme katmanlarına sahiptir ve klasik "Özel HTML" bloğundan farklı davranırlar.

Elementor kullanıyorsanız, iframe'i düz bir metin widget'ına değil, özel olarak "HTML" widget'ına yapıştırmanız gerekir. Divi'de "Code" (Kod) modülü, WPBakery'de "Raw HTML" öğesi bu iş içindir. Yanlış öğeye yapıştırdığınızda kod ya kaçış karakterlerine (escape) dönüştürülür ya da silinir. Ayrıca bazı temaların içerik filtreleri (the_content filtresine bağlı fonksiyonlar) iframe'i ön yüzde gösterirken bozabilir. Bunu test etmek için geçici olarak varsayılan bir WordPress temasına (örneğin güncel Twenty Twenty serisi bir tema) geçin ve iframe'in düzgün çalışıp çalışmadığına bakın. Çalışıyorsa, sorun temanızda veya sayfa oluşturucudadır ve o eklentinin doğru HTML/Kod öğesini kullanmanız gerekir.

Önbellek (cache) ve CDN, iframe değişikliğini neden göstermiyor?

Bazen iframe'i doğru şekilde eklersiniz, ön yüzde bir türlü görünmez ya da tam tersine sildiğiniz eski bir iframe hâlâ ekranda durur. Bu noktada saatlerce yetki ve başlık ayarıyla uğraşmadan önce akla ilk gelmesi gereken şey önbellektir. WordPress dünyasında birden çok önbellek katmanı üst üste çalışır ve her biri, yaptığınız değişikliği geciktirebilir.

En yaygın katmanlar şunlardır: tarayıcınızın kendi önbelleği, WP Rocket veya W3 Total Cache gibi bir önbellekleme eklentisi, sunucu tarafındaki bir nesne/sayfa önbelleği (örneğin Varnish veya LiteSpeed Cache) ve en dışta Cloudflare gibi bir CDN. Siz düzenleyicide değişikliği kaydettiğinizde, ziyaretçiye sunulan sayfa hâlâ bu katmanların birinden gelen eski bir kopya olabilir. Bu yüzden "değişiklik yansımıyor" dediğiniz durumların önemli bir kısmı aslında bir iframe sorunu bile değildir; sadece bayat bir önbellek kopyasıdır.

Doğru sıralama şudur: önce önbellekleme eklentinizden tüm önbelleği temizleyin, ardından varsa CDN önbelleğini (Cloudflare panelinde "Purge Cache") boşaltın, en son da tarayıcınızda sert yenileme (Ctrl+F5 veya Cmd+Shift+R) yapın. Kesin sonuç için sayfayı bir de gizli/özel pencerede açın; çünkü gizli pencere çoğu tarayıcı önbelleğini atlar. iframe'in kaydedilip kaydedilmediğini kesin anlamak istiyorsanız, "kaynağı görüntüle" seçeneğiyle sayfanın ham HTML'ine bakın; iframe etiketi kaynakta varsa sorun görüntülemede, yoksa sorun kaydetmededir. Bu ayrım, sizi doğru çözüm koluna yönlendirir.

iframe eklentisi kullanmalı mıyım, hangisini seçmeliyim?

Eğer functions.php ile uğraşmak istemiyorsanız veya yetki değişikliğinin getirdiği güvenlik riskini almak istemiyorsanız, bir iframe eklentisi en pratik ve güvenli yoldur. Bu eklentiler genellikle bir "shortcode" (kısa kod) sunar; iframe'i doğrudan yapıştırmak yerine [iframe src="..." width="..." height="..."] gibi bir kısa kod kullanırsınız. Böylece WordPress'in içerik temizleyicisi devreye girmez ve iframe silinmez. Üstelik bu yöntem, tüm HTML'e değil yalnızca kontrollü bir iframe çıktısına izin verdiği için, unfiltered_html yetkisi vermekten çok daha güvenlidir.

Bir eklenti seçerken şu üç kritere bakın: son güncelleme tarihi yakın olmalı (bakımlı bir eklenti), aktif kurulum sayısı yüksek olmalı ve kullandığınız WordPress sürümüyle uyumlu olarak işaretlenmiş olmalı. Terk edilmiş, yıllardır güncellenmemiş bir güvenlik/iframe eklentisi, çözdüğünden daha büyük bir güvenlik açığı getirebilir. Kurduktan sonra eklentiyi tek bir test yazısında deneyin ve ön yüzde doğrulayın.

Responsive (mobil uyumlu) iframe CSS nasıl yapılır?

iframe'iniz artık kaydediliyor ve görünüyor, ancak sabit bir width="600" height="400" değeriyle eklendiği için mobil ekranlarda taşıyor ya da orantısız görünüyor olabilir. Bunu çözmek için iframe'i orantısını koruyan bir sarmalayıcı içine almanız gerekir. Modern ve en temiz yöntem CSS'in aspect-ratio özelliğini kullanmaktır:

<div class="responsive-iframe">
  <iframe src="https://www.ornek-site.com/gomulu"
    title="Gömülü içerik" loading="lazy"></iframe>
</div>

<style>
.responsive-iframe {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9; /* videolar için ideal oran */
}
.responsive-iframe iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
</style>

Burada iframe'in kendi width ve height değerlerini kaldırdığımıza ve boyutu tamamen sarmalayıcı div üzerinden kontrol ettiğimize dikkat edin. aspect-ratio: 16 / 9 değeri videolar için idealdir; bir harita veya form gömüyorsanız bu oranı içeriğe göre (örneğin 4 / 3 veya 1 / 1) değiştirebilirsiniz. Bu CSS'i her seferinde tekrar yazmamak için temanızın Ek CSS bölümüne (Görünüm > Özelleştir > Ek CSS) bir kez ekleyip, sadece <div class="responsive-iframe"> sarmalayıcısını kullanmanız yeterli olur.

Bir de loading="lazy" özelliğine dikkatinizi çekmek isterim. Bu, iframe'in ancak kullanıcı o bölüme kaydırdığında yüklenmesini sağlar; sayfanızın açılış hızını ciddi şekilde iyileştirir ve özellikle birden fazla iframe içeren sayfalarda çok faydalıdır.

Adım adım iframe sorununu nasıl teşhis ederim?

Bütün bu bilgiyi tek bir mantıksal akışa dönüştürelim. iframe sorununuzu hangi noktada olursanız olun sistematik olarak çözmek için aşağıdaki sırayı takip edin. Her adımda sonucu kontrol edip bir sonrakine geçin; sorun hangi adımda çözülürse orada durun.

Bu akışın en kritik adımı ilkidir. "Kod siliniyor mu, yoksa duruyor ama görünmüyor mu?" sorusunun cevabı, sizi tamamen farklı iki çözüm yoluna gönderir. Silinme sorunu sizin sitenizin/yetkinizin kontrolündedir ve çözülebilir. Görünmeme sorunu ise çoğu zaman karşı sitenin kontrolündedir ve orada yapabileceğiniz tek şey resmi gömme yöntemini kullanmaktır.

iframe kullanmanın güvenlik ve SEO açısından bilinmesi gerekenleri nelerdir?

iframe güçlü bir araçtır ama bilinçsiz kullanıldığında hem güvenlik hem de performans/SEO açısından bedeli olur. Güvenlik tarafında, güvenmediğiniz kaynaklardan iframe gömmekten kaçının; çünkü kötü niyetli bir iframe, kullanıcıyı yanıltan (clickjacking) veya zararlı içerik gösteren bir vektör olabilir. Gömdüğünüz kaynağa güvenmiyorsanız, iframe etiketine sandbox özniteliği ekleyerek çerçevenin yapabileceklerini kısıtlayabilirsiniz. Bu, WordPress'in iframe'i varsayılan olarak neden güvensiz saydığını ve unfiltered_html yetkisiyle koruduğunu da açıklar.

SEO tarafında ise şunu bilin: iframe içine gömülen içerik, sizin sayfanızın metni olarak sayılmaz. Arama motorları iframe içeriğini genellikle kaynak sitenin içeriği olarak değerlendirir. Yani önemli, sıralanmasını istediğiniz metinleri iframe içine koymayın; onları doğrudan sayfa gövdesine yazın. iframe'i video, harita, form gibi tamamlayıcı öğeler için kullanın, ana içeriğinizi taşımak için değil. Ayrıca çok sayıda iframe, sayfa yüklenme sürenizi uzatarak Core Web Vitals metriklerinizi olumsuz etkileyebilir; bu yüzden yukarıda bahsettiğimiz loading="lazy" önerisi sadece hız için değil, dolaylı olarak SEO için de önemlidir.

Sıkça Sorulan Sorular

iframe kodum kaydedince neden siliniyor?

En yaygın sebep, yazıyı kaydeden kullanıcının unfiltered_html yetkisine sahip olmamasıdır. WordPress güvenlik gereği iframe etiketini bu yetkisi olmayan kullanıcılardan wp_kses fonksiyonuyla siler. İkinci en sık sebep, bir güvenlik eklentisinin (Wordfence, Sucuri gibi) iframe'i filtrelemesidir. Yönetici hesabıyla "Özel HTML" bloğunu kullanmak veya güvenli bir iframe eklentisi tercih etmek çözer.

Editörde iframe görünüyor ama yayınlayınca kayboluyor, neden?

Blok editörünün önizlemesi bazı sürümlerde iframe'i geçici olarak gösterebilir, ancak asıl kaydetme işleminde kullanıcının yetkisi kontrol edilir ve yetki yoksa kod silinir. Bu yüzden önizlemedeki görüntü yanıltıcı olabilir. Gerçek testi her zaman siteyi ön yüzde, ziyaretçi gibi açarak yapın.

iframe kodu duruyor ama çerçeve boş görünüyor, sorun ne?

Bu genellikle gömmeye çalıştığınız karşı sitenin X-Frame-Options veya Content-Security-Policy frame-ancestors başlığıyla kendisinin çerçevelenmesini yasaklamasından kaynaklanır. Tarayıcı konsolunda (F12) "refused to connect" veya "X-Frame-Options" hatası görürsünüz. Bu bir WordPress sorunu değildir; karşı sitenin resmi gömme kodunu kullanmanız gerekir.

Editör veya Yazar rolündeki kullanıcılara iframe eklemesine nasıl izin veririm?

functions.php dosyasına ekleyeceğiniz bir kodla ilgili role unfiltered_html yetkisi tanımlayabilirsiniz. Ancak bu, o role tüm HTML'i (script dahil) kaydetme izni verir ve güvenlik riski taşır. Daha güvenli yol, yalnızca iframe çıktısına izin veren bir shortcode tabanlı iframe eklentisi kullanmaktır.

YouTube videosunu gömmek için iframe koduna gerek var mı?

Hayır. WordPress'in oEmbed özelliği sayesinde, YouTube video bağlantısını boş bir satıra düz metin olarak yapıştırmanız yeterlidir; WordPress otomatik olarak güvenli ve mobil uyumlu bir oynatıcıya dönüştürür. Bu yöntem unfiltered_html yetkisi gerektirmez ve Yazar rolündeki kullanıcılar bile kullanabilir.

WordPress multisite'te iframe neden hiç çalışmıyor?

Multisite kurulumlarında unfiltered_html yetkisi varsayılan olarak yalnızca Süper Yönetici hesabına aittir; normal site yöneticileri bile iframe kaydedemez. Belirli kullanıcılara izin vermek için map_meta_cap filtresini kullanan özel bir kod eklemeniz veya bir iframe eklentisi kurmanız gerekir.

Kendi sitemi başka bir siteye gömemiyorum, engeli nasıl kaldırırım?

Sitenizin sunucusu veya bir güvenlik eklentisi X-Frame-Options başlığı gönderiyordur. Apache'de .htaccess, Nginx'te server yapılandırmasından bu başlığı ayarlayabilirsiniz. Belirli bir güvenilir siteye izin vermek için, artık desteklenmeyen ALLOW-FROM yerine Content-Security-Policy'nin frame-ancestors direktifini kullanın.

iframe mobilde taşıyor, nasıl responsive yaparım?

iframe'in sabit width ve height değerlerini kaldırın, onu bir sarmalayıcı div içine alın ve CSS'te aspect-ratio (örneğin 16/9) ile en boy oranını sabitleyip genişliği yüzde 100 yapın. Bu yöntem iframe'in her ekran boyutunda orantısını koruyarak sığmasını sağlar ve ayrıca loading="lazy" ekleyerek sayfa hızını iyileştirir.