WordPress ile çocuk tema oluşturmak

Image: @Capri23auto, 2017, Pixabay

WordPress’i kurdunuz, kendi temanızı baştan kodlamak yerine hazır bir tema seçerek üzerinde küçük değişiklikler yapmayı planlıyorsunuz. Öncelikle şunu belirteyim; seçtiğiniz tema, yapmayı düşündüğünüz değişikliklere fırsat tanıyor olabilir. Birçok tema, tek satır kod yazmadan kontrol panelinden genel görünümün, renklerin, üst başlık resminin, arka plan resminin ve daha birçok özelliğin değiştirilmesini destekler. Bu kısma hızlıca değindikten sonra kendi temasını oluşturmaya çalışanlar için yazmaya devam ediyorum.

Mevcut bir temada küçük değişiklikler yapacaksanız veya basit (minimal) bir temayı baz alarak kendi temanızı oluşturacaksanız, kullanmanız gereken yöntem çocuk tema oluşturmaktır.

Yaptığınız değişikliklerin tema güncelleştirmelerinde kaybolup gitmesini engellemek için,  tema dosyalarını düzenlemek yerine, çocuk tema oluşturmalısınız.

Çocuk tema oluşturmak için üç şeye ihtiyacımız var:

  • Çocuk tema klasörünü oluşturmak
  • style.css dosyasını oluşturmak
  • functions.php dosyasını oluşturmak

Şimdi WordPress ile birlikte gelen Twenty Seventeen temasının çocuk temasını oluşturalım.

İlk olarak “twentyseventeen-child” adında bir klasör oluşturuyoruz.

Ardından “style.css” adında bir metin dosyası oluştuyoruz. Formatı şöyle olabilir:

style.css:

/*
Theme Name:   Twenty Seventeen Child
Theme URI:    http://example.com/twenty-seventeen-child/
Description:  Twenty Seventeen Child Theme
Author:       Your Name
Author URI:   http://example.com
Template:     twentyseventeen
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  twentyseventeen-child
Tags:         one-column, two-columns, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready
*/

 

Son olarak da functions.php adında yine bir metin dosyası oluşturuyoruz. Bu dosya içerisine çocuk temanın PHP fonksiyonlarını yazacağız.

Sıra geldi stil dosyalarının çağrılmasına. Önce ebeveyn temanın stil dosyası, ardından çocuk temanın stil dosyası çağrılmalı. Eskiden kullanılan ve tavsiye edilen yöntem aşağıdaki gibi çocuk temanın style.css dosyasına aşağıdaki kodu yazarak, @import ile ebeveyn temanın stil dosyasını çağırmaktı. Bu yöntem kullanılırsa başka bir şey yapmaya gerek kalmıyordu.

@import url("../twentyseventeen/style.css");

Bu yöntemin sayfanın yüklenmesini yavaşlattığı gerekçesiyle artık resmi dokümanlarda tavsiye edilmediğini görüyoruz, fakat yine de yeni başlayanları düşünerek daha basit bir yöntem olduğu için yazmak istedim.

Yeni yöndemde de wp_enqueue_style() fonksiyonu ile önce ebeveyn tema stili, sonra ona bağımlı olduğu belirtilerek çocuk tema stili kuyruğa alınıp çağrılıyor.

functions.php:

<?php
add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles');
function my_theme_enqueue_styles() {
    $parent_style = 'twentyseventeen-style';
    wp_enqueue_style($parent_style, get_template_directory_uri() . '/style.css');
    wp_enqueue_style('twentyseventeen-child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array($parent_style),
        wp_get_theme()->get('Version')
    );
}

Burada ebeveyn tema Twenty Seventeen değil de başka bir tema olsaydı, $parent_style değişkeni de o temanın stil etiketi olacaktı. Bunu bulmak için ilgili ebeveyn temanın functions.php dosyası içerisinde wp_enqueue_style() fonksiyonuyla ilgili satır arattırılabilir. $parent_style değişkeninde doğru etiket kullanılarak, çocuk temanını stil dosyasının ebeveyn temanın stil dosyasından sonra çağrıldığından emin olunur.

Artık en yalın haliyle çocuk temamızı oluşturmuş olduk. Gelelim ebeveyn tema ile nasıl etkileşimde bulunacağımıza. Bu noktada şablon hiyerarşisi kavramı devreye giriyor.

Şablon hiyerarşisini şu makalede kısaca anlatmaya çalıştım.

Şimdi, çocuk tema devreye girdiğinde ne olup bittiğine bakalım. WordPress, hangi şablon dosyasının çağrılacağına şablon hiyerarşisine göre karar verirken, aradığı dosyayı ilk olarak çocuk tema içerisinde arar.

Aslında tüm olayın özeti bu cümledir. Şablon hiyerarşisi konusundaki örnekten devam edersek;

WordPress, http://example.com/blog/category/bilgisayar/  şeklinde bir istek aldığında, ne yeni yaptığımız çocuk temada ne de Twenty Seventeen ebeveyn temasında, category-*.php dosyası mevcut olmadığı için, archive.php dosyasını aramaya koyulacaktır. WordPress archive.php dosyasını ilk olarak yeni hazırladığımız çocuk tema içerisinde arayacak, bulamayınca Twenty Seventeen ebeveyn temasında arayacak, ve bulduğu için buradaki archive.php dosyasını çağıracaktır.

(Eğer ebeveyn temada da archive.php bulunmasaydı, ilk olarak çocuk temada index.php aranacaktı)

category-$slug.php > category-$id.php > category.php > archive.php > index.php

O halde kategori görünümünü değiştirmek istiyorsak, izleyebileceğimiz yollardan biri de, çocuk tema içerisine bir archive.php dosyası oluşturmaktır. İzlememiz gereken yol, ebeveyn tema içindeki archive.php dosyasını, çocuk tema klasörüne kopyalayıp, istediğimiz yerleri değiştirmektir.

Kısacaca, şablon hiyerarşisi konusunu inceledikten sonra, ebeveyn temadan çocuk temaya dosyalar kopyalayıp, ilgili yerlerini değiştirerek istenen değişiklikler yapılır.

Bütün bunların haricinde, ebeveyn tema functions.php dosyası yoluyla da bazı fonksiyonlarının değiştirilmesine izin veriyor olabilir. WordPress önce çocuk temanın functions.php dosyasını, sonra ebeveyn temanın functions.php dosyası çağırır. Bundan yola çıkarak, eğer ebeveyn tema izin veriyorsa, çocuk tema bazı fonksiyonları değiştirebilir.

Örneğin ebeveyn temanın functions.php veya şablon harici başka bir dosyası, şöyle bir tanımlama içeriyorsa:

functions.php (ebeveyn tema):

if ( ! function_exists( 'theme_special_nav' ) ) {
    function theme_special_nav() {
        // Do something.
    }
}

Çocuk temanın functions.php dosyası içerisinde örnek theme_special_nav() fonksiyonu tekrar tanımlanabilir:

functions.php (çocuk tema):

function theme_special_nav() {
    // Do something different.
}

Kaynaklar:

https://developer.wordpress.org/themes/advanced-topics/child-themes/
https://codex.wordpress.org/Child_Themes
http://volkan.xyz/tr/wordpress-sablon-hiyerarsisi/

Kaynak: https://volkan.xyz

 

Bu yazıyı yalnızca kaynak göstererek ve önceden belirtilen Kullanım Koşulları altında paylaşabilirsiniz.

 

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir