WordPress’e YouTube videosu nasıl eklenmeli?

WordPress & YouTube

YouTube videolarınızı kolayca sitenize eklemenize yarayan onlarca eklenti mevcut. Fakat bu kadar basit bir işlem için bile eklenti kullanmak istediğiniz emin misiniz?

Daha önceki makalelerimizde WordPress‘in eklenti desteğinin dikkatli ve yerinde kullanılması gerektiğini belirtmiştik. Eklentilerin veritabanında bıraktığı izler, zamanla veri sorgulama hızını, beraberinde de web sayfanızın açılma hızını yavaşlatacaktır.

Hal böyleyken gelin WordPress’in shortcode desteği ile kendimize bir video tanımlaması yapalım.

Ne yapıyoruz?

WordPress, kullanıcılarına geliştirilebilir bir shortcode desteği sunuyor. Biz bu desteği kullanarak YouTube videolarını sitemize daha hızlı ve işlevsel yükleyeceğiz. Eklenti kullanmadığımız için gereksiz eklentiler listemiz kabarmayacak, hem de shortcode mantığının temelini anlayacağız.

Yapacağımız işlemde temanızın içerisindeki function.php ve style.css dosyalarınıza erişmeniz yeterli olacak.

Başlayalım.

Nasıl yapılır?

Sırasıyla ilerleyelim.

Tasarım

İlk olarak işin en kolay kısmıyla başlayalım. Temamızın içerisindeki (wp-content/themes/temanız) CSS dosyasını açalım ki bu dosyanın adı genellikle style.css şeklindedir. Daha sonra bu dosyada video oynatıcımızı barındıracak division elemanını tasarlayalım. Kısaca aşağıdaki CSS kodlarını dosyaya ekleyelim.

.aw-player {position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden;}
.aw-player iframe,.aw-player object,.aw-player embed {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

Böyle responsive, yani sadece mobil ve tablet uyumlu değil, her türden ekran çözünürlüğünü algalayıp boyutunu değiştiren bir oynatıcı tasarladık.

Yazılım

Şimdi işin yazılım kısmına gelelim. Temamızın içerisindeki (wp-content/themes/temanız) function.php dosyasını açıyoruz. Dosya içerisinde uygun yere tanımlamamızı yapıyoruz.

function youtube( $atts, $content = null ) {
 return '<div class="aw-player"><iframe src="http://www.youtube.com/embed/'.$content.'" frameborder="0" width="560" height="315"></iframe></div>';
}

Hemen bu satırların altına da shortcode ismimizi belirtelim.

add_shortcode("youtube", "youtube");  

İşlem tamam!

Kullanım

WordPress sitenizdeki sayfa veya yazılara artık kolaylıkla YouTube videolarınızı ekleyebileceksiniz. Örnek olarak Uwnzu3_aobo id’li Photoshop dersimizi test ederek başlayalım.

Bu da ilginizi çekebilir  WordPress'te Popüler Konuları Gösterme (Eklentisiz)

Uwnzu3_aobo

Ve sonuç altta :



  • Faruk

    iframe kodları ile eklesek aynı şey değil mi ?

    • Eklediğimiz CSS kodu YouTube videosunun responsive olmasını sağlıyor. Makalenin sonundaki videoyu test edebilirsiniz. Sayfayı küçültüp büyülttüğünüzde oynatıcı da yeniden ölçütlenecektir. Ayrıca shortcode kullanmanız sizi iframe gibi html taglarıyla uğraşmaktan kurtarır.

  • frederic

    güzel uygulama, teşekkürler.