Wordpress Child Theme (Çocuk Tema) Nedir & Nasıl Oluşturulur?

 

Wordpress Child Theme (Çocuk Tema) Nedir & Nasıl Oluşturulur?

Child Theme Hakkında Sorular


>> Child theme (çocuk tema) nedir?
WordPress üzerinde kurulu ana temaya bağlı çalışan alt temalardır. Temanız üzerinde özelleştirmeler yapmak istiyorsanız çocuk tema (child theme) oluşturarak kök yani ebeveyn tema (parent theme) dosyaları üzerinde bir değişiklik yapmadan bunu gerçekleştirebilirsiniz.
>> Neden child tema kullanmalıyım?
Kısa cevabı tema üzerinde özelleştirmeler yapmaktır. Child tema kullanmanın artısı; Parent temayı güncelleseniz bile özelleştirmelerinizin korunmasıdır. Eğer parent temayı tamamen özelleştirmeyecekseniz child tema kullanmak en iyi yöntem diyebilirim. Fakat yapacağınız özelleştirmeler çok fazla ise (parent temanın birçok yerine dokunacaksanız) bu durumda tema kök dosyaları üzerinde değişiklik yapmak daha mantıklı olacaktır.
>> Child tema üzerinde örneğin header.php dosyası eklersek Parent temadaki header.php geçersiz mi kalır? Hayır ise hangisi önce çalıştırılır? Style.css dosyası için de aynısı geçerli mi?
Hayır geçersiz kalmaz, her iki dosya da yürütülür. İlk olarak child tema header.php dosyası çalıştırılır daha sonra parent temanın header.php dosyası çalıştırılır. 
Fakat style.css için aynı durum geçerli değil, parent temanın style.css dosyası geçersiz hale gelir. Bu durumda parent temanın style.css dosyasını child temada içe aktarmak gereklidir (nasıl yapılacağını aşağıdaki 5. maddede inceleyebilirsiniz).

Adım Adım Child Theme Oluşturma


1. Child Tema Klasörünü Oluşturun: 
WordPress sitenizin kök dizinine bir Child Tema klasörü oluşturun. Klasör adını belirleyin ve parent temanızın adını içerdiğinden emin olun. Örneğin, eğer "Royal Elementor Kit" temasını kullanıyorsanız, Child Tema klasörünü "royal-elementor-kit-child" gibi adlandırabilirsiniz. Yani parent tema klasör adının aynısını yazıp, sonuna "-child" ekleyin.




2. Child Tema Klasöründe style.css Dosyasını Oluşturun: 
Child tema klasörünün içine bir style.css dosyası oluşturun. İçerisine aşağıdaki kodları ekleyerek tema adınıza göre düzenleyin. Bu dosya Child temanızı tanımlayacak ve Parent temayı belirtecektir. Örneğin:
/*
Theme Name: Royal Elementor Kit Child
Template: royal-elementor-kit  // Parent temanın klasör adı
*/
Tema adını parent tema adının sonuna Child gelecek şekilde yazabilirsiniz (mucburi değildir, isterseniz farklı bir isim de yazabilirsiniz). 
Template kısmına ise parent temanın klasör adı nasıl geçiyorsa aynısını yazmanız gerekiyor.

2.1. Child Tema style.css Dosyasını Versiyonlama:
style.css içerisine yazacağınız farklı tema tanıtım bilgileri mevcuttur. Bunlar mecburi değildir. Aşağıdaki örnekte bazı ek bilgileri görebilirsiniz. Burada version kısmı önemlidir. Çünkü style.css içinde değişiklik yaptığınızda versiyonu değiştirmezseniz tarayıcı cache bellekteki dosyayı okur ve bu durumda değişiklikleri göremezsiniz. Her zaman olmasada css değişiklikleriniz çoğalınca bu versiyonu arttırmanız iyi olur. Versiyon numarasını 3 haneli yazmak bu anlamda iyi olabilir.
/*
Theme Name: Royal Elementor Kit Child
Theme URI: http://www.ayhankesicioglu.com
Template: royal-elementor-kit
Description: Royal Elementor Kit Child Theme
Author: Ayhan Kesicioglu
Author URI: http://www.ayhankesicioglu.com
Version: 1.0.1
*/

3. Child Temaya Ait Bir Görsel Yükleyin (Opsiyonel):
WP yönetim panelinden Görünüm/Temalar menüsüne girdiğinizde, yüklenen temaların bir görseli olduğunu görebilirsiniz. Bu görsel yüklenmezse boş olarak görünür. Child tema için screenshot.png (veya screenshot.jpg) isimli 1200x900 px bir resim oluşturup child tema klasörüne yükleyebilirsiniz. Böylece child temanızı temsil eden bir görseli olacaktır.

4. Child Tema Klasöründe functions.php Dosyası Oluşturun (Opsiyonel):
Bu dosya çeşitli özelleştirme kodlarını ekleyeceğiniz kısımdır ve önemlidir. Fakat bu dosya olmadan da sadece style.css ile Child temayı etkinleştirmek mümkündür.

-------
Devam etmeden önce aşağıda bazı kodlarda geçecek olan sistem metodlarını tanımak faydalı olacaktır.

get_template_directory() --> Parent temanın klasör yolu:
/home/public_html/wp-content/themes/royal-elementor-kit
get_template_directory_uri() --> Parent temanın url'si:
https://example.com/wp-content/themes/royal-elementor-kit
get_stylesheet_directory() --> Child temanın klasör yolu:
/home/public_html/wp-content/themes/royal-elementor-kit-child
get_stylesheet_directory_uri() --> Child temanın url'si:
https://example.com/wp-content/themes/royal-elementor-kit-child
-------

5. Parent Temanın style.css Dosyası Child Tema İçine Nasıl Aktarılır (Opsiyonel):
Child temada style.css dosyası eklediğimizde, Parent temanın style.css  dosyası geçersiz hale gelir. Eğer parent temanın style.css dosyasını geçerli kılıp onun üzerine bazı değişiklikler eklemek niyetindeyseniz; bu durumda Parent temanın style.css dosyasını içe aktarmanız gereklidir. Bu çok basittir. Child temanın functions.php dosyası (yoksa oluşturun) içerisine aşağıdaki kodları ekleyerek içeri aktarmış olursunuz:
<?php
function enqueue_parent_styles() {
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
}
add_action('wp_enqueue_scripts', 'enqueue_parent_styles');
?>

6. Child Temaya Özel Javascript (custom.js) Nasıl Eklenir (Opsiyonel):
Bu işlemi dilerseniz Simple Custom CSS and JS (by SilkyPress) eklentisi veya benzeri bir eklenti ile yapabilirsiniz. Veya child tema için daha uygun bir yöntem olarak bir custom.js dosyası oluşturup, bunu child tema içine aktarırsınız. Ben burada ikinci yöntem ile devam edeceğim. Öncelikle tema klasörünüzün içinde js isimli bir klasör ve içine de custom.js isimli bir dosya oluşturun. 
Örnek olarak aşağıdaki kodları ekleyerek custom.js dosyanızı oluşturabilirsiniz:
jQuery(document).ready(function($) {
    // Add custom JavaScript code here
    // $('p').css('color', 'red');
});
Sonra 5.adımdakine benzer şekilde aşağıdaki kodu functions.php dosyanızın içine ekleyin:
function custom_js_enqueue() {
    wp_enqueue_script('custom-script', get_stylesheet_directory_uri() . '/js/custom.js', array('jquery'), '1.0', true);
}

add_action('wp_enqueue_scripts', 'custom_js_enqueue');
Buradaki array('jquery') ifadesi ile eklediğiniz custom.js dosyasının jquery den sonra çalışmasını istediğinizi belirtmiş olursunuz. 1.0 ile de custom.js dosyasını versiyonlamış olursunuz, böylece tarayıcı bellekteki eski dosyayı kullanıcıya sunmaz.

7. Child Temayı Aktif Hale Getirin:
WP yönetim panelinden Görünüm/Temalar menüsüne girin. Burada eklediğiniz Child tema üzerine gelip Etkinleştir butonuna tıklayın.

Artık Child temanız oluştu ve aktif hale getirildi. Bundan sonra child tema dosyalarınız üzerinde istediğiniz özelleştirmeleri eklemeye başlayabilirsiniz. Diyelim footer.php dosyası üzerinde değişiklik yapmak istiyorsunuz. Bu durumda child temada (parent temada neredeyse oraya) footer.php dosyasını oluşturun ve içine özelleştirme kodlarınızı ekleyin. Bu şekilde tüm özelleştireceğiniz dosyaları child tema içine ekleyebilirsiniz. Unutmayın sistem önce child temanın dosyasını sonra parent temanın dosyasını çalıştırır (style.css hariç, ayrıntılı bilgi yukarıdaki sorular kısmındadır).

BONUS:
5. ve 6. maddelerde bahsettiğim dosyaları sürekli olarak manuel versiyonlama yapmak uğraştırıcı bir iş. Bu dosyaları üzerinde her değişiklik yaptığımızda versiyonu değişecek şekilde ayarlamak işimizi çok daha kolaylaştıracaktır. Böylece versiyon otomatik değişecek ve bizim manuel olarak ilerletmemize gerek kalmayacaktır. 
Bunun için önce child tema içine /css/custom.css dosyasını oluşturun ve child temanın style.css dosyasına eklediklerinizi bu dosyaya taşıyın. 
Bu şekilde otomatik versiyonlanmanın ayarlandığı şekliyle child temaya ait tüm dosyaların son hali aşağıdaki şekilde olacaktır:

style.css
/*
Theme Name: Royal Elementor Kit Child
Theme URI: http://www.ayhankesicioglu.com
Template: royal-elementor-kit
Description: Royal Elementor Kit Child Theme
Author: Ayhan Kesicioglu
Author URI: http://www.ayhankesicioglu.com
Version: 1.0.1
*/

/css/custom.css
/*your custom css*/
body {
    font-size: 12px;
}

/js/custom.js
jQuery(document).ready(function($) {
    // Add custom JavaScript code here
    // $('p').css('color', 'red');
});

functions.php
<?php

// dosyanin degistirilme tarihini 10 basamakli sayi olarak dondurur: 1234567890 gibi
function get_file_version($file) {
    $mtime = filemtime($file);
    if ($mtime === false) {
        return '';
    } else {
        return $mtime;
    }
}

// css dosyalarini ice aktar
function enqueue_parent_styles() {
    // parent tema css dosyasini ice aktar
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
    // child tema custom.css dosyasini ice aktar (otomatik versiyonlama)
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri(). '/css/custom.css', array(), get_file_version(get_stylesheet_directory() . '/css/custom.css') );
}
add_action('wp_enqueue_scripts', 'enqueue_parent_styles');

// js dosyalarini ice aktar
function custom_js_enqueue() {
    // child tema custom.js dosyasini ice aktar (otomatik versiyonlama)
    wp_enqueue_script( 'custom-script', get_stylesheet_directory_uri(). '/js/custom.js', array('jquery'), get_file_version(get_stylesheet_directory() . '/js/custom.js'), true );
}
add_action('wp_enqueue_scripts', 'custom_js_enqueue');

?>

Yorumlar

Yorum Gönder

ayhan kesicioğlu

kişisel blog