WordPress temaları, yönetim paneli ile, sayfa üstlerine, resim, video gibi ortam dosyaları yüklemenize izin verir. Temanıza, bu özelliği kazandırmak için functions.php dosyanıza, aşağıda bahsettiğimiz kodları eklemeniz gerekmektedir. Bu kodlardan sonra, yönetim panelinden, Görünüm->Özelleştir->Üst kısım görseli menüsü ile, sayfa üstü görsellerinizi, dilediğiniz gibi yönetebilirsiniz.

Add_theme_support Fonksiyonu

Bir WordPress temamızın, Üst kısım görseli menüsüne sahip olabilmesi için, bir tema fonksiyonu olan, add_theme_support() fonksiyonunu aşağıdaki parametre ile kullanmalıyız:

add_theme_support('custom-header');

Fonksiyon, bir tema fonksiyonu olduğu için, bu fonksiyonu kapsayıcı bir fonksiyonun içine alıp (ilktemam_setup gibi), kapsayıcı fonksiyonu da after_setup_theme kancası ile çağırmadan çalışmaz. Aşağıda bunun nasıl yapılacağı gösterilmiştir:

if ( ! function_exists( 'ilktemam_setup' ) ) :  // isim karışıklığını engelliyoruz
  function ilktemam_setup() { // kapsayıcı fonksiyon

   // Üst kısım görseli ile ilgili bütün kodlar bu bölgede olmalıdır.
   add_theme_support('custom-header');

  }
endif;
add_action( 'after_setup_theme', 'ilktemam_setup' ); // tema fonksiyonları bu kanca ile çalışır

Fonksiyonu, yukarıdaki haliyle kullanmak, Yönetim Paneli : Görünüm -> Özelleştir sayfanıza “Üst kısım görseli” adında bir menü eklenmesine sebep olur:

Bu menüye tıkladığımızda, şu şekilde bir sayfa ile karşılaşırız:

Bu sayfada gördüğünüz, “Yeni görsel ekle” butonu, çalışır ve istediğiniz kadar üst kısım görseli ekleyebilir veya eklediğiniz görselleri kaldırabilirsiniz.

Burada yüklediğiniz görseli, üst kısım görseli olarak kullanmak için, header.php şablon parçasının, uygun gördüğünüz bir yerine, aşağıdaki kodu eklemeniz yeterlidir.

<img src="<?php header_image(); ?>">

Dilerseniz, bu görsel tıklandığında, temanız her zaman ana sayfanıza da yönlendirebilir. O da şu şekilde olacaktır:

 <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
    <img src="<?php header_image(); ?>">
 </a>

Daha düzenli bir HTML yapısı için, bu görseli temanıza şu şekilde eklemeyi de düşünebilirsiniz:

<div id="ust-kisim-gorseli"> 
   <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
    <img src="<?php header_image(); ?>">
   </a>
</div>

Eklediğiniz görselin, belli bir genişlik/yükseklik değerinin olmasını sağlayabilirsiniz. Bunu yapmanın yolu, add_theme_support() fonksiyonunun ikinci parametresini kullanmaktır.

Add_theme_support Fonksiyonunun İkinci Parametresi

Kullanacağımız üst kısım görsellerini, yükleme aşamasında kırpabiliriz veya temamız ile birlikte her zaman görünecek bir varsayılan üst kısım resmi kullanabiliriz veya bu görsele daha başka kontroller ekleyebiliriz. Bahsettiğimiz bu kontroller, add_theme_support('custom-header', $argumanlar) fonksiyonunun $argumanlar parametresi ile yapılır. Bu parametre, fonksiyonun, ikinci parametresidir ve isteğe bağlıdır.

$argumanlar parametresi, bir dizidir ve çeşitli argümanları vardır. Bu argümanların , varsayılan değerleri ile birlikte, tamamı aşağıda verilmiştir:

$argumanlar = array(
                'default-image'          => '',
                'random-default'         => false,
                'width'                  => 0,
                'height'                 => 0,
                'flex-height'            => false,
                'flex-width'             => false,
                'default-text-color'     => '',
                'header-text'            => true,
                'uploads'                => true,
                'wp-head-callback'       => '',
                'admin-head-callback'    => '',
                'admin-preview-callback' => '',
                'video'                  => false,
                'video-active-callback'  => 'is_front_page',
            );

Eğer, add_theme_support('custom-header', $argumanlar) fonksiyonunun ikinci parametresini boş bırakırsanız, WordPress, üst kısım görselleriniz için, argümanların yukarıdaki değerlerini kullanır.

Parametrenin argümanlarını teker teker incelersek:

default-image

Yer tutucu üst kısım görseli olarak kullanılacak, bir resim linki olmalıdır ve varsayılan değeri boştur. Temanız, ilk defa yüklendiğinde, bir üst kısım görseli ile birlikte kurulmuş olmasını istiyorsanız, kullanıcınız, yeni bir resim ekleyene kadar, bu resmi yer tutucu olarak kullanabilirsiniz.

Bu argümanda belirttiğiniz resmi, şablon dosyanızda kullanmak için aşağıdaki ifadeyi kullanmalısınız:

<img src="<?php echo get_custom_header()->url; ?>">

Eğer bu resmi, argümanlarda girdiğimiz, genişlik ve yükseklik değerlerini de kullanarak, temamıza çağırmak istersek, şu kodu kullanıyoruz:

<img src="<?php echo get_custom_header()->url; ?>" 
  width="<?php echo absint( get_custom_header()->width ); ?>" 
  height="<?php echo absint( get_custom_header()->height ); ?>" 
  alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>">

random-default

true/false değerini alır. true değeri atadığımız ve birden çok üst kısım görseli kullandığımız zaman, web sayfası tazelendiğinde, rastgele seçilen faklı bir görselin gösterilmesini sağlar. (Bu argüman, farklı şekillerde test etmeme rağmen, Üst kısım görseli menüsünün kullanımında bir fark göremedim.)

Aslında bu özelliği kullanmak için, alttaki resimde gördüğünüz “Yüklenen başlıklarda rastgele” adındaki butonu kullanabilirsiniz.

header-text

true/false değerini alır. Normalde, üst kısım görsellerinin üzerine yazı ekleme özelliğini yönetmesi gerekiyor fakat keşfedebildiğim tek özelliği, false değeri atandığında, NO_HEADER_TEXT sabitine 1 değerini ataması oldu. (Bir çok varyasyonu denedim, bir çok yabancı kaynağı araştırdım ama başka ne işe yaradığını bulamadım. Bu konuda bizi aydınlatacak arkadaşlar, yorumlarınızı bekliyorum.)

default-text-color

header-text için varsayılan bir font rengi atar. Burada girdiğimiz font rengi, WordPress’in oluşturduğu bir PHP sabiti olan, HEADER_TEXTCOLOR sabitine değer olarak atanır.

width

Görselin pixel cinsinden genişliğidir. WordPress, görselin, sadece bu genişlikte kırpılmasına izin verir.

Burada verdiğiniz genişlik değerini, şablonlarınızda, şu şekilde çağırabilirsiniz:

<?php echo absint( get_custom_header()->width);

height

Görselin pixel cinsinden yüksekliğidir. WordPress, görselin, sadece bu yükseklikte kırpılmasına izin verir.

Burada verdiğiniz yükseklik değerini, şablonlarınızda, şu şekilde çağırabilirsiniz:

<?php echo absint( get_custom_header()->height);

flex-width

true/false değerini alır. Bu argüman true değerini aldığında, kırpma işlemi esnasında, görselin genişliğini fare ile değiştirebiliriz.

flex-heigh

true/false değerini alır. Bu argüman true değerini aldığında, kırpma işlemi esnasında, görselin yüksekliğini fare ile değiştirebiliriz.

uploads

true/false değerini alır. Yönetim panelinden, görsel yükleme özelliğini etkinleştirir. (Yine bir çok şekilde test ettim, fakat bu argümanın değeri ne olursa olsun, görsel yükleme özelliği çalışıyor fakat false değerini aldığında, görseli kırparken hata mesajı ile karşılaşılıyor. Daha sağlıklı bir bilgisi olan varsa yorumlarını bekliyorum.)

wp-head-callback

Temanın üst kısmından çağırılacak fonksiyondur.

admin-head-callback

Yönetim panelindeki özelleştirme sayfasının üst kısmından çağırılacak fonksiyondur.

admin-preview-callback

Yönetim ekranında, ön izleme kodu üretecek fonksiyondur.

video

true/false değerini alır. Üst kısım görseli olarak video kullanımını yönetir. (Üst kısım görseli olarak video ekleme konusu, bir sonraki derste ele alınacaktır.)

video-active-callback

Üst kısımda, bir video kullanıldığında çalışmak üzere oluşturulan fonksiyondur.

Argümanların çokluğu gözünüzü korkutmasın. Genellikle kullanılanlar bellidir. Aşağıdaki örneğe dikkat edelim.

Örnek-1

Argümanları ayarlıyoruz ve add_theme_support( 'custom-header' ) fonksiyonunu bu argümanlar ile birlikte tetikliyoruz:

if ( ! function_exists( 'ilktemam_setup' ) ) :  // isim karışıklığını engelliyoruz
  function ilktemam_setup() { // kapsayıcı fonksiyon

    $ust_kisim_gorseli_argumanlari= array(
	'flex-width'    => true, // kırpma işleminde genişlik ayarlanabilsin
	'width'         => 980,  // kırpma işleminde başlangıç genişliği
	'flex-height'   => true, // kıpma işleminde yükseklik ayarlanabilsin
	'height'        => 260,  // kırpma işleminde başlangıç yüksekliği
	'default-image' => get_template_directory_uri() . '/images/ust_kisim_icin.jpg', // temanın images klasöründeki ust_kisim_icin.jpg adlı resmi önerilen resmin olarak kullandık
    );
    add_theme_support( 'custom-header', $ust_kisim_gorseli_argumanlari );

}
endif;
add_action( 'after_setup_theme', 'ilktemam_setup' ); // tema fonksiyonları bu kanca ile çalışır

WordPress temanızın, functions.php dosyasına, yukarıdaki kodları ekleyip, yönetim panelinden Görünüm->Özelleştir->Üst kısım görseli menüsüne giderseniz, şöyle bir menü sayfası ile karşılaşacaksınız:

Yukarıdaki resimde de gördüğünüz gibi, menü sayfasında, “Mevcut başlık” ve “Önerilen” olmak üzere iki görsel bölgesi vardır. Bu bölgeler birbirinden farklı çalışır.

Önerilen bölgesindeki resim, yönetim panelinden silinemez veya değiştirilemez. Ancak, biraz öne girdiğimiz koddaki “default-image” argümanını değiştirerek kaldırabilir veya değiştirebiliriz. Önerilen bölgesindeki bir resmi, üst kısım görseli olarak kullanmak istiyorsak, üzerine tıklamamız yeterlidir. Üzerine tıkladığımız görsel, mevcut başlık olarak atanacaktır.

Eğer, Önerilen bölgesindeki görselin üzerine tıklarsak veya “Yeni görsel ekle” butonunu kullanırsak, Mevcut başlık bölgesine görsel eklemiş oluruz. İşte bizim kontrolümüzde olan ve temamızda kullanmak istediğimiz asıl görsel bu bölgedekidir.

Mevcut başlık bölgesi, bizim asıl kullanmak istediğimiz üst kısım görseli olduğu için, bu bölgeye bir görsel eklenip eklenmediğini anlamak da isteyebiliriz. Aşağıdaki koşullu ifade, bu bölgede bir görsel varsa true değerini döndürür:

if ( get_header_image() ) { // Mevcut başlık bölgesi boş değilse burası çalışır }

Mevcut başlık bölgesindeki resmi, temamızda kullanmak için gerekli kodlar şunlardır:

<img src="<?php header_image()->url; ?>">

Eğer Mevcut başlık bölgesindeki resmi, argümanlarda girdiğimiz, genişlik ve yükseklik değerlerini de kullanarak, temamıza çağırmak istersek, şu kodu kullanıyoruz:

<img src="<?php header_image()->url; ?>"
  width="<?php echo absint( get_custom_header()->width ); ?>" 
  height="<?php echo absint( get_custom_header()->height ); ?>" 
  alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>">

Default-image argümanında belirttiğiniz resmi, Mevcut başlık bölgesi boş iken gösterilecek şekilde ayarlayabilirsiniz. Aynı zamanda, bütün üst kısım resimlerini, ana sayfaya götüren birer link haline de getirebiliriz. Bunu yapmak için, yukarıda verdiğimiz kodları birleştiriyoruz:

if ( get_header_image() ) { ?>
<div id="ust-kisim-gorseli">
 <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
  <img src="<?php header_image(); ?>" 
   width="<?php echo absint( get_custom_header()->width ); ?>" 
   height="<?php echo absint( get_custom_header()->height ); ?>" 
   alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>">
 </a>
</div>
<?php  } else { ?>
<div id="varsayilan-ust-kisim-gorseli">
 <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
  <img src="<?php echo get_custom_header()->url; ?>" 
   width="<?php echo absint( get_custom_header()->width ); ?>" 
   height="<?php echo absint( get_custom_header()->height ); ?>" 
   alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>">
 </a>
</div>
<?php } ?>

Birden Fazla Varsayılan Üst Kısım Resmi Kullanma

WordPress, birden fazla, varsayılan üst kısım resmi tanıtmamıza olanak tanır. Bunu yapmak için, aşağıdaki fonksiyon, parametresi ile birlikte kullanılır:

register_default_headers( $varsayilan_ust_kisim_resimleri );

Bu fonksiyonun parametresi şu argümanları alır:

$varsayilan_ust_kisim_resimleri = array(
  'resim_1_alternatif_ad' => array(
        'url'           => get_template_directory_uri() . '/images/ust_kisim_icin.jpg', // Resim yolu
        'thumbnail_url' => get_template_directory_uri() . '/images/ust_kisim_icin_kucuk.jpg', // Resmin küçük boyutlusunun yolu
        'description'   => __( 'Resmin kısa tanıtımı', 'twentyeleven' )
    ),
    'resim_2_alternatif_ad' => array(
        'url'           => get_template_directory_uri() . '/images/ust_kisim_icin_kucuk_2.jpg', // Resim yolu
        'thumbnail_url' => get_template_directory_uri() . '/images/ust_kisim_icin.jpg', // Resmin küçük boyutlusunun yolu
        'description'   => __( 'Resmin kısa tanıtımı', 'twentyeleven' )
    ),
    'resim_3_alternatif_ad' => array(
        'url'           => get_template_directory_uri() . '/images/ust_kisim_icin_3.jpg', // Resim yolu
        'thumbnail_url' => get_template_directory_uri() . '/images/ust_kisim_icin_kucuk_3.jpg', // Resmin küçük boyutlusunun yolu
        'description'   => __( 'Resmin kısa tanıtımı', 'twentyeleven' )
    )
);

Örnek-2

Aşağıda, add_theme_support() fonksiyonunu ve register_default_headers() fonksiyonunun birlikte kullanımına bir örnek verilmiştir.

if ( ! function_exists( 'ilktemam_setup' ) ) :  // isim karışıklığını engelliyoruz
  function ilktemam_setup() { // kapsayıcı fonksiyon

    $ust_kisim_gorseli_argumanlari= array(
     'flex-width'    => true, // kırpma işleminde genişlik ayarlanabilsin
     'width'         => 980,  // kırpma işleminde başlangıç genişliği
     'flex-height'   => true, // kıpma işleminde yükseklik ayarlanabilsin
     'height'        => 260,  // kırpma işleminde başlangıç yüksekliği
     'default-image' => get_template_directory_uri() . '/images/ust_kisim_icin.jpg', // temanın images klasöründeki ust_kisim_icin.jpg adlı resmi önerilen resmin olarak kullandık
    );
  add_theme_support( 'custom-header', $ust_kisim_gorseli_argumanlari );

 //
 // Varsayılan Resimler Ekliyoruz
 //

 $varsayilan_ust_kisim_resimleri = array(
  'resim_1' => array(
        'url'           => get_template_directory_uri() . '/images/ust_kisim_icin.jpg', // Resim yolu
        'thumbnail_url' => get_template_directory_uri() . '/images/ust_kisim_icin_kucuk.jpg', // Resmin küçük boyutlusunun yolu
        'description'   => __( 'Resmin kısa tanıtımı', 'textdomain' )
    ),
    'resim_2' => array(
        'url'           => get_template_directory_uri() . '/images/ust_kisim_icin_kucuk_2.jpg', // Resim yolu
        'thumbnail_url' => get_template_directory_uri() . '/images/ust_kisim_icin.jpg', // Resmin küçük boyutlusunun yolu
        'description'   => __( 'Resmin kısa tanıtımı', 'textdomain' )
    )
 );

 //
 // Eklediğimiz resimleri kaydediyoruz
 //
 register_default_headers( $varsayilan_ust_kisim_resimleri ); 

}
endif;
add_action( 'after_setup_theme', 'ilktemam_setup' ); // tema fonksiyonları bu kanca ile çalışır

WordPress temanızın, functions.php dosyasına, yukarıdaki kodları ekleyip, yönetim panelinden Görünüm->Özelleştir->Üst kısım görseli menüsüne giderseniz, şöyle bir menü sayfası ile karşılaşacaksınız:

Üst kısımda kullanmak üzere, birden çok resim yüklediğimizde veya varsayılan olarak birden çok resim kaydettiğimizde, karşımıza “Önerilen başlıklarda rastgele” adında bir buton çıkacaktır. Bu butona tıklarsak, sayfamız tekrar yüklendiğinde, üst kısım resmini, seçtiğimiz diğer resimlerden biriyle, rastgele değiştirecektir.