WordPress – Child Theme Oluşturma

15 Kasım 2019 tarihinde Emre Can ÖZTAŞ tarafından paylaşıldı.

WordPress’te kullandığınız temalar üzerinde değişiklik yaptığınız zaman, bu değişiklikler temada gerçekleşecek güncelleme işleminden sonra kaybolacaktır. Çünkü güncelleme işleminde tema, default ayarlarına geri dönmekte ve gelen yenilikler veya değişiklikler eklenmektedir. İşte böyle zamanlarda; yani temanız üzerinde yaptığınız değişikliklerin kalıcı olması için “Child Theme” seçeneğini kullanabilirsiniz.

Peki Child Theme tam olarak nedir? Bu sorunun cevabını verebilmek için; öncelikle “Parent Theme” nedir sorusunu cevaplamamız gerekir.

Parent Theme Nedir?

Parent theme yani; ana tema, kullandığınız asıl temadır. CSS, JavaScript, logo, metin v.s gibi bileşenler ana temanızda yer almakta ve kimliğinizi yansıtmaktadır.

Ücretli bir tema satın aldığınızda; bu temanın belli bir zaman dilimi içerisinde, güncelleme alacağı belirtilmiştir. Bu zaman dilimi aralığında tema genellikle güncelleme alır ve bu güncelleme sonucunda sizin, temanız üzerinde yaptığınız değişiklikler her seferinde kaybolur. Böyle durumlarda pek fazla bir seçeneğiniz yoktur. Ya temanız üzerinde yaptığınız değişikliklerin yedeğini almalısınız ya da child thema oluşturmalısınız.

Child Theme Nedir?

Parent Theme Nedir? Başlığı altında belirttiğimiz gibi temanız güncelleme aldığı zaman tema üzerinde yaptığınız değişiklikler kaybolur. Temanız üzerinde yaptığınız değişikliklerin kaybolmaması için yaptığınız değişikliklerin yedeğini almak dışındaki seçenek: Child Theme seçeneğidir.

Peki Child Theme nedir?

Child Theme yani alt temalar, ana temanın bir alt kümesi olup ana temadaki değişikliklerin saklandığı minik temalardır. Temelinde tam bir tema olmayıp genel amaç olarak hep belirttiğimiz gibi ana tema üzerindeki değişiklikleri saklamak için oluşturulmuş yapılardır. Alt tema kullanmanın, değişiklikleri saklamak dışında birden fazla yardımcı olduğu konu vardır. Örneğin: ana tema üzerinde yaptığınız değişiklikleri geri getirmenize yardımcı olur, değişikliklerinizi taşınabilir ve yeniden kullanılabilir bir hale getirir, değişiklikleriniz kaybolmadan ana temanızın güncellenmesini kolaylaştırır, tema geliştirmeyi öğrenmenize yardımcı olur ve en önemlisi zamandan tasarruf etmenizi sağlar.

Child Theme Nasıl Oluşturulur?

Child Theme, yani alt tema oluşturmanın 2 farklı yolu var. Bunlardan birincisi; eklenti ile diğeri de kodlama bilginiz ile.

Alt temayı eklenti ile oluşturmak isterseniz; Child Themify eklentisi bu konuda oldukça iyi iş çıkarıyor. Bu eklenti ile kolaylıkla alt temalar oluşturabilir ve bu temalar üzerinde değişiklikler yapabilirsiniz.

Kodlama bilginiz ile alt tema oluşturmak oldukça basit.

Alt tema oluşturmak için ilk olarak; wp-content/themes dizininde bulunan tema dosyalarınızla aynı dizine bir dosya daha açmak ve ismini:

yourtheme-child

şeklinde belirlemektir. Burada; yourtheme, kullandığınız temanızın ismi. Yani; wp-content/themes dizinimiz şu şekilde gözükecektir.

|-yourtheme
|-yourtheme-child
|-...

yourtheme-child dizini artık bizim ana temamızın bir alt teması yani child theme olacaktır.

Ana tema üzerinde yapmak istediğiniz değişiklikleri artık; alt tema üzerinde yapabilirsiniz. Tabi ki bu demek değildir ki; ana tema üzerinde artık değişiklik yapılamaz! Ana tema üzerinde de değişiklik yapmaya devam edebilirsiniz.

Alt temanızın ihtiyaç duyduğu 2 dosya vardır. Bunlar: style.css ve functions.php dosyalarıdır. Bu dosyaları da oluşturalım.

|-yourtheme
|-yourtheme-child
|--style.css
|--functions.php
|-...

style.css ve functions.php dosyaları dışında; ana temada değişiklik yapmak istediğiniz dosyalar var ise bu dosyaları da alt temanıza eklemelisiniz. Örneğin; search.php dosyasında değişiklik yapmak isterseniz, alt temanıza search.php dosyasını eklemelisiniz.

Örnek bir kullanımdan yola çıkarak devam edelim.

WordPress ile default olarak gelen; twentysixteen temasını ele alalım. Bu temanın bir alt temasını oluşturmak istiyorsanız; temanızın ismi twentysixteen-child şeklinde olacaktır.

|-twentysixteen
|-twentysixteen-child
|--style.css
|--functions.php
|-...

Yukarıdaki satırlarla da belirttiğimiz gibi bizim için en önemli 2 dosyayı oluşturduk. Buradan sonraki kısım ise; alt tema için gerekli olan diğer adımlar. Bu adımları da başlıklar halinde inceleyelim.

style.css

style.css dosyası, ana temanızın style.css dosyasının header bilgisiyle benzer yapıda olmalıdır.

twentysixteen temasının header bilgisi aşağıdaki gibidir.

/*
Theme Name: Twenty Sixteen
Theme URI: https://wordpress.org/themes/twentysixteen/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Twenty Sixteen is a modernized take on an ever-popular WordPress layout — the horizontal masthead with an optional right sidebar that works perfectly for blogs and websites. It has custom color options with beautiful default color schemes, a harmonious fluid grid using a mobile-first approach, and impeccable polish in every detail. Twenty Sixteen will make your WordPress look beautiful everywhere.
Version: 2.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: one-column, two-columns, right-sidebar, accessibility-ready, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, flexible-header, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready, blog
Text Domain: twentysixteen

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

Yukarıdaki satırların tümünün olmasına gerek yoktur. Kısa ve sadece bir header işimizi görecektir. O halde biz de alt temamıza bir başlık girelim.

/**
 * Theme Name: Twenty Sixteen Child
 * Template:   twentysixteen
 */

Yukarıdaki satırlarımızı inceleyelim. Ben en gerekli olan 2 satırı yazdım. İlk satırımız; temamızın adını diğer satır ise ana temayı belirtmektedir. Şayet; Template satırını belirtmez iseniz, WordPress uyarı verecektir.

Ana temada bulunması zorunlu dosyalar: style.css ve index.php dosyaları, alt temada bulunması gereken zorunlu dosyalar: style.css ve functions.php dosyasıdır. Eğer burada; Template satırını unutursanız; WordPress bunu bir parent tema olarak algılayacak ve index.php dosyasını isteyecektir. Bu sebepten dolayı mutlaka Template satırını, style.css dosyasının header bölümüne ekleyelim! Ayrıca; Template, ana temayı işaret etmelidir. Yani ana temanın, “Text Domain” ismini “Template” satırına yazmamız gereklidir. Böylelikle; alt tema her zaman ana temayı tanıyacaktır.

Şayet ana temanın style.css dosyasında “Text Domain” satırı yoksa; bu satırı ekleyelim! Çünkü bu satır olmadan alt tema ile iletişim kurulamaz!

functions.php

functions.php dosyasında ise; ana temada da olan klasik düzenlemeler yer alabilir. Fakat burada dikkat edilmesi gereken en önemli husus: style.css dosyasının temaya eklenmesidir. Bu işlemi de aşağıdaki gibi gerçekleştirebiliriz.

<?php

add_action('wp_enqueue_scripts', 'add_child_style');

function add_child_style() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

style.css dosyasının eklenmesinin nedeni; ana temadaki CSS dosyalarının aynı şekilde tekrar temaya eklenmesini sağlamaktır.

Ana tema üzerinde yapacağınız CSS değişikliklerini, alt temadaki style.css dosyası üzerinde gerçekleştirebilirsiniz. Fakat; style.css dosyasını boş bırakıp yeni stil dosyaları oluşturup bu stil dosyaları üzerinde, ana temanın stil değişikliklerini yapabilirsiniz. Bu işlemi de aşağıdaki şekilde gerçekleştirebiliriz.

<?php

add_action('wp_enqueue_scripts', 'add_child_style');

function add_child_style() { 
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');

    wp_enqueue_style('child-style',
        get_stylesheet_directory_uri() . CSS-FILE,
        array('parent-style'),
        wp_get_theme()->get('Version')
    );
}

Yukarıdaki satırlar arasındaki; CSS-FILE olan yere, oluşturduğunuz stil dosyanızın adını yazmalısınız.

Child Theme Kullanımı

Chil theme yani alt temamızı hazırladık. Sıra bu alt temamızı kullanmaya geldi. Bunun için: Görünüm > Temalar yolunu takip ediyoruz ve tema seçeneklerinin olduğu sayfayı açıyoruz.

Yukarıdaki ekran alıntısında da görüldüğü üzere temamızın alt teması oluşmuş durumda. Oluşturmuş olduğumuz alt temayı etkinleştirmemiz gerekiyor. Çünkü artık alt temadaki değişiklikleri kullanacağız. Alt temamızı etkinleştirelim.

style.css dosyasında aşağıdaki stili oluşturdum.

body {
    background: #ffff00;
}

Temamızın görünümü aşağıdaki gibi olacaktır.

Görüldüğü gibi; alt tema üzerinde yaptığımız stil değişiklikleri, temamıza yansımış.

Buraya kadar olan kısımda bahsettiğimiz şekilde alt tema veya temalar oluşturabilir ve kullanabilirsiniz. Burada unutulmaması gereken şey ise; kullanımda olan ana tema olup değişiklikler alt temada saklanmaktadır. Tekrar ana temayı etkinleştirirseniz; alt tema üzerinde yapılan değişiklikler gözardı edilecek ve ana temanın kuralları tekrar geçerli olacaktır.

Kategoriler: [WordPress] Etiketler: #child-theme #functions.php #parent-theme #style.css

Bir cevap yazın

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

*

*
*

This site uses Akismet to reduce spam. Learn how your comment data is processed.