Bu ders, “sayfalara üst kısım görseli ekleme – resim” adlı dersin devamı niteliğindedir. Dolayısıyla, birazdan bahsedilecek olan fonksiyonları, parametreleri veya argümanları anlamakta zorluk çekerseniz, öncelikle, bu dersi okumanızı tavsiye ederiz.

İnternet hızının her geçen gün daha da artması ile birlikte, web tasarımcıları, temalarda çekinmeden, videolu içerikler kullanabilmektedir. Bu içeriklerden biri de, temamıza canlılık katacak ve daha profesyonel bir görüntü kazandıracak bir üst kısım videosudur.

Üst kısım videoları, WordPress 4.7 sürümünden bu yana desteklenmektedir. Bir WordPress temasına eklenen bir üst kısım videosu, sayfa açıldığında, otomatik olarak oynamaya başlar ve bittiğinde tekrar başa sararak bir döngü halinde oynamaya devam eder. Daha güzel bir deneyim için, üst kısım videolarının, üst kısım resimleri ile birlikte kullanılmaları tavsiye edilir. Çünkü, video yüklenirken ya da video ile ilgili bir sorun oluştuğunda, WordPress onun yerine görseli göstererek, sorunu kullanıcıya yansıtmayacaktır.

Temaya Video Desteği Ekleme

add_theme_support() fonksiyonunun kullanımından, parametrelerinden ve resim eklemek için gerekli kodlardan, “sayfalara üst kısım görseli ekleme – resim” adlı dersimizde detaylı olarak bahsetmiştik. Bu derste, resim ekleme ile ilgili argümanlarla ilgilenmeyerek, sadece video ekleme özelliği ile ilgili argümanlardan bahsedeceğiz.

Bir temanın, üst kısım videosu özelliğini destekleyebilmesi için, yapılması gereken şey aşağıdaki kodu kullanmaktır.

$video_ile_ilgili_argumanlar = array(
 'video' => true,
)

add_theme_support( 'custom-header', $video_ile_ilgili_argumanlar );

Varsayılan olarak false değerini alan, “video” argümanının değerini true yaptığımızda, öncelikle, temamızın üst kısım görselini yöneten menünün, adı değişecek ve “Üst kısım görseli” iken, “Üst kısım ortam dosyası” olacaktır. Aşağıda, eski ve yeni isimleri verilmiştir.

'video' => false iken;

'video' => true iken;

“Video” argümanını true yaptığımızda, sadece menü adı değişmeyecektir. “Üst kısım ortam dosyası” menüsüne tıkladığımızda, menü sayfasına, bir video yükleme, bir de Youtube adresi girme alanının eklendiğini göreceğiz:

Eğer, bu sayfada, video yükleme veya Youtube adresi alanı değil de, aşağıdaki gibi bir uyarı görüyorsanız, temanızın ana sayfasında değilsiniz demektir.

Eğer bu durumdan hoşlanmadıysanız, kodları aşağıdaki şekilde kullanarak, video ekleme bölümünü her zaman görünür yapabilirsiniz:

$video_ile_ilgili_argumanlar = array(
 'video' => true,
 // video-active-callback parametresinin varsayılan değeri, bir WordPress koşullu ifadesi olan, "is_front_page" ifadesi olarak ayarlanmıştır. Bu yüzden, varsayılan olarak, video özelliği sadece ana sayfa düzenlenirken çalışır
 'video-active-callback'  => '', // artık video özelliğini düzenlemek için ana sayfanın açık olması gerekmiyor
)

add_theme_support( 'custom-header', $video_ile_ilgili_argumanlar );

Artık temamız, sayfalarımızın üst kısmında kullanmak için bir video yükleme özelliğine sahip oldu. Bu özelliği, şablon dosyalarımıza taşımaya geçmeden önce, video yüklerken, hepimizin karşılaşacağı muhtemel bir sorun olan, “yüklenebilecek en büyük dosya boyutu” sorunundan bahsetmek istiyorum.

Yüklenebilecek En Büyük Dosya Boyutunu Yükseltme

Üst kısım ortam dosyası olarak bir video yüklemek için, “Video seç” butonuna bastığınızda, resimde görüldüğü gibi bir sayfa çıkacak ve bu sayfanın en altında:

Yüklenebilecek en büyük dosya boyutu: 2 MB.

şeklinde bir uyarı göreceksiniz. Bu uyarı, videonuzun boyutu 2 MB’dan daha büyük olursa, bu videoyu yüklemeye izin verilmeyeceği anlamına gelir. Bu sorunu aşmanın bir yolu, video boyutunu düşürmek, ikinci yolu da, yüklenebilecek en büyük dosya boyutu değerini arttırmaktır.

Yüklenebilecek en büyük dosya boyutunu arttırmanın 7 yolu vardır. Aşağıda bu yollar teker teker açıklanmıştır.

1- .htaccess Dosyasını Düzenleyerek

Aşağıdaki kodu, WordPress ana dizininizde bulunan, .htaccess dosyanızın en sonuna ekleyin.

php_value upload_max_filesize 64M
php_value post_max_size 128M
php_value memory_limit 256M
php_value max_execution_time 300
php_value max_input_time 300

2- Temanızın functions.php Dosyasını Düzenleyerek

Temanızın, functions.php dosyasının her hangi bir yerine, aşağıdaki kodları ekleyerek bu sorunu aşabilirsiniz.

@ini_set( 'upload_max_size' , '64M' );
@ini_set( 'post_max_size', '64M');
@ini_set( 'max_execution_time', '300' );

Bir tema dosyası kullandığınız için, başka bir tema kullanmaya başladığınızda, bu ayarlar tekrar sıfırlanacaktır.

3- php.ini Dosyasındaki Seçenekleri Değiştirerek

Sunucunuzda, PHP’nin yüklü olduğu ana dizine giderek, php.ini dosyasını bulun. Bu dosyada, aşağıdaki satırları verildiği gibi değiştirin.

upload_max_filesize = 25M
post_max_size = 13M
memory_limit = 15M

php.ini dosyasını bulamazsanız da, bir text editörü ile, bir php.ini dosyası oluşturun, yukarıdaki kodları bu dosyaya yapıştırın ve dosyayı WordPress kurulumunuzun ana dizinine kopyalayın.

4- WordPress Multisite Kullananlar İçin Yönetim Paneliden

Eğer bir WordPress Multisite kullanıyorsanız, ağ yöneticisi panelinden, Ayarlar->Ağ ayarları menüsüne tıkladığınızda, karşınıza “Maksimum dosya yükleme boyutu” ayarı çıkacaktır. Bu ayar kilobayt (KB) olarak yapılır ve sunucunun php.ini dosyasındaki upload_max_filesize değerini geçemez.

5- wp-config.php Dosyası

Yüklenebilecek en büyük dosya boyutunu arttırmanın bir diğer yolu da, WordPress kurulumunuzun ana dizininde bulunan wp-config.php dosyasıdır. Bu dosyanın herhangi bir yerine aşağıdaki kodları eklemeniz yeterlidir.

@ini_set( 'upload_max_size' , '20M' );
@ini_set( 'post_max_size', '13M');
@ini_set( 'memory_limit', '15M' );

6- Eklenti Kullanarak

Eğer kodlar ile aram iyi değildir diyorsanız, yüklenebilecek en büyük dosya boyutunu, bir eklenti kullanarak da arttırabilirsiniz. Bunun için, Increase Max Upload Filesize eklentisini kurabilir ve bu eklentinin, ayarlar sayfasına giderek aşağıda gördünüz text alanına, Megabayt (MB) cinsinden bir değer atayabilirsiniz.

7- Hosting Firmanız İle İrtibata Geçerek

Yüklenebilecek en büyük dosya boyutunu arttırmanın bir başka yolu da, hizmet aldığınız hosting firması ile irtibata geçerek, sizin için bu ayarı yapmalarını istemektir.

Eklenen Videoyu Temada Gösterme

Temamıza, üst kısım videosu ekleme özelliğini kazandırdık ve yönetim panelinden, Görünüm->Özelleştir->Üst kısım ortam dosyası menüsüne giderek bir video seçtik. Şimdi sıra bu videoyu, temamıza taşımaya geldi.

Temamızda, üst kısım videosunu göstermek için, tıpkı üst kısım resimlerinde olduğu gibi, header.php dosyasını kullanırız. Bu şablon parçasında, uygun gördüğümüz bir yere, şu kodu eklersek, artık videomuz sitemizde görünecektir:

the_custom_header_markup();

the_custom_header_markup() kodu ile birlikte, eklediğiniz video, temanıza dahil edilmiş olur:

the_custom_header_markup() kodu, eklediğiniz videoyu, Durdur/Oynat butonu ile birlikte getirir. Bu kodu eklediğinizde, üst kısım resminizi çağırmak için ayrıca bir kod eklemenize gerek yoktur. Çünkü, bu kod, videonuzun gösterimi ile ilgili bir sorun olduğunda, onun yerine üst kısım resminiz otomatik olarak kullanır.

the_custom_header_markup() kodu, header.php dosyanızda, aşağıdaki HTML kodunu üretir:

<div id="wp-custom-header" class="wp-custom-header">
  <video id="wp-custom-header-video" autoplay loop width="1500" height="399" src="http://localhost/benimsitem/wp-content/uploads/2019/05/A-short-ocean-video.mp4">
  </video>
  <button type="button" id="wp-custom-header-video-button" class="wp-custom-header-video-button wp-custom-header-video-play">Durdur</button>
</div>

Durdur butonuna bastığınızda, butonun HTML yapısı şöyle değişir:

<button type="button" id="wp-custom-header-video-button" class="wp-custom-header-video-button wp-custom-header-video-pause">Oynat</button>

Üst kısma video eklemek için, WordPress tarafından üretilen bu HTML yapısını kullanarak, video ve butona dilediğiniz gibi CSS uygulayabilir ve dilediğiniz biçimde kullanabilirsiniz.

Durdur/Oynat Butonunun Textini Değiştirme

Dilerseniz, video ile birlikte gelen botunun textini değiştirebilirsiniz. Bunun için, header_video_settings kancasını kullanmanız gerekmektedir. Aşağıda, bu işlem için gerekli kodlar verilmiştir.

add_filter( 'header_video_settings', 'video_butonu_texti');
	function my_header_video_settings( $ayarlar) {
	  $ayarlar['l10n'] = array(
		'pause'      => __( 'Hemen durdur' ),
		'play'       => __( 'Tekrar oynat' ),
		'pauseSpeak' => __( 'Video durduruldu.'),
		'playSpeak'  => __( 'Video başlatıldı.'),
	  );
	  return $ayarlar;
	}

Video İçin Genişlik/Yükseklik Değeri Atama

header_video_settings kancası yardımı ile, eklediğiniz videoya, pixel biriminden, minimum genişlik ve yükseklik değerleri atayabilirsiniz:

add_filter( 'header_video_settings', 'video_ayarlari');
function video_ayarlari( $ayarlar) {
  $ayarlar['Width'] = 980;
  $ayarlar['Height'] = 400;
  $ayarlar['minWidth'] = 680;
  $ayarlar['minHeight'] = 400;
  return $ayarlar;
}

Üst Kısım Videosu İle İlgili Diğer Fonksiyonlar

• has_header_video(): Üst kısım için, yönetim panelinden, Görünüm->Özelleştir->Üst kısım ortam dosyası sayfasında, eklenmiş bir video olup olmadığını kontrol eder.
• is_header_video_active(): Ekrandaki sayfada, bir üst kısım videosu olup olmadığını kontrol eder.
• get_header_video_url(): Üst kısım vidoesunun URL değerini getirir.
• has_custom_header(): Üst kısım için, yönetim panelinden, Görünüm->Özelleştir menüsünde, eklenmiş bir üst kısım resmi veya videosu olup olmadığını kontrol eder.
• get_custom_header_markup(): Üst kısım resmini göstermek için kullanılan HTML kodlarını getirir. (Video desteği yoktur.)
• the_custom_header_markup(): WordPress’in hazırladığı HTML kodlarını getirerek, üst kısım videosunu gösterir.