Sitenin İçinde Başka Bir Sayfa Açma Kodu

Web sitenize başka bir web sayfası, Google Haritalar, YouTube videosu veya harici herhangi bir içerik gömmek istiyorsanız HTML iframe elementi en yaygın kullanılan yöntemdir. Bu kapsamlı rehberde iframe kullanımını, tüm parametrelerini, güvenlik konularını ve WordPress entegrasyonunu öğreneceksiniz.

iframe Nedir ve Ne İçin Kullanılır?

iframe (Inline Frame), bir HTML sayfası içinde başka bir HTML belgesini veya URL’yi gömülü olarak görüntüler. En yaygın kullanım alanları:

• YouTube, Vimeo veya başka bir platformdan video gömmek
• Google Haritalar veya Yandex Harita gömmek
• Başka bir web sitesini veya sayfayı göstermek
• Form ve widget embeds (Typeform, Calendly vb.)
• Ödeme sayfası veya banka widget’ı gömmek
• Belge ve PDF görüntüleyici gömmek

Temel iframe Kodu

<iframe 
  src="https://www.ornek-site.com" 
  width="800" 
  height="600" 
  frameborder="0" 
  scrolling="auto"
  title="İçerik açıklaması">
  Tarayıcınız iframe desteklemiyor.
</iframe>

Tüm Parametreler ve Açıklamaları

• src — Gösterilecek URL (zorunlu parametre)
• width — Genişlik (piksel veya yüzde: “800” veya “100%”)
• height — Yükseklik (piksel: “600”)
• frameborder — Çerçeve çizgisi: 0=yok, 1=var (CSS border ile de yapılabilir)
• scrolling — Kaydırma çubuğu: yes / no / auto
• title — Erişilebilirlik için açıklama (önerilir, screen reader kullanıcıları için)
• allowfullscreen — Tam ekran izni (video için gerekli)
• loading=”lazy” — Görünür alana girilince yükle (sayfa hızı için)
• sandbox — Güvenlik kısıtlamaları (aşağıda detaylı açıklanmıştır)
• allow — İzinler: “camera”, “microphone”, “fullscreen”, “geolocation” vb.

WordPress’te iframe Ekleme

Gutenberg Editöründe:

• Yeni blok eklemek için + ikonuna tıklayın
• Özel HTML bloğunu arayın ve seçin
• iframe kodunuzu bu alana yapıştırın
• Önizleme yaparak kontrol edin

Klasik Editörde:

• Editör üst kısmındaki Metin sekmesine geçin (Görsel değil)
• iframe kodunu istediğiniz yere yapıştırın
• Görsel sekmeye dönmeyin — Görsel moda geçmek HTML’yi bozabilir

WordPress iframe Engeli

WordPress bazı güvenlik eklentileri ve konfigürasyonlarda iframe’i filtreleyebilir. Sorun yaşarsanız:

• wp-config.php‘ye ekleyin: define('ALLOW_UNFILTERED_UPLOADS', true);
• Veya kullanıcı rolü için unfiltered_html yetkisi verin

Responsive (Mobil Uyumlu) iframe

Sabit piksel değerleri mobil cihazlarda taşma yapar. Tam genişlikte responsive iframe için CSS sarmalayıcı kullanın:

<div style="position:relative; padding-bottom:56.25%; height:0; overflow:hidden; max-width:100%;">
  <iframe 
    src="https://www.ornek-site.com" 
    style="position:absolute; top:0; left:0; width:100%; height:100%; border:0;"
    allowfullscreen>
  </iframe>
</div>

padding-bottom değeri oranı belirler: 16:9 için %56.25, 4:3 için %75, 1:1 için %100.

Güvenlik: sandbox Attribute

Güvenilir olmayan kaynaklar için sandbox attribute ile kısıtlama ekleyin:

<iframe src="https://..." sandbox="allow-scripts allow-same-origin"></iframe>

• allow-scripts — JavaScript çalıştırılmasına izin ver
• allow-same-origin — Aynı kaynak politikasına izin ver
• allow-forms — Form gönderimlerine izin ver
• allow-popups — Açılır pencerelere izin ver

Sık Karşılaşılan Sorunlar

• “Refused to display in a frame”: Hedef site X-Frame-Options: DENY başlığı kullanıyor — o siteyi iframe ile gösteremezsiniz
• Mixed content hatası: HTTPS sitede HTTP iframe çalışmaz — her iki taraf da HTTPS olmalı
• Boş iframe: Kaynakta JavaScript hatası olabilir — F12 Console’u kontrol edin

Google Haritalar iframe

Google Maps’te konum açın → Paylaş → Haritayı Göm → kodu kopyalayın. Hazır iframe kodu verilir, direkt yapıştırabilirsiniz.

Sonuç

iframe, harici içerikleri sitenize entegre etmenin en hızlı ve evrensel yoludur. Responsive kullanım için CSS sarmalayıcı yöntemini tercih edin, güvenilir olmayan kaynaklar için sandbox kullanın ve her zaman HTTPS protokolünü tercih edin.