Bir WordPress temasına logo eklemek için gereken PHP kodları ve bu kodların kullanım örneklerini verdiğimiz dersimize hoş geldiniz.

Logo Eklemek Ne Demektir?

Bir WordPress temasına logo eklemek demek, yönetim panelinden, Görünüm->Özelleştir->Site kimliği sayfasına giderek, “Logo seç” butonu ile bir resim yüklemek ve bu resmi, uygun şablon dosyalarında kullanmak demektir.

Yönetim panelinden yüklenen logo resmini, temada kullanmak için ise, bu resmi, genellikle, header.php dosyasının uygun bir yerine, the_custom_logo() fonksiyonu ile çağırmak gerekir. Böylece temaya logo özelliği kazandırılmış olur. Detaylar için okumaya devam edin…

WordPress Temasına Bir Logo Özelliği Kazandırmak

Bir WordPress temasına, logo özelliği kazandırmak için, temanın functions.php dosyasına aşağıdaki tema fonksiyonu eklenir:

functions.php

function ilktemam_logo_ozelligi() {
     add_theme_support( 'custom-logo' );
}
add_action( 'after_setup_theme', 'ilktemam_logo_ozelligi' );

Bu fonksiyon eklendiğinde, temanın yönetim panelinde, Görünüm->Özelleştir->Site kimliği sayfasına, resimde görüldüğü gibi bir “Logo” alanı eklenir.

add_theme_support('custom-logo') fonksiyonuna, ikinci bir parametre daha ekleyerek, logo resmi için bazı varsayılan ayarlar ekleyebiliriz. Aşağıda, bu fonksiyonun, ikinci parametresi ile birlikte, kullanımı verilmiştir:

functions.php

function ilktemam_logo_ozelligi() {
 $varsayilanlar= array(
 'height'      => 100, // Logo resminin yüksekliği
 'width'       => 400, // Logo resminin genişliği
 'flex-height' => true, // Kırparken fare ile yükseklik değiştirilebilir
 'flex-width'  => true, // Kırparken fare ile genişlik değiştirilebilir
 'header-text' => array( 'site-title', 'site-description' ), // logo eklendiğinde, site başlığını ve sloganını sakla
 );
 add_theme_support( 'custom-logo', $varsayilanlar);
}
add_action( 'after_setup_theme', 'ilktemam_logo_ozelligi' );

Logoyu Temada Gösterme

Logo resmi, genellikle header.php dosyasında çağırılır. Logo resmini çağırmak için kullanılan fonksiyonu şudur:

the_custom_logo();

Bu fonksiyonu tanımayan daha eski WordPress versiyonlarına uyumluluk açısından, fonksiyonun şu şekilde kullanılması tavsiye edilir:

if ( function_exists( 'the_custom_logo' ) ) {
 the_custom_logo();
}

Yukarıdaki fonksiyon, temanızda, aşağıdaki HTML kodunu üretir:

<a href="http://localhost/benimsitem/" class="custom-logo-link" rel="home" itemprop="url">
  <img src="http://localhost/benimsitem/wp-content/uploads/2019/05/logo.png" class="custom-logo" alt="WordPress Dersleri" itemprop="logo" srcset="http://localhost/benimsitem/wp-content/uploads/2019/05/logo.png 225w, http://localhost/benimsitem/wp-content/uploads/2019/05/logo-150x150.jpg 150w" sizes="(max-width: 34.9rem) calc(100vw - 2rem), (max-width: 53rem) calc(8 * (100vw / 12)), (min-width: 53rem) calc(6 * (100vw / 12)), 100vw" width="400" height="100">
</a>

Eğer, the_custom_logo() fonksiyonunun ürettiği HTML hoşunuza gitmedi ise, logo için, kendi HTML’inizi üretebilirsiniz. Aşağıda, kendi logo kodunuzu oluşturmak için, size ilham verecek bir örnek verilmiştir:

header.php

$logo_id = get_theme_mod( 'custom_logo' );
$logo = wp_get_attachment_image_src( $logo_id , 'full' );
if ( has_custom_logo() ) {
        echo '<img src="' . esc_url( $logo[0] ) . '" alt="' . get_bloginfo( 'name' ) . '">';
} else {
        echo '<h1 class="site-adi">'. get_bloginfo( 'name' ) .'</h1>';
        echo '<p class="site-aciklamasi">'. get_bloginfo( 'description' ) .'</p>';
}

WordPress Temasına Logo Ekleme İle İlgili Şablon Fonksiyonları

Şablon dosyalarınızda, logo eklemek için kullanabileceğiniz şablon fonksiyonları aşağıda verilmiştir:

• get_custom_logo() - Logoyu göstermek için kullanılan HTML’i döndürür.
• the_custom_logo() - Logoyu göstermek için kullanılan HTML’i ekrana bastırır.
• has_custom_logo() - Bir logo resmi seçilip seçilmediğini kontrol eder. Logo resmi seçilip yüklendi ise true, yüklenmedi ise false, değerini döndürür.