WordPress'e iFrame Nasıl Gömülür (Eklentili ve Eklentisiz)

Web sitenize iFrame'leri gömmek için web'de birçok kullanım vardır. Bu, videolar, resimler ve hatta diğer web sitelerini içerebilir. Başka bir sunucudan içerik gömerek sitenizde depolama alanından tasarruf etmek için sitenizdeki iframe'leri bile kullanabilirsiniz.

Burada , eklentili ve eklentisiz bir iframe'i WordPress'e nasıl yerleştireceğinizi göstereceğiz. Ek olarak, CSS kullanarak YouTube yerleştirmelerinin nasıl duyarlı hale getirileceğini ekledim.

iFrame nedir?

iFrame'ler, oluşturulduğundan beri html'nin bir parçası olmuştur. iFrame'ler, web sitelerinin diğer web sitelerinden içerik yerleştirmesine izin verir.

Birçok site, WordPress tarafından yerel olarak desteklenen oEmbed'ler lehine iFrame'lerde görünmelerine izin vermeyen yeni güvenlik politikalarına sahiptir. Ancak oEmbed desteği sunmayan siteler için bir iFrame kullanışlı olabilir.

Eklentisiz WordPress'e iFrame nasıl gömülür

WordPress'e iFrame eklemenin en temel yolu HTML kullanmaktır . Bu, klasik düzenleyicinin "Metin" sekmesinde yapılabilir.

Gutenberg kullanıyorsanız, bir Özel HTML bloğu eklemeniz gerekir.

Bing.com'u bir iFrame'e yerleştirmek için örnek HTML. Bing URL'sini, bir iFrame ile gömmek istediğiniz herhangi bir siteyle değiştirebilirsiniz.

This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters

Show hidden characters

< iframe src =” https://bing.com ” height =” 400 ” > </ iframe >

view raw

iframe-example.html

hosted with by GitHub

iFrame özellikleri

• Src – iFrame'in kaynağı, bu bir URL'dir. Sitenizde SSL varsa, tüm iFrame'lerin https:// ile başladığından emin olmanız gerekir.
• Genişlik/Yükseklik – Genişlik ve yükseklik, iFrame'inizin boyutunu tanımlayan piksel değerleridir.
• Frameborder – frameborder=”1″ ayarı, iFrame'in kenarlarında küçük bir kenarlık gösterecektir. frameborder=”0″, iFrame'in kenarlarını gizleyerek sayfanızla aynı hizada olmasını sağlar (iyi video videoları).
• Kaydırma – iFrame'inizde kaydırma çubukları isteyip istemediğinize bakılmaksızın, değerler "evet", "hayır" veya "otomatik" içerir.
• Hizala – iFrame'in varsayılan hizalamasını ayarlayın, değerler arasında “sol” “sağ” “üst” “orta” “alt” bulunur.

Birçok ana bilgisayar güvenlik endişeleri nedeniyle iframe'leri engelleyeceğinden bu en uygun çözüm değildir. Bu nedenle, bir sonraki WordPress eklentisi yöntemimizi kullanmak en uygunudur.

Ayrıca, tüm sitelerin çalışmayacağını da belirtmek önemlidir . Örneğin, yerleştirdiğiniz site kendisinin bir iframe'e dahil edilmesini engelleyebilir. Sitenizde ayrıca SSL varsa (URL'nizden önce https://), bir iframe aracılığıyla https olmayan bir sayfa yerleştirmek, tarayıcılar https olmayan varlıkları engelleyeceğinden çalışmayacaktır.

Elementor gibi bir sayfa oluşturucu ile bir iframe yerleştiriyorsanız, genellikle yukarıdaki iframe koduyla onların "html" bloğunu kullanabilirsiniz.

WordPress iFrame Gömme Eklentisi

Bir WordPress iFrame yerleştirmenin en iyi yolu bir eklenti kullanmaktır. WordPress.org deposundaki iFrame eklentisi size en iyi sonuçları verecektir. Bu eklenti, bir iFrame yerleştirmeyle aynı özellikleri sunar, ancak kullanımı basit bir kısa kod aracılığıyla oluşturulur.

Aşağıda, iFrame eklentisi için kısa kodun nasıl kullanılacağına dair bir örnek verilmiştir.

This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters

Show hidden characters

[iframe src=”https://www.youtube.com/embed/fd0k_hbXWcQ” width=”100%” height=”500″]

view raw

wordpress-iframe-shortcode

hosted with by GitHub

Kısa kodlar konusunda yeniyseniz, eklentiler yüklendikten sonra bunu editörünüze eklemeniz yeterlidir.

Bir eklenti kullanıyor olsanız da şimdi de benzer sınırlamalar geçerli olacaktır. Yerleştirme işe yaramazsa, büyük olasılıkla gömdüğünüz site onu engelliyor veya https kullanıyorsunuz ve https olmayan bir sayfa dahil ediyorsunuz.

YouTube Embedlerini WordPress'te Duyarlı Hale Getirin

Sayfanıza bir YouTube videosu ekliyorsanız, duyarlı web tasarımı için sayfayı yeniden boyutlandırırken en boy oranının doğru olmadığını fark edebilirsiniz. Bunun nedeni, iFrame'lerin sabit bir yüksekliğe sahip olmasıdır, aşağıdaki CSS'yi kullanarak yerleştirmelerinizi duyarlı hale getirebilirsiniz.

This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters

Show hidden characters

	. responsive-embed-container {
	position : relative;
	display : block;
	overflow : hidden;
	height : 0 ;
	max-width : 100 % !important ;
	}
	. embed-responsive-16by9 {
	padding-bottom : 56.25 % ;
	aspect-ratio : 16 / 9 ;
	}
	. responsive-embed-container iframe , . responsive-embed-container object , . responsive-embed-container embed {
	position : absolute;
	left : 0 ;
	top : 0 ;
	height : 100 % ;
	width : 100 % ;
	}

view raw

responsive-embed-youtube.css

hosted with by GitHub

Bu CSS'yi sitenize ekledikten sonra, herhangi bir videoyu bu <div class=”responsive-embed-container embed-responsive-16by9″> gibi bir div ile sarabilirsiniz, bu da ona duyarlı olması için uygun sınıfı verecektir. Aşağıda bu CSS'yi kullanarak bir yerleştirmenin nasıl çalışacağına dair tam bir örnek görebilirsiniz.

This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters

Show hidden characters

< div class =” responsive-embed-container ” > < iframe width =” 560 ” height =” 315 ” frameborder =” 0 ” allowfullscreen src =” https://www.youtube.com/embed/fd0k_hbXWcQ ” > </ iframe > </ div >

view raw

responsive-css-embed-html.html

hosted with by GitHub

Ek olarak, tüm YouTube oEmbed'lerini uygun div ile otomatik olarak sarmak için bu kod parçacığını function.php'nize ekleyebilirsiniz.

This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters

Show hidden characters

	<?php
	add_filter ( ’embed_oembed_html’ , function ( $ html , $ url , $ attr , $ post_id ) {
	if ( strpos ( $ html , ‘youtube.com’ ) !== false || strpos ( $ html , ‘youtu.be’ ) !== false ){
	return ‘<div class=”responsive-embed-container embed-responsive-16by9″>’ . $ html . ‘</div>’ ;
	} else {
	return $ html ;
	}
	}, 10 , 4 );

view raw

auto-wrap-youtube-videos.php

hosted with by GitHub

CSS, HTML veya PHP ile aşina değilseniz, Simple YouTube responsive gibi bir eklenti de kullanabilirsiniz.

---

Bu ipuçlarının, WordPress iframe'lerini yerleştirmenize yardımcı olacağını ve etki alanları arasında içerik paylaşmanıza izin vereceğini umuyoruz.

YouTube veya Twitter gibi popüler sitelerden içerik paylaşıyorsanız, URL'yi WordPress düzenleyicinize yapıştırmanız yeterlidir. Bu, içeriği otomatik olarak gömmek için bir oEmbed kullanacaktır.