Divi Yavru Tema Hazırla

Elegantthemes.com sitesinde yer alan bu blog yazısından faydalanarak hazırladım. Divi vb. WordPress temalarının fonksiyonelliğinde veya tasarımında özelleştirme yaparsanız bunlar tema güncellendiğinde mevcut functions.php ve style.css dosyasının üzerine yazılacağı için kaybolacaktır. Divi son yıllarda oldukça hızlı güncelleme alan bir WYSIWYC (visual designer) site yapımına imkan veren güzel bir temadır. Neden Yavru Tema Üretmeliyim? Oldukça kısa sürelerde […]

Yazan - Fatih Anıl

Nisan 02, 2018
"

Elegantthemes.com sitesinde yer alan bu blog yazısından faydalanarak hazırladım.

Divi vb. WordPress temalarının fonksiyonelliğinde veya tasarımında özelleştirme yaparsanız bunlar tema güncellendiğinde mevcut functions.php ve style.css dosyasının üzerine yazılacağı için kaybolacaktır.

Divi son yıllarda oldukça hızlı güncelleme alan bir WYSIWYC (visual designer) site yapımına imkan veren güzel bir temadır.

Neden Yavru Tema Üretmeliyim?

Oldukça kısa sürelerde güncellenen bu temayla ya da başka temalarla çalışırken yaptığınız özelleştirmeleri korumak için ana temadan bir yavru tema üretmek çok pratik ve akıllıca olacaktır.

Yavru Temanın Yapı Taşları

building-blocks-1

En temel düzeyde bir yavru tema aşağıda sıralanan dosya ve dizinleri içermelidir;

  1. Yavru tema dizini. Bu dizinde her tema dizini gibi /wp-content/themes/ konumunda bir dizin olarak yer almalıdır.
  2. Bir style.css dosyası. Yavru temanın stil tanımları için.
  3. Bir functions.php dosyası. Bu dosya ana temanın stil tanımları işlendikten sonra kuyruğa alınacak wp_enque_scripts kancalarını (actions) içerecektir.

Yavru Tema Dizinini Oluştur

Yavru tema dizinini iki yolla oluşturabiliriz;

  1. Bir FTP istemcisi (WinSCP, Filezilla vb.) ile public_html ana dizininize bağlanarak tema dizinlerinin bulunduğu /wp-content/themes/ konumunda oluşturabiliriz.
  2. Sitenizi barındıran sunuculara Cpanel, Plesk gibi kontrol panelleriyle de public_html ana dizinine erişerek yavru dizini oluşturabilirsiniz.
create-new-child-folder

Yavru temayı oluştururken isimlendirmede mümkün olduğu kadar “ana tema ismi-child” biçimiyle bir standart teamül uygulamak dizin yapısını okumada kolaylık sağlayacaktır.

Style.css Dosyasını Oluştur

Dizin oluşturmada bahsettiğim iki yöntemden birini kullanarak yavru tema dizininde ( divi-child ) style.css dosyası oluşturacağız. Oluşturduğumuz dosyada aşağıdaki bilgiler muhakkak yer almalıdır.

required-header-contents

/*
Theme Name: Divi Child
Theme URI: https://www.elegantthemes.com/gallery/divi/
Description: Divi Child Theme
Author: Elegant Themes
Author URI: https://www.eleganthemes.com
Template: Divi
Version: 1.0.0
*/
/* Theme customization starts here
------------------------------------------------------------------------*/
Template parametresinin Divi temasını doğru refere etmesi gerektiğine mutlaka dikkat edin. Tema ismi, URL, tanım ve yazar bilgileri tamamen size kalmış. İstediğiniz gibi bu bilgileri doldurabilirsiniz.

Functions.php Dosyasını Oluştur ve Ana Tema Stil Kuyruğuna Ekle

Yavru temada kendi stil dosyası barındırması ana stil dosyasını rafa kaldırmıyor. Divi temasında ve diğer temalarda önce ana temanın style.css kodları kuyruğa alındıktan sonra yavru temanın stil tanımları kuyruğa ekleniyor.

Bu kuyruklama işleminin sağlıklı çalışabilmesi için functions.php dosyasını yavru tema dizininde oluşturup içine aşağıdaki fonksiyon ve kancayı ekliyoruz.

<?php

function my_theme_enqueue_styles () {

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

}

add_action( 'wp_enqueue_scripts' , 'my_theme_enqueue_styles' );

Dosyayı kaydediyoruz.

Bu kod Divi için WordPress Codex yavru temalar kaynağından özelleştirilmiş.

Yavru Tema İçin Ön İzleme Görüntüsü Oluştur

WordPress yönetim panelinin temalar sayfasında sistemde yüklü olan temaların ön izleme görüntüleri sunulur.

Yavru tema için bu görüntüyü o WordPress in önerdiği resim boyutu 1200px genişliğinde, 900px yüksekliğinde oluşturabiliriz. Ekran görüntüsünü bu boyutlarda biçimlendirdikten sonra yavru tema dizinine ( /wp-content/themes/divi-child/ ) screenshot.png adıyla kaydediyoruz. WordPress ön izleme görüntüsünü bu isimle tanıyabilecektir.

Divi’nin Template Dosyalarını Düzenleme

Yavru temayı özelleştirirken sadece stil ve fonksiyon dosyasıyla sınırlı değilsiniz. Template ve PHP dosyalarını da yavru tema dizinine kopyalarak düzenleyebilir ve özelleştirebilirsiniz.

Bu noktada functions.php dosyasının aksine Divi template ve PHP dosyalarında ana temadaki dosyaları eğer yavru temada aynı isimde dosya varsa atlayarak sadece yavru temadakileri işleme alacaktır. Bu nedenle ana temadaki template ve PHP dosyalarını kopyalayarak yavru tema dzininde tam bir kopyasını yerleştirerek özelleştirmeye başlamanız çok önemlidir.

Yavru Temayı Güncelleme Gerekebilir

Divi ve WordPress sürekli olarak geliştirilmekte ve uyumluluk sağlanmaya çalışılmaktadır. Bu nedenle bazı durumlarda yavru temanız sorunlar çıkarmaya başladıysa yavru tema dosyalarınızda güncellenmesi gereken kodlar var demektir. Bu durumda yavru tema dosyalarını güncellemelisiniz.

0 Yorum

Bir İçerik Gönder

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