iFrame'leri WordPress'e Gömme

Çevrimiçi içerik paylaşmak yaygın bir uygulamadır. Bununla birlikte, belirli içerik türlerini nasıl dahil edeceğinizi anlamaya çalışırken şaşırmış olabilirsiniz. Diğer web sitelerinden büyük dosyaları veya belirli öğeleri paylaşmak bazen zor olabilir.

Neyse ki, WordPress web sitenizde belirli içerik türlerini görüntülemek için kullanabileceğiniz oldukça basit bir web tasarım uygulaması var. Satır İçi Çerçeveler (iFrame'ler) oluşturmak için HTML kullanmak görüntüleri, videoları ve diğer ortamları çevrimiçi paylaşmayı kolaylaştırabilir.

Bu makalede, bir web sitesinde iFrame'lerin farklı kullanımlarını inceleyeceğiz. Ayrıca hem manuel olarak hem de bir eklenti ile iFrame oluşturma adımlarını inceleyeceğiz. Başlayalım!

iFrame Kullanımları

Bir iFrame kullandığınızda, aslında web sitenizde başka bir yerden içeriğin görüntülenmesini sağlayan küçük bir portal oluşturursunuz. Bu, birkaç senaryoda yararlı olabilir.

Bir iFrame kullanmak, görüntülemek istediğiniz dosyaları gerçekten barındırmanız gerekmediği anlamına gelir. İçerik orijinal konumunda kalır ve sitenizdeki çerçeveden görüntülenebilir. Bu tekniğin yardımcı olmasının bir yolu, büyük dosyaları görüntülemek istediğiniz zamandır. Bir iFrame, yükleme hızlarını düşürmeden bu içeriği web sitenize getirebilir.

HTML5'te izin verilen tek çerçeve türünün iFrame'ler olduğunu belirtmekte fayda var. Bunları görüntülemek için kullanabileceğiniz çeşitli farklı içerik türleri vardır, örneğin:

• Görüntüler: Dış bir galeriden yüksek kaliteli görüntüler göstermek ve dosya boyutundan ödün vermek zorunda kalmamak için iFrame'leri kullanabilirsiniz.
• Videolar: Videolarınızı YouTube veya Vimeo gibi bir platformda barındırmak ve bunları web sitenize yerleştirmek için bir iFrame kullanmak, web sitenizin depolama alanını boşaltırken kullanıcı deneyimini geliştirebilir.
• Diğer web içeriği: Portföy sayfaları veya tarifler gibi diğer web sitelerinden içeriği öne çıkarmak, hedef kitlenize kolayca zengin içerik getirebilir.

iFrame'leri kullandığınızda karmaşık telif hakkı kurallarından da kaçınabilirsiniz. Birkaç mahkeme, telif hakkıyla korunan materyali görüntülemek için bir iFrame kullanmanın her durumda bir telif hakkı ihlali teşkil etmediğine karar vermiştir.

Bir web sitesi, içeriğinin bir iFrame'e dahil edilmesini önlemek için komut dosyaları da içerebilir. Ancak, kullandığınız herhangi bir içeriğin orijinal yaratıcısına her zaman atıfta bulunmanızı veya nasıl devam edeceğinizden emin değilseniz yasal tavsiye almanızı öneririz.

iFrame'leri Eklentiyle Kullanma

iFrame'leri bir WordPress web sitesinde kullanmanın en kolay yollarından biri, bir iFrame eklentisi kullanmaktır. Neyse ki, aralarından seçim yapabileceğiniz çok sayıda yüksek puanlı seçenek var.

1. Adım: Bir iFrame eklentisi indirin ve yapılandırın

Örneğimiz için, Gelişmiş iFrame eklentisini kullanacağız. Esnektir, kullanımı kolaydır ve çok iyi derecelendirilmiştir:

Eklentiyi kurup etkinleştirdikten sonra, WordPress kontrol panelinizde yeni bir Gelişmiş iFrame'ler menü öğesi bulacaksınız. Gelişmiş iFrame, oldukça geniş bir seçenekler grubuna sahiptir. Seçenekler sekmesiyle başlamak ve "Hızlı Başlangıç" videosunu incelemek isteyeceksiniz:

Ardından, aşağı kaydırabilir ve eklentinin bazı seçeneklerini inceleyebilirsiniz. Bunların tümü, pek çok yardımcı açıklama ve seçmesi kolay seçeneklerle ayarlanmıştır:

Advanced iFrames ayrıca, içeriğin bir iFrame'e dahil edilmesini engelleyen komut dosyaları içerip içermediğini görmek için sağladığınız herhangi bir URL'yi kontrol edecek ücretsiz bir iFrame denetleyicisi sağlar. Herhangi bir URL'yi web sitenizdeki bir iFrame'de kullanmadan önce bu araç aracılığıyla çalıştırmak iyi bir fikirdir.

Temel Ayarlar sekmesini de incelemek isteyeceksiniz. Burada iFrame'in yükseklik, genişlik ve çerçeve kenarlıkları gibi öğelerini özelleştirebilirsiniz:

Eklentinin ayarlarını ihtiyaçlarınızı karşılayacak şekilde yapılandırdıktan sonra web sitenizde iFrame'leri kullanmaya başlayabilirsiniz.

2. Adım: Gelişmiş iFrame Bloğu'nu kullanın

WordPress Block Editor'da, artık kullanıma hazır bir Gelişmiş iFrame bloğuna sahip olacaksınız:

Bu bloğu ilk kez kullanmak istediğinizde bulmakta sorun yaşıyorsanız, Widget'lar kategorisi altında olacaktır.

Gelişmiş iFrame bloğuna tıkladığınızda, eklenti oluşturucunun web sitesindeki içerikle otomatik olarak yüklenir. Sayfanın sağ tarafındaki Blok seçeneklerini kullanarak bloğu yapılandırabilirsiniz:

Orada, iFrame'de görünmesini istediğiniz içeriğin URL'sini ekleyebilirsiniz. Ayrıca, gerekirse eklentinin bazı ayarlarını geçersiz kılabileceksiniz.

3. Adım: Sitenizi Önizleyin

URL'nizi iFrame denetleyicisi ile test ettiyseniz, hazır olmalısınız. Bununla birlikte, içeriğinizi yayınlamadan önce değişikliklerinizi önizlemek her zaman en iyisidir. Düzenlerken ve değişiklikler yaparken iFrame'inizin canlı bir önizlemesini görmelisiniz.

Gönderiyi sitenizin menüleri ve kenar çubukları bağlamında görüntülemek için düzenleme pencerenizin sağ üst köşesindeki Önizleme seçeneğini de kullanabilirsiniz.

iFrame'leri Eklenti Olmadan Kullanma

Bir eklenti ile çalışmak istemiyor ama yine de iFrame'leri kullanmak istiyorsanız, şanslısınız! iFramed içeriğini dahil etmek için gönderilerinize ve sayfalarınıza manuel olarak kod uygulayabilirsiniz.

1. Adım: Bir Gömme Kodu Girin

YouTube'dan bir video gibi içeriği web sitenize dahil etmek istiyorsanız, YouTube'un sağladığı yerleştirme kodunu bulmanız gerekir. Bunu, Paylaş'ı tıklayarak bir videonun altında bulabilirsiniz.

Bu, bir paylaşım seçenekleri menüsü getirecektir. iFrame'iniz için ihtiyacınız olan kodu almak için Göm'ü seçmek isteyeceksiniz.

Gömülü içeriğin nasıl görüneceğinin önizlemesini içeren ayrı bir pencere açılacaktır. Daha sonra bir iFrame kod parçacığını kopyalayabileceksiniz.

İzleyicilerin içeriği belirli bir zaman kodunda otomatik olarak görüntülemeye başlamasını istiyorsanız, Başlama saati kutusunu da işaretleyebilirsiniz.

Ardından, WordPress gönderinize geri dönecek ve Özel HTML bloğunu ekleyeceksiniz. Bunu Biçimlendirme kategorisi altında bulabilirsiniz.

Bu bloğu gönderinize ekledikten sonra, YouTube sayfasından kopyaladığınız embed kodunu yapıştırmanız yeterlidir.

Ardından, yerleştirmenin düzgün çalıştığından ve istediğiniz gibi göründüğünden emin olmak isteyeceksiniz. iFrame'inizin çalışıp çalışmadığını görmek için Özel HTML bloğunda Önizleme'ye tıklayabilirsiniz.

Bununla, web sitenize başarıyla bir iFrame yerleştirdiniz. Aynı işlem, size yerleştirme kodları sağlayan herhangi bir platform için çalışacaktır.

2. Adım: iFrame'lerinizi Özelleştirin

Gönderinizde veya sayfanızda iFrame'in görüntülenme şeklinden hâlâ memnun değilseniz, koddaki bazı değerleri manuel olarak ayarlayabilirsiniz. iFrame'lerin web sitenizde nasıl görüneceğini tamamen özelleştirmek için Basamaklı Stil Sayfaları (CSS) kullanmanız önerilir.

iFrame etiketi, bir dizi özel özelliğe izin verir. Ancak, bunların çoğunun artık HTML5 tarafından desteklenmediğini unutmamak önemlidir. Belirli biçimlendirmeyi doğrudan Özel HTML bloğunda geçersiz kılamayacağınız için, muhtemelen daha önce belirttiğimiz gibi temanızın CSS'sini araştırmanız gerekecektir.

3. Adım: iFrame İçeriğinizi Düzenli Olarak Kontrol Edin

iFrame'leri kullanırken, çerçevelenmiş içeriği düzenli olarak kontrol etmek isteyeceksiniz. Herhangi bir editoryal veya kalite kontrolünüz olmayan bir içeriğe pencere açtığınız için her an sitenizde sorun yaratabilir.

Örneğin, örneğimizde kullandığımız video, YouTube kanalından kaldırılırsa, gönderimizin içinde bozuk bir oynatıcı olacaktır. Bu, web sitenizde görsel bir etki bırakacağından, kırık bir bağlantıdan biraz daha belirgindir. iFrame içeriğinizi düzenli olarak kontrol etmek, artık çalışmayan herhangi bir medyayı değiştirmenize veya kaldırmanıza olanak tanır.

WP Engine ile Sitenizi Optimize Edin

Web sitenizde iFrame'leri kullanmak, zengin medyayı ve dinamik içeriği birleştirmeye devam ederken her şeyin sorunsuz çalışmasını sağlayabilir. WP Engine'de, önemli web tasarım konseptlerini anlamanın ve piyasadaki en iyi geliştirici kaynaklarına erişmenin önemini biliyoruz.

Dahası, müşterilerinize en iyi dijital deneyimleri sağlamanıza yardımcı olmaya kararlıyız. Tamamen yönetilen WordPress barındırma planlarından oluşan çok çeşitli seçeneklerimiz var, böylece güzel web siteleri tasarlamaya odaklanabilirsiniz!