iFrame Nedir? (Ve Nasıl Kullanılır)

Web siteleri daha karmaşık hale geldikçe, WordPress kullanıcılarının üçüncü taraf içeriğini kendi sayfalarında görüntülemek için bir araca ihtiyaç duyması mantıklı geliyor. Neyse ki, bunu yapmanıza yardımcı olacak iFrame adında bir HTML öğesi var.

Bu gönderide, bir iFrame'in ne olduğunu ve ne zaman kullanmanın en iyi olduğunu açıklayacağız. Ayrıca bu öğenin WordPress kullanıcıları için faydalarını tartışacağız ve size Divi Builder Modüllerimizden bazılarıyla nasıl kolayca dahil edeceğinizi göstereceğiz.

Hadi dalalım!

Youtube Kanalımıza Abone Olun

iFrame Nedir?

Bir satır içi çerçeveyi (veya iFrame), web sayfanızdaki başka bir çevrimiçi içeriğe bakan bir pencere olarak düşünebilirsiniz. Bunu tanımlamanın daha teknik yolu, başka bir HTML belgesinin içine yerleştirilmiş bir HTML belgesidir:

Kod açısından, her iFrame, sitenize yerleştirmek istediğiniz içeriğin konumunu belirtmeye yardımcı olmak için <iframe> HTML etiketlerinin yanı sıra bir src niteliği içerir. Ancak, "pencerenin" kendisinin boyutlarını belirtmek için dahil edebileceğiniz başka nitelikler de vardır.

Örneğin, yukarıdaki ekran görüntüsündeki basit iFrame örneğinin kodu:

<iframe src="https://www.elegantthemes.com" height="630" width="1920"></iframe>

Bu durumda, <iframe> etiketi, görüntülenecek sayfanın URL'sini ve pencerenin piksel cinsinden yükseklik ve genişliğini içerir. Özellik ilkelerini ( allow ), tam ekran modunu ( allowfullscreen ), ödemeleri ( allowpaymentrequests ) ve daha fazlasını etkinleştirmek için diğer özellikleri dahil edebilirsiniz.

HTML5 tarafından desteklenmeyen birçok iFrame özelliğinin ( kaydırma gibi) olduğunu unutmamak önemlidir. Bu nedenle, iFrame'lerinizi elle kodlarken güncel bilgileri kullandığınızdan emin olun.

Bir iFrame'i Ne Zaman Kullanmalısınız?

Çoğu geliştirici olmayan WordPress kullanıcısı için bir iFrame'in birincil amacı, sitenizde üçüncü taraf içeriği görüntülemektir. Bazı yaygın kullanımlar şunları içerir:

• Reklamlar. Birçok kenar çubuğu ve afiş reklamı aslında iFrame'lerdir. Bu, reklam ortaklarınızın sitenizde görüntülemek için ödeme yaptıkları içeriği kolayca sağlamalarına ve sürdürmelerine olanak tanır.
• Youtube videoları. YouTube yerleştirme kodu, platformunda barındırılan bir videoyu sayfanızda görüntülemek için bir iFrame kullanır. Bu tekniği kullanarak videoyu Medya Kitaplığınıza yükleme konusunda endişelenmenize gerek yok.
• Google Haritalar. Teslimat için bir restorandan yemek siparişi verdiyseniz, en yakın mağaza konumunu seçerken bir Google Haritalar iFrame görmüş olabilirsiniz. Ne yazık ki, Google o zamandan beri bunu Haritalar API Anahtarı ile değiştirmiştir, bu nedenle yeni kullanıcılar iFrame'ler aracılığıyla haritaları yerleştiremez.
• Sosyal medya paylaşımları. En son sosyal medya gönderilerinizi görüntülemenin bir yolu bir iFrame kullanmaktır. Bu, beğenileri, yorumları ve diğer dinamik öğeleri (kısaca açıklayacağımız gibi) içerecek şekilde otomatik olarak güncelleneceği için kullanışlıdır.
• RSS Beslemesi. Sürekli değişen sosyal medya gönderileri gibi, RSS beslemelerinin de bir iFrame kullanarak görüntülenmesi bazen daha kolaydır. src özelliği olarak RSS besleme URL'sini kullanmanız yeterlidir.

Tek Oturum Açma sistemi veya Ne Görüyorsanız Onu Alırsınız (WYSIWYG) metin düzenleyicisi geliştirmek gibi daha karmaşık kullanım durumları da vardır. Örneğin, TinyMCE düzenleyicisi (eski adıyla WordPress'in varsayılan içerik oluşturma arayüzü) bir iFrame kullanır.

iFrame'leri Kullanmanın Faydaları Nelerdir?

Çoğu kullanıcı için iFrame'ler faydalıdır çünkü birincil HTML belgesi (siteniz) ile ona yüklediğiniz harici içerik arasındaki ayrımı korurlar. Bu iki nedenden dolayı yararlıdır. İlk olarak, görüntülemek istediğiniz üçüncü taraf içeriğini güncelleme konusunda endişelenmenize gerek yok. Reklam ortaklarınız promosyonlarını değiştirebilir, Facebook özet akışınızı yenileyebilir ve Google Haritalar yeni konut gelişmelerine uyum sağlayabilir. iFrame'iniz en son sürümü yükleyecektir.

Bu yazının başında kullandığımız giriş örneğini alın. Şu anda bir Divi Doğum Günü İndirimi duyurusu içeriyor. Ancak promosyon sona erdiğinde, iFrame standart ana sayfamızı banner olmadan gösterecektir.

Ek olarak, içeriğinizle diğer sitelerin içeriği arasındaki ayrımı korumak ek güvenlik sağlayabilir. Üçüncü taraf kodunu doğrudan sitenizin dosyalarına ekleyerek, güvenlik açıklarını veya hataları yanlışlıkla içe aktarma konusunda endişelenmenize gerek yok.

Buna rağmen, güvenlik riskleri de oluşturabilecekleri için iFrame'lerin kullanımına karşı çıkan birçok geliştirici var. “Pencerenize” yüklediğiniz belgedeki tüm kötü niyetli öğeler sitenizde de mevcut olacaktır. Üçüncü taraflar, bu fırsatı kullanıcı verilerini "kimlik avlamak" için kullanabilir.

Ancak, Google, YouTube ve popüler sosyal medya veya haber platformları gibi saygın kaynaklardan üçüncü taraf içeriği alıyorsanız, bu bir sorun olmamalıdır. Her zaman olduğu gibi, sitenize yeni özellikler eklerken seçici olun.

WordPress Sitenize iFrame Eklemek için Kullanabileceğiniz 2 Divi Modülü

WordPress sitenizde iFrame'leri kullanmak istiyorsanız Divi size yardımcı olabilir. Modüllerimizden bazıları, bu kullanışlı HTML öğesini barındırmak için özellikle çok uygundur ve onunla çalışmanızı daha da kolaylaştırabilir. İşte hemen başlayabileceğiniz üç tane.

1. Video Modülü

Yukarıda bahsettiğimiz gibi, iFrame'lerin en yaygın kullanımlarından biri sitenizde YouTube videolarını görüntülemektir. Aslında, Divi'nin Video Modülünü kullandığınızda, perde arkasında tam da bunu yapar:

Önceki bir öğreticide açıkladığımız gibi, harici bir videonun URL'sini Divi Modülüne eklediğinizde, bunu görüntülemek için otomatik olarak bir iFrame oluşturur. <iframe> etiketinizi ve niteliklerinizi yazmak istemiyorsanız, bu aynı sonucu elde etmenin hızlı ve kolay bir yoludur.

2. Kod Modülü

Elbette, Divi Kod Modülünü kullanarak özel kod ekleme seçeneğiniz her zaman vardır. Bu, <iframe > etiketinizi ve niteliklerinizi elle yazmanın veya üçüncü taraf yerleştirme kodlarında bulunan iFrame'leri kullanmanın basit bir yoludur.

Örnek olarak bir Facebook gönderisini kullanacağız. Görüntülemek istediğiniz gönderinin sağ üst köşesindeki üç noktalı simgeye tıklayarak yerleştirme kodunu alın ve Yerleştir'i seçin:

Ardından iFrame kodunu kopyalayın ve Divi Kod Modülünüze ekleyin:

Sayfayı yayınladıktan veya güncelledikten sonra iFrame'iniz artık Divi Builder'da ve sitenizin ön ucunda Facebook gönderinizi gösterecektir.

Çözüm

Web'deki insanlarla bağlantı kurmanın ve bilgi paylaşmanın pek çok yararlı yolu olduğundan, YouTube videoları gibi üçüncü taraf içeriğini kendi sitenize çekmek isteyebilirsiniz. Bu nedenle, iFrame'ler, içeriğinizi harici kaynaklarınızdan ayrı tutarken bunu yapmanıza yardımcı olmak için yapılmıştır.

iFrame'lerin siteniz için yararlı bir çözüm olabileceğini düşünüyorsanız, aşağıdaki Divi Builder Modülleri en popüler içerik türlerinden bazılarını hızlı ve kolay bir şekilde dahil etmenize yardımcı olabilir:

1. Video Modülü: Video sayfasının URL'sinden başka bir şey içermeyen YouTube iFrame'lerini hızla oluşturun.
2. Kod Modülü: Kendi iFrame'lerinizi oluşturun veya Facebook gibi platformlardan üçüncü taraf yerleştirme kodlarını yapıştırın.

iFrame'leri WordPress sitenizde nasıl kullanacağınıza dair sorularınız mı var? Onları bizim için aşağıdaki yorumlar bölümünde bırakın!

Öne Çıkan Görsel VectorsMarket / Shutterstock.com