Yavru (child) tema özelliği, WordPress’in güçlü özelliklerinden biridir. Bir yavru (child) tema, ana temasının bütün özelliklerini taşır. Peki ana tema varken yavru temaya ne gerek var? Cevap için okumaya devam edin.

Temamızın kullanıcıları, yaptığımız temada bazı değişiklikler yapmak ve temamızı kendilerine uyarlamak isteyebilir. Bunu yapmakta da özgürdürler. Fakat biz de temamıza bazı düzeltmeler ya da eklemeler yapabilir ve bunları bir güncelleme olarak yayınlayabiliriz, bu da bizim en doğal hakkımızdır. İşte sorunun başladığı yer de tam olarak burasıdır.

Kullanıcımız, yavru bir tema kullanmıyorsa ve gönderdiğimiz güncellemeyi de yaptıysa, temayı ilk defa kullanmaya başladığı ana geri dönecek ve yaptığı bütün uyarlamaları, eklediği CSS kodlarını, HTML parçalarını, PHP kodlarını… kaybedecektir. Bu çok can sıkıcı bir durumdur. Bu durumdan kurtulmak da “yavru (child) tema” sayesinde mümkündür.

Bir temaya, yavru bir tema hazırladığınızda, o temayı dilediğiniz gibi kendinize uyarlayabilir ve gelecek bütün güncellemeleri gönül rahatlığı ile yapabilirsiniz. Yaptığınız güncellemeler yavru temanızda oluşturduğunuz kodları değiştirmeyecektir.

Yavru tema kullanmayıp, ana temayı kendimize uyarlamak ve hiç de güncelleme yapmamak bir çözüm yöntemi gibi görülebilir fakat değildir. Çünkü, bu yöntemde, temanız hiç bir zaman güncellenmeyecek, belki de zamanla bazı fonksiyonları kullanımdan kalkacağı için de hatalar vermeye başlayacak, belki de güncellemeler ile gelen bir çok güzel özellikten mahrum kalacaktır.

Ana Tema (Parent Theme) Nedir?

Bir ana tema, gerekli olan bütün tema dosyalarını ve tema dosyalarına yardımcı olan diğer dosyaları içeren eksiksiz bir WordPress temasıdır. Bir WordPress teması yapıyorsanız, aslında bir ana tema yapıyorsunuz demektir. Bizim de buraya kadar anlattığımız bütün dersler, bir ana tema hazırlamak hakkındaydı.

Bir Yavru Tema (Child Theme) Nedir?

Dersin girişinde de bahsettiğimiz gibi, bir yavru tema, bir ana temanın bütün özelliklerini, fonksiyonlarını, görünümünü taşıyan ve bize, dilediğimiz zaman ana temanın dilediğimiz kısmını kendimize göre uyarlayabilme imkanı tanıyan bir temadır. Yavru tema yoluyla, ana temanın görünümünde ya da işlevinde yaptığımız değişiklikler, ana temadan ayrı dosya ve klasörlerde yapılmış olur. Yani, yaptığımız değişikliklerden ana temanın dosyaları etkilenmez.

Bir yavru temanın temel özelliklerini şu şekilde sıralayabiliriz:

• Yaptığınız değişiklikler ve uyarlamalar taşınabilir ve tekrarlanabilir olacaktır.
• Yaptığınız değişiklikleri ana temadan ayrı bir yerde yaparsınız.
• Yaptığınız değişikliklere zarar vermeden, ana temaya gelen güncellemeleri yükleyebilirsiniz.
• Ana temanın bütün özelliklerinden basitçe yararlanmanızı sağlar.
• Bir ana tema hazırlamak için gerekli olan zamandan tasarruf etmenizi, bir çok temel kodu yazmaktan ve dosyayı oluşturmaktan kurtulmanızı sağlar.
• Hazır bir temayı ana tema olarak kullanmak ve bu temaya bir yavru tema oluşturarak başlamak, bir WordPress teması yapmayı öğrenmenin etkili yollarından biridir.

Eğer gelişmiş bir tema yapma niyetindeyseniz, ana temada çok sayıda revizyon yapmanız gerekiyor ise, yavru bir tema ile çalışmak değil de bir ana tema yapmanız daha doğru olacaktır. Yeni baştan bir ana tema yapmanız, aynı zamanda sizi, yeterince güncelleme almayan bir ana temanın kullanımdan kalkmış fonksiyonlarının yol açacağı sıkıntılardan da koruyacaktır. Bu yüzden, yavru veya ana tema yapma kararı, duruma göre değişebilen bir karardır.

Yavru Bir Tema Nasıl Oluşturulur?

Yavru bir tema oluşturmanız için öncelikle bir ana temanızın olması gerekmektedir. Bir ana temaya ait bir yavru tema oluşturabilmek için aşağıdaki adımları takip etmeniz yeterlidir.

I. Yavru Tema İçin Bir Klasör Oluşturma

Yavru bir tema oluşturma işlemi önce, bu tema için bir klasör oluşturmak ile başlar. Yavru temaların yaşadığı yer de tıpkı ana temalar gibi WordPress kurulumunuzun wp-content/themes klasörüdür. Bir yavru tema klasörüne ad verirken, ana tema klasörünün adını aynen kullanıp sonuna -child kelimesi eklemek iyi bir alışkanlıktır. Bu daha sonradan yavru temanın anasını kolayca tanıyabilmeyi sağlayacaktır. Mesela, benim-temam adında bir temaya bir yavru tema yapacaksanız, bu yavru tema için oluşturacağınız klasörün adını benim-temam-child koyabilirsiniz. Ama bu kural zorunlu değildir. Yavru temanın ana klasörüne, boşluk ve Türkçe karakter içermediği müddetçe, dilediğiniz adı koymakta özgürsünüz.

II. Yavru Temanın style.css Dosyasını Oluşturma

Tıpkı ana temalarda olduğu gibi yavru temalarda da style.css dosyası zorunludur ve tema klasörünün ana dizininde oluşturulmak zorundadır.

Aşağıda, yavru bir temanın style.css dosyası örneği verilmiştir. Bir yavru temanın style.css dosyası, aşağıda verilen yorum bölümü ile başlamalıdır. Bu yorum bölümünde, yavru tema hakkında bilgiler verilir. Bu bilgilerin hepsi zorunlu değildir.

style.css

/*
 Theme Name:   Benim Yavru Temam
 Theme URI:    http://ornek.com/benim-yavru-temam/
 Description:  Benim temamın yavrusudur.
 Author:       Gökalp AY
 Author URI:   http://sitecenneti.com/benim-temam
 Template:     benim-temam
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  benim_yavru_temam
*/

Yukarıda verilen bilgilerden sadece şu ikisi zorunludur:

• Theme Name: Yavru temanın adıdır.
• Template: Ana temanın adıdır. Yalnız, ana temanın orijinal adını değil de link adını (slug) yazmalıyız. Yani küçük harfler ile yazmalıyız ve ana temanın adında birden çok kelime var ise kelimeler arasında tire (-) işareti kullanarak yazmalıyız. Aksi taktirde, WordPress ana temayı anlamakta zorluk çekecektir. Yukarıdaki örnekte oluşturulan yavru tema, Benim Temam adlı bir ana temaya aittir. Bu yüzden, template argümanı Template: benim-temam şeklinde oluşturulmuştur.

III. Ana Temanın ve Yavru Temanın Stil Dosyalarını Tanıtma

Yavru temanın ve ana temanın style.css dosyalarını tanıtmadan, bu dosyalardaki stil kodlarının çalışması mümkün olmaz. Bu iki dosyayı da wp_enqueue_style fonksiyonu yardımı ile wp_enqueue_scripts kancasını kullanarak ekleriz.

Stil dosyalarını eklemek için, yavru temanın ana dizininde (benim-temam-child) bir functions.php dosyası oluşturmamız gereklidir. Bu dosyanın ilk satırı PHP açılış tagı ile başlamalıdır, fakat dosyanın sonunda bu tagı kapatmanıza gerek yoktur.

Aşağıda kod, bir yavru temaya, ana temasının style.css dosyasını tanıtır:

functions.php

<?php
add_action( 'wp_enqueue_scripts', 'benim_yavru_temam_stil_dosyalarim' );
function benim_yavru_temam_stil_dosyalarim() {
    wp_enqueue_style( 'benim-temamin-stilleri', get_template_directory_uri() . '/style.css' );
}

Yavru temanızın da bir style.css dosyası vardır. Yukarıda oluşturduğumuz fonksiyon, aynı zamanda yavru temanın stil dosyasını tanıtmak için de kullanılabilir. Aşağıda bunun nasıl yapıldığını görüyorsunuz:

functions.php

<?php
add_action( 'wp_enqueue_scripts', 'benim_yavru_temam_stil_dosyalarim' );
function benim_yavru_temam_stil_dosyalarim() {
 
    $ana_tema = 'benim-temamin-stilleri'; // Benim Temam'ın stil dosyası tanıtılırken kullanılan isim
 
    wp_enqueue_style( $ana_tema, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'yavru-tema-stilleri',
        get_stylesheet_directory_uri() . '/style.css',
        array( $ana_tema ), // Önce ana temanın stillerini yükler
        wp_get_theme()->get('Version') // Ana temanın versiyonunu getirir
    );
}

Yukarıdaki fonksiyonda, $ana_tema değişkeninin aldığı değerin, ana temanın (Benim Temam) functions.php dosyasında, kendi stil dosyası kaydedilirken kullanılan kimlik değeri ile aynı olmasına dikkat ediniz.

IV. Yavru Temayı Etkinleştirme

Yukarıdaki adımlarda, her şey yolunda gittiyse, artık temanız kullanıma hazır demektir. Yani artık, sitenizin yönetim paneline girerek, Görünüm->Temalar sayfasına gidip, yavru temanızı etkinleştirebiliriz.

Eğer WordPress’in multisite kurulumunu kullanıyorsanız, yavru temanızı kullanmak için, önce Ağ yöneticisi->Temalar sayfasına giderek, tema listesinde yavru temanızın adını bulup, hemen altındaki Ağı etkinleştir bağlantısına tıklamanız gerekecektir. Bunu yaptıktan sonra da, yavru temanızı hangi sitede kullanmak istiyorsanız o sitenin Görünüm->Temalar sayfasına gidip yavru temanızı etkinleştirmeniz yeterli olacaktır.

Yavru temanızı etkinleştirdikten sonra, Görünüm->Menüler sayfasına gidip kullandığınız menüleri tekrar kaydetmeniz gerekebilir. Aynı şekilde, Görünüm-Özelleştir sayfasına giderek; üst kısım görseli ve arka plan rengi gibi özellikleri tekrar kaydetmeniz gerekebilir.

V. Yavru Temaya Şablon Dosyaları Ekleme

WordPress’in yavru temaları hakkında bilmeniz gereken en önemli özelliklerden biri de, yavru temanın functions.php dosyasından başka diğer bütün dosyalarının ana temanın aynı isimdeki dosyalarının üzerin yazmasıdır. Örnek olarak, yavru temanızın ana dizininde bir single.php dosyası oluşturursanız, WordPress artık, ana temanızın ana dizinindeki single.php dosyasını görmezden gelecek, gerektiği yerde yavru temanın single.php dosyasını kullanacaktır.

Ana temanın herhangi bir dosyasını değiştirmek için, uygulanması tavsiye edilen yöntem, ana temadaki dosyayı aynen kopyalayıp yavru temanın aynı dizinine yapıştırmak ve ondan sonra üzerinde değişiklikler yapmaktır. Böylece, ana temadaki orijinal dosya değişmeden, kodlarını dilediğimiz gibi değiştirmek mümkün olacaktır. Tam da bu sebeple, ana temada müdahale etmek istediğimiz kısmın hangi şablon dosyası tarafından oluşturulduğunu bulabilmek için şablon hiyerarşisini iyi anlamış olmak gereklidir.

Yavru temaya, ana temada olmayan bir şablon dosyası da ekleyebilirsiniz. Örneğin, ana temada id numarası 9 olan bir kategoriye özel olarak bir şablon dosyası bulunmuyorsa, yavru temaya category-9.php adında bir dosya ekleyerek, bu kategoriye özgü bir şablon hazırlayabilirsiniz.

VI. Functions.php Dosyasının Kullanımı

Yavru temaya eklediğimiz diğer dosyalardan farklı olarak, functions.php dosyası, ana temanın functions.php dosyasının üzerine yazmaz, onun devamı olarak yorumlanır. Yani ana temaya bir özellik kazandırmak istediğimizde, bunun yolu ya bir eklenti kullanmak ya da bir yavru tema oluşturmaktır. Yavru tema oluşturduğumuzda, bu yavru temanın functions.php dosyasına eklediğimiz kodlar ile ana temaya dilediğimiz özelliği kazandırabiliriz.

Ana temaya dahil etmek istediğimiz bir özelliği, yavru bir tema oluşturarak kazandırdığımızda, ana temaya gelen güncellemeler, eklediğimiz bu özelliği etkilemez.

Yavru temaların functions.php dosyasının ilk satırı bir PHP açılış tagı ile <?php başlar, dosyanın sonunda ise bu açılış tagını kapatmak zorunda değiliz. Aşağıda, yavru temamızda kullanabileceğimiz örnek bir PHP kodu verilmiştir:

functions.php

<?php // PHP açılış tagı - Bu tagdan önce hiç bir şey olmamalı hatta boşluk bile olmamalıdır.
 
// Ana temaya eklediğimiz bir özellik (Site ikonu resmi ekliyoruz.)
function benim_favicon_linkim() {
    echo <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />' . "\n";
}
add_action( 'wp_head', 'benim_favicon_linkim' );

Ana Temanın Fonksiyonlarının Üzerine Yazmak

Yavru temanın functions.php dosyasının ana temaya göre bir önceliği vardır. Bu özelliğinden dolayı, ana temadaki bir fonksiyonu tekrar kullanmak ve üzerine yazmak mümkündür. Bunu yapmanın yolu, ana temanın functions.php dosyasını kodlarken, fonksiyonlar için ! function_exists() çerçevesi kullanmaktır. Aşağıda bunun bir örneği verilmiştir:

if ( ! function_exists( 'ana_tema_fonksiyonum' ) ) {
    function ana_tema_fonksiyonum() {
        //  Kodlar buraya...
    }
}

Ana temanın functions.php dosyasında ve yukarıdaki gibi oluşturduğumuz bir fonksiyonun üzerine yazmak için yavru temanın functions.php dosyasında bu fonksiyonu şu şekilde kullanmamız yeterli olacaktır:

function ana_tema_fonksiyonum() {
   //  Kodlar buraya...
}

VII. Yavru Temaya Dosyalar Ekleme İşlemi

Yavru bir temaya iki farklı tarzda dosya eklenir. Bunlar;

1. Ana temasında var olan bir dosya eklenebilir.
2. Ana temasında olmayan bir dosya eklenebilir.

Gelin bu iki durumu da ayrı ayrı inceleyelim.

Ana Temada Olan Bir Dosyayı Ekleme

Bazen ana temanın sunduğu şablon üzerinde küçük değişiklikler yapmak isteyebiliriz. Bunun için ana temada değiştirmek istediğimiz bölüme ait şablon dosyasını bulup, ana temadaki diziniyle birlikte yavru temada bir kopyasını oluşturmaktır. WordPress, functions.php dosyası hariç, diğer bütün dosyalarda, önceliği yavru temaya verir. Aslında, yavru temanın dosyaları ana temadakilerden sonra yorumlar, böylece son sözü yavru temadaki dosyalar söylemiş olur. Bu yüzden, yavru temada oluşturduğumuz kopya üzerinde gerekli değişiklikleri yaparak ana temayı kendimize uyarlamış oluruz.

Yukarıda bahsettiğimiz işlemi daha iyi anlamak için aşağıdaki örneği inceleyebilirsiniz:

Benim Temam adlı ana temanın klasör yapısı:

functions.php
footer.php
header.php
sytyle.css
single.php
template-parts
   yazi-basliklari.php
...

Bu ana temanın yazi-basliklari.php dosyasında bir değişiklik yapmak istediğimiz varsayalım. Bunun için bir yavru tema oluşturuyoruz ve bu yavru temanın ana dizininde yazi-basliklari.php adlı dosyayı, içinde bulunduğu klasör ile birlikte oluşturuyoruz.

Yavru temanın dizini:

functions.php
sytyle.css
template-parts
   yazi-basliklari.php
...

Artık yavru temanın yazi-basliklari.php dosyası, ana temadaki aynı dosyanın üzerine yazacaktır. İşimizi kolaylaştırması açısından, yapacağımız değişikliklere, ana temadaki yazi-basliklari.php dosyasını aynen yavru temaya kopyalayıp yapıştırarak başlamak iyi bir yöntem olacaktır.

Ana Temada Olmayan Bir Dosyayı Ekleme

Bazen ana temadaki dosyalar işimizi görmeyebilir. Yapacağımız değişiklik için daha detaylı şablon dosyaları kullanmak zorunda kalabiliriz ya da farklı amaçlar ile yardımcı dosyalar eklemek zorun da kalabiliriz. Bu durumda, yavru temaya ana temada olmayan dosyalar eklememiz gerekir.

Yavru temaya eklediğimiz dosya, WordPress tarafından tanınan bir şablon dosyası ise, dosyayı eklemekten başka yapmamız gereken bir işlem yoktur. WordPress, tıpkı ana temalarda olduğu gibi yavru temalarda da şablon dosyalarını otomatik olarak tanır.

Eklemek istediğimiz dosya, bir şablon dosyası değilse, yani WordPress tarafından tanınan bir dosya değilse, o zaman aşağıdaki fonksiyonları kullanmamız gerekecektir:

• get_stylesheet_directory(): Dosya yolunu getirir.
• get_stylesheet_directory_uri(): Dosyanın url adresini getirir.

Örnek olarak, yavru temanın ana dizininde bulunana ve adı benim-dosyam.php olan bir dosyayı yavru temaya tanıtmak için get_stylesheet_directory() fonksiyonunu aşağıda görüldüğü gibi kullanırız:

functions.php

<?php require_once( get_stylesheet_directory(). '/benim-dosyam.php' ); ?>

Yukarıdaki kod, yavru tema dizinindeki benim-dosyam.php dosyayı yavru temaya tanıtır. Eğer bu dosya, yavru temanın benim-klasorum adında bir klasörünün içindeyse o zaman şu şekilde tanıtılır:

functions.php

<?php require_once( get_stylesheet_directory(). '/benim-klasorum/benim-dosyam.php' ); ?>

Eğer yavru temanın images dizinindeki benim-resmim.png adlı bir dosyanın url adresine ihtiyacımız varsa, o zaman get_stylesheet_directory_uri() fonksiyonunu aşağıdaki örnekte olduğu gibi kullanmamız gerekiyor:

<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/benim-resmim.png" alt="" />

VIII. CSS ve JavaScript Dosyaları Ekleme

Yavru bir tema ile ana temaya CSS ve JavaScript dosyaları ekleme işlemi hemen hemen aynıdır. Aradaki tek fark, eklenecek dosyanın url değerini bastıran fonksiyonların farklı olmasıdır.

Ana temada, eklenecek dosyaların url değerini getirmek için;

get_template_directory_uri()

fonksiyonu kullanılır. Yavru tema da ise aynı amaçla;

get_stylesheet_directory_uri()

fonksiyonu kullanılır.

Bir ana temaya CSS ve JavaScript dosyaları eklemek işlemin hakkında detaylı bilgi için CSS ve JavaScript Dosyalarını Ekleme adlı dersimizi okuyabilirsiniz.

Aşağıda, yavru bir temanın style.css dosyasının nasıl tanıtıldığını görüyorsunuz:

<?php
add_action( 'wp_enqueue_scripts', 'yavru_tema_stilleri' );
function yavru_tema_stilleri() {
    wp_enqueue_style( 'yavru-stiller', get_stylesheet_directory_uri() . '/style.css', false, '1.0', 'all' );
}

IX. Yazı Formatları (Post Formats)

Yazı formatlarının ne olduğu ve ne işe yaradığı hakkında detaylı bilgi için, Yazı Biçimleri-Formatları (Post Formats) adlı dersimizi okuyabilirsiniz.

Yavru temalar, ana temanın tanıdığı yazı formatlarını aynen tanır. Fakat, yavru temada, add_theme_support('post-formats') fonksiyonunu kullanırken dikkat etmelisiniz. Çünkü bu fonksiyon ile yavru temaya tanıttığımız yazı formatları, ana temanın tanıdıklarının üzerene ilave edilmez, ana temadakilerin hepsini gider yerlerine bunlar gelir.

X. RTL Desteği

RTL desteği demek, temanızın, ana dizininde rtl.css dosyası içermesi demektir. RTL ifadesi, “Right To Left” yani “sağdan sola” ifadesinin kısaltılmışıdır. rtl.css dosyası, temamızı, Arapça, Farsça gibi sağdan sola yazan kişilerin de rahatça kullanması için yazdığımız stilleri içeren dosyadır.

Yavru temamızda bir rtl.css dosyası var ile bu dosyanın da şu şekilde başlaması gerekir:

/*
Theme Name: Benim Yavru Temam
Template: benim-temam
*/

Ana temamızda, rtl.css dosyası olmasa bile, yavru temamıza koymamız tavsiye edilir. Temamızda rtl.css dosyası varsa is_rtl() fonksiyonu true değerini döndürür. Bu fonksiyon true değerini döndürdüğünde, WordPress bu dosyayı otomatik olarak tanır.

XI. Yavru Temayı Tercümeye Hazırlama (Internationalization)

Bir temanın tercümeye hazırlanması demek (Internationalization), o temayı gerektiğinde kolayca tercüme edebilecek şekilde kodlamak demektir. Bir WordPress temasının, tercümeye nasıl hazırlandığını, detaylı bir şekilde öğrenmek için Temayı Tercümeye Hazırlama (Internationalization) adlı dersimizi okuyabilirsiniz.

Yavru bir temanın tercümeye hazır halde kodlanabilmesi için dikkat etmemiz gereken hususlar şunlardır:

• Yavru temanın ana dizininde ve languages adında bir dil klasörü oluşturun.
• Oluşturduğumuz languages klasörüne, temanın dil dosyalarını yükleyin. (Mesela; Türkçe için, tr_TR.mo ve tr_TR.po dosyaları; Amerikan İngilizcesi için en_US.po ve en_US.mo gibi.)
• Yavru temanıza özel bir textdomain yükleyin. Yavru temaya bir textdomain yüklemek için, load_child_theme_textdomain() fonksiyonu kullanılır. Aşağıda, bu fonksiyona ait örnek bir kullanım verilmiştir.

functions.php

<?php
/**
  * Benim Yavru Temam temasının textdomainini ayarlar.
  *
  * Bu yavru tema için bir textdomain belirler.
  * Tercüme dosyaları /languages/ dizinine yüklenmelidir.
  */
function benim_yavru_temam_theme_setup() {
    load_child_theme_textdomain( 'benim_yavru_temam', get_stylesheet_directory() . '/languages' );
}
add_action( 'after_setup_theme', 'benim_yavru_temam_theme_setup' );

• Yavru temanız için, oluşturacağınız textdomainin ne olacağı, tamamen sizin tercihinize bağlıdır. Yukarıda tanıttığımız textdomain, yavru tema kodlanırken, tercüme edilmek istenen bütün metinlerde kullanılmalıdır. Textdomainin nasıl kullanıldığını öğrenmek için Temayı Tercümeye Hazırlama (Internationalization) adlı dersimizi okuyabilirsiniz.

Yukarıda oluşturduğumuz textdomain ile tercümeye hazır bir metin oluşturma örneği için aşağıda verilen kodu inceleyebilirsiniz.

<?php
esc_html_e( 'Ben tercümeye hazır bir metinim.', 'benim_yavru_temam' );
?>