Wordpress İpuçları / WordPress Alt Tema (Child Theme) Nasıl Oluşturulur (Başlangıç Kılavuzu)

WordPress Alt Tema (Child Theme) Nasıl Oluşturulur (Başlangıç Kılavuzu)

Wordpress’te bir alt tema (child theme) oluşturmak ana temanızın kodlarında kalıcı değişiklikler yapmadan ana temanızda düzenlemeler yapmanızı olanak sağlar.

WordPress’te alt temalar sitenizin görünümünün küçük yerlerini değiştirmenize, ancak yine de temanızın görünümünü ve işlevselliğini korumanızı sağlar. Alt temaların nasıl çalıştığını anlamak için öncelikle ana tema ve alt temaların nasıl çalıştığını, aralarında ki ilişkiyi iyi bilmemiz gerekiyor.

Ana Tema Nedir?

Ana temalar, internet sitenizde ki temanın çalışabilmesi gerekli olan tüm dosyaları ve kodlamaları içeren eksiksiz bir temadır. Alt tema haricinde ki tüm temalar ana tema olarak kabul edilir.

Alt Tema Nedir?

Genel olarak alt tema, ana temanızın tüm işlevselliğini kullanabilen fakat ana temanızda değiştirmek, geliştirmek, ekleme ve çıkarma yapmak istediğiniz yerleri değiştirebilmenizi olanak sağlar. Böylelikle ana temanızın kod yapısını ve dosya yapısını bozmadan alt tema ile temanızda değişiklikler yapabilirsiniz.

Alt tema da yaptığınız değişiklikler ana temanızın dosyalarından ayrı tutulur. Böylelikle olası bir hatadan dolayı ana temanızın dosyaları bu durumdan etkilenmez. Alt temaların size sağladığı avantajları şu şekilde listeyelebiliriz.

  • Değişiklerinizi taşınabilir ve tekrarlanabilir hale getirebilirsiniz.
  • Özelleştirmelerinizi ana temanızdan ayrı tutabilirsiniz.
  • Yapmış olduğunuz değişikler silinmeden ana temanızı güncelleyebilir ve bir üst sürüme yükseltebilirsiniz.
  • Temayı sıfırdan inşa etmek zorunda kalmadığınız için istediğiniz gibi bir tema oluşturmak için gereken süre ve çabayı en aza indirmiş olursunuz.
  • WordPress’te tema geliştirmeye başlamak için en iyi yoldur.

Eğer, oluşturacağınız alt tema birkaç dosyanın ötesine geçer ise bir ana tema oluşturmanızı tavsiye ederiz. Sadece ufak değişiklikler ve eklemeler yapacaksanız alt tema oluşturmak sizin için en iyi tercih olabilir ancak bu değişikler fazla olursa eğer bir alt tema yerine ana tema oluşturmak daha iyi bir seçenek olabilir.

WordPress Alt Tema (Child Theme) Nasıl Oluşturulur?

Başlamadan önce bir WordPress alt teması oluşturmak için kodlama yapacağımızı bilmeniz gerekiyor. Hedeflerinize ulaşabilmek için ve kodlarda hangi değişiklikleri yapmanız gerektiğini anlamak için HTML ve CSS bilmeniz gerekiyor.

Biraz da PHP bilgisi bilmeniz gerekiyor. En azından diğer kaynaklardan kodları kopyalayıp yapıştırmaya aşina olmalısınız.

Bu başlangıç kılavuzunda göreceğiniz işlemleri aktif olarak kullandığınız sitenizde yapmanızı tavsiy etmiyoruz. Bunun yerine test amaçlı bir site açabilir veya bilgisayarınızı bir sanal sunucuya çevirerek, kılavuzda ki işlemleri yapmanızı tavsiye ederiz.

Son olarak, işlemleri yapabilmemiz için kendinize bir ana tema belirlemeniz gerekiyor. Nihai hedefimize ulaşabilmek için görünüşü basit ve kolay düzenlenebilen bir tema seçmek başlangıç için doğru olacaktır. Burada ki amaç mümkün olduğunca az değişiklik yapmak ve alt tema oluşturmanın temel kavramlarını öğrenmektir.

Bu blog yazımızda biz WordPress’in varsayılan olarak gelen temalarından biri olan Twenty Twenty-One temasını kullanacağız.

İlk Alt Temanızı Oluşturma

Gerekli klasör ve dosyaları manuel olarak oluşturarak bir alt tema oluşturabilirsiniz ya da bir eklenti kullanarak bir alt tema oluşturabilirsiniz.

Manuel olarak alt tema oluşturmak temelleri öğrenmek için en iyi yoldur. Böylelikle diğer aşamalarda yapacağınız işlemler ve daha sonra ki çalışmalarınızda kullanacağınız dosyalara, kodlara aşina olmanızı sağlar. Ancak, manuel olarak bu dosyaları oluşturmakta zorluk çekiyorsanız bir eklenti kullanmayı tercih edebilirsiniz.

Biz size bu başlangıç kılavuzunda her iki yöntemide göstereceğiz. Aşağıda bu yöntemler arasında geçiş yapabilirsiniz.

Birinci Yöntem: Kod Kullanarak (Manuel) Alt Tema Oluşturmak

Öncelikle yapmamız gereken WordPress’in tema dizininde bir klasör oluşturmak. WordPress’in tema dizini /wp-content/themes/ adresinde bulunur. Bu klasörü açın ve içerisine bir klasör oluşturun.

Oluşturduğunuz klasöre istediğiniz ismi verebilirsiniz. Biz wordpresslidemo olarak isimlendirdik ve bu kılavuz yazısı boyuncada bu şekilde kullanacağız.

WordPress Alt Tema İçin Klasör Oluşturma Aşama-1
WordPress Alt Tema İçin Klasör Oluşturma Aşama-1

Bu aşamadan sonra artık alt temamız için ilk dosyamızı oluşturabiliriz. Oluşturduğunuz bu yeni klasörü açın ve içerisine style.css adında bir metin dosyası oluşturun ve bu dosyayı bir metin editörü ile açın; örneğin Notepad.

Dosyayı oluşturdunuz ve metin editörü ile açtınız. Aşağıda ki kodları olduğu gibi kopyalayıp, dosyanıza yapıştırın.

style.css dosyasına eklenecek kod satırları
/*
 Theme Name:   WPLİ Alt Tema
 Theme URI:    https://wordpressli.com
 Description:  Twenty Twenty-One alt teması
 Author:       WordPressli
 Author URI:   https://wordpressli.com
 Template:     twentytwentyone
 Version:      1.0.0
 Text Domain:  twentytwentyonechild
*/

Oluşturduğumuz bu dosya temanızın tasarımını düzenlememizi sağlayacak stil (css) dosyasıdır. Eklediğimiz kod satırları ise WordPress’in temamızı tanımasını sağlıyor.

Geldik ikinci dosyamızı oluşturmak. Stil dosyamızı oluşturduğumuz klasöre bir metin dosyası daha oluşturuyoruz ve bu sefer ismini functions.php olarak belirliyoruz ve metin editörü ile açın ve aşağıda ki kodları bu dosyaya ekleyin.

Biz kendimize bir ana tema seçmiştik; Twenty Twenty-One, bu tema bizim ana temamız ve birçok yapıyı içerisinde barındırıyor, oluşturduğumuz alt temanın ana tema ile olan bağlantısını sağlayabilmek ve ana temanın özelliklerinin alt temamızda da çalışabilmesi için Enqueue stylesheet fonksiyonunu çalıştırmamız gerekiyor. Detaylı bilgiyi WordPress Temalar Kitaplığını inceleyebilirsiniz.

functions.php dosyasına eklenecek kod
/* enqueue scripts and style from parent theme */
    
function twentytwentyone_styles() {
    wp_enqueue_style( 'child-style', get_stylesheet_uri(),
    array( 'twenty-twenty-one-style' ), wp_get_theme()->;get('Version') );
}
add_action( 'wp_enqueue_scripts', 'twentytwentyone_styles');

Bu kodda herhangi bir değişiklik yapmadan functions.php dosyasını kaydedin; ileri ki aşamalarda bu dosyaya tekrar geleceğiz ve çeşitli eklemeler ile alt temamızı geliştireceğiz.Bu kod sayesinde ana temamızın CSS kodlarının alt temamızda da kullanılmasını sağladık.

Daha önce ana temanın CSS dosyalarını alt temada kullanabilmek için @import etme özelliğini kullanıyorduk. Ancak, @import etme olayı stil sayfalarının yüklenmesini yavaşlattığı için artık bu özellik kullanılmıyor. İnternette bu konuyla ilgili eski kodlar bulabilirsiniz, bunları kullanmanızı tavsiye etmiyoruz.

Akılda tutulması gereken birkaç şey var:

  • Alt tema, ana temadan önce yüklenir.
  • Herşey öncelikli bir eyleme bağlıdır (varsayılan 10’dur), ancak aynı önceliğe sahip olanlar yüklendikleri sıraya göre çalışır.
  • Her istek için yalnızca wp_enqueue_style() işlevine yapılan ilk çağrı geçerlidir (diğerleri yoksayılır).
  • wp_enqueue_style() parametresinin bağımlılık parametresi yükleme sırasını etkiler.
  • Sürüm numarası olmadan site ziyaretçileriniz, yeni sürüm yerine tarayıcı önbelleğinde bulunan her şeyi alır.
  • Temanın sürümünü almak için get_stylesheet* kullanılan işlevler ilk önce var ise alt temanın sürümünü yok ise ana temanın sürümünü alır.

Bütün bu aşamaları yaptıktan sonra artık temel düzeyde bir alt temaya sahip oldunuz. WordPress admin panelinden Görünüm » Temalar sekmesine girerek oluşturduğunuz alt temayı görebilirsiniz.

Oluşturulan WordPress Alt Temayı Aktifleştirme
Oluşturulan WordPress Alt Temayı Aktifleştirme

Şuan da çok bir değişiklik yapmadığımız halde alt temayı aktif ettiğinizde ana temanın bütün özelliklerini kullanabilirsiniz. Bu aşamadan sonra artık alt temayı özelleştirebileceğimiz kısıma geçebiliriz.

İkinci Yöntem: Eklenti Kullanarak Alt Tema Oluşturmak

İkinci yöntem ise en kolay kullanımı sahip olan Child Theme Wizard eklentisidir. Kurulumu oldukça kolay olan Child Theme Wizard eklentisi ile herhangi bir kod kullanmadan çok hızlı bir şekilde alt temalar oluşturabilirsiniz.

Şimdi ilk yapmanız gereken Child Theme Wizard eklentisini yüklemek ve aktif etmek. Bunun için Eklentiler » Yeni Ekle yoluna gidin ve sağ üst köşede ki arama kutusuna Child Theme Wizard yazarak eklentiyi kurun.

WordPress Child Theme Wizard Eklentisi Kurulumu
WordPress Child Theme Wizard Eklentisi Kurulumu

Eklentiyi kurduktan sonra Etkinleştir diyerek eklentimizi aktif hale getirelim. Daha sonra Araçlar » Child Theme Wizard kısmına tıklayın ve gerekli alanları doldurun.

  1. Parent Theme Bu kısımda kılavuzumun başlangıcında seçmiş olduğumuz ana tema olan Twenty Twenty-One (Yirmi Yirmibir) seçiyoruz.
  2. Title kısmında ise alt temamızın ismini giriyoruz.
  3. Description kısmına ise alt temamızın açıklamasını giriyoruz.
  4. Child Theme URL kısmına alt temamızın paylaşıldığı bir internet sitesi var ise onu belirtiyoruz.
  5. Author kısmına alt temayı oluşturanı belirtiyoruz.
  6. Author URL kısmına alt temayı oluşturanın internet sitesi adresini giriyoruz.
  7. Version kısmına ise varsayılan olarak gelen 1.0 değerinde bırakıyoruz.
  8. Include GPL License seçeneği tamamen size kalmış, Yes, Please! olarak bırakabilirsiniz.

Son olarak Create Child Theme adlı butona tıklayarak alt temayı oluşturabilirsiniz. Herşey sorunsuz bir şekilde oluştu ise temalar kısmına gelerek oluşturduğunuz alt temayı aktif edip, kullanmaya başlayabilirsiniz.

Bu aşamada artık oluşturduğumuz alt tema bir ana tema gibi işleve sahip olacaktır ve istediğimiz gibi alt temamızı kullanarak değişiklikler yapabiliriz. Başlayalım mı?

Alt Temanızı Özelleştirme

Bu aşamada iş biraz teknikleşiyor. Oluşturduğumuz alt temayı, ana temadan birazcık değiştireceğiz. Bunu yapabilmek için alt temamıza ait style.css dosyasından biraz CSS kodu yazacağız ve nasıl değiştirmeler yapabileceğimizi göreceğiz.

Aşağıda ana temamızdan gelen CSS ile oluşturulmuş açık mavi renk tonklarına sahip bir görüntüsünü görüyorsunuz. Birlikte aşağıda ki görselde gördüğünüz yazıları ve arkaplan renklerini alt temamızı kullanarak değiştirelim.

Twenty Twenty-One Ana Tema Görüntüsü
Twenty Twenty-One Ana Tema Görüntüsü (Değiştirilmemiş)

Ana temamızdan bize gelen CSS kodları

body {
  font-size: var(--global--font-size-base);
  font-weight: normal;
  color: var(--global--color-primary);
  text-align: left;
  background-color: var(--global--color-background);
}

Bu kod üzerinde değişiklikler yapacağız. Bizim değiştirmek istediğimiz kısım arkaplan rengi olacaktır. Peki, bunu nasıl yapacağız?

Temalar » Tema dosya düzenleyicisi seçeneğine tıklayın. Açılan sayfa sizin aktif ettiğiniz alt temaya ait style.css dosyasıdır. Bu dosyada sadece eklenti ile ya da manuel olarak oluşturduğunuz tema bilgileri yer almaktadır.

Burada yapacağımız işlem arkaplan rengini siyah yapmak olacak bunun için değiştirmemiz ve alt temamızın style.css dosyasına eklememiz gereken kod aşağıdadır.

body {
  background-color: #212121;
}

Bu şekilde eklediğinizde herhangi bir değişiklik olmadı değil mi? İşte iş burada teknik bilgiye giriyor. Ana temamızın CSS koduna bir göz atın, değiştirmek istediğimiz kısımda CSS Variables dediğimiz bir değişken kodu mevcut.

var(--gloabl--color-background); bu kod bizim değiştirmek istediğimiz alana arkaplan rengini veren bir CSS değişkenidir. Bunu değiştirebilmek için alt temamımıza da benzer bir değişken atayıp fakat bizim istediğimiz değeri yazdırmasını isteyeceğiz. Bunun için eklemeniz gereken kod:

/* CSS Değişkenleri */
:root {
   --global--color-background: #212121 !important;
}

Bu kodu alt temamızın stlye.css stil dosyanının en üst kısmına ekliyoruz. #21221 değeri renk kodumuzdur. İsterseniz o kısıma sade bir şekilde İngilizce olarak black diyebilirsiniz ya da red, blue vb.

Not: #212121 kodunun sonunda yer alan !important parametresini eklemeniz gerekiyor. Çünkü, alt temamız var olan bir CSS kodunda değişiklik yapıyor ve var olan kodu silmediği için internet tarayıcısına öncelik vermesi gereken kodu belirtiyor. Tarayıcı alt temadan gelen komutu dinlemesini söylüyoruz. Bu değiştirmek istediğiniz tüm CSS kodları için geçerlidir. Ancak, yeni bir css kodu ekliyorsanız bu parametreyi eklemeniz gerekmiyor.

İlk kodumuzun son hali şu şekilde olacak:

/* CSS Değişkenleri*/
:root {
	--global--color-background: #212121 !important;
}
body {
  background-color: var(--global--color-background);
}

Bu kodu eklediğinizde ve sayfayı yenilediğinizde arkpalanın siyah olacağını göreceksiniz. Gelin biraz daha özelleştirmeler, değiştirmeler yapalım.

Yazımız vardı “Merhaba Dünya” adında. Bu yazımız artık göremiyoruz arkaplanı siyah yapınca. Gelin yazı başlığımızın rengini beyaz yapalım. Bunun için bizim ana temamızdan gelen CSS kodunu bulmamız gerekiyor. Bunu bulabilmek için kullandığınız tarayıcının ögeyi denetle özelliğini kullanmanız gerekiyor.

Ana temamızdan gelen CSS kodu şu şekilde:

.entry-title {
  color: var(--entry-header--color);
  font-size: var(--entry-header--font-size);
  letter-spacing: var(--heading--letter-spacing-h2);
  line-height: var(--heading--line-height-h2);
  overflow-wrap: break-word;
}

Farkettiğiniz gibi yine CSS değişkeni kullanılmış. Artık günümüzde yapılan tüm WordPress Temalarında CSS değişkenleri kullanılmakta. İlk kodumuza bir tane daha CSS değişkeni ekliyoruz. Burada bizim dikkate alacağımız kod color kodu, bu bizim yazımızın rengini belirten CSS parametresidir.

Artık CSS kodlarımız şu şekilde oldu:

/* CSS Değişkenleri*/
:root {
	--global--color-background: #212121 !important;
	--entry-header--color: #fff !important;
}
body {
  background-color: var(--global--color-background);
}
.entry-title {
	color: var(--entry-header--color);
}

Bu şekilde kayıt yaptığınızda yazı başlığının renginin beyaz olduğunu göreceksiniz. Buna benzer birçok işlemleri yaparak ana temamızın görüntüsünü alt tema kullanarak yapabiliriz. Ana temamızda herhangi bir kod değişikliliği yapmadığımız için olası bir hata ve bozulma durumunda alt temadan kodu silmemiz yeterli olacaktır.

Alt tema oluşturmak ve değişiklikler yapma konusunda detaylı kılavuz makelelerimizi yayınlamaya devam edeceğiz. Bu süre zarfında detaylı bilgi almak ve pratik yapmak için WordPress Child Themes dokümanını inceleyebilirsiniz.

Total
9
Paylaşım
8 Paylaş
0 Tweet
1 Pinle
0 Paylaş
0 Paylaş
0 Paylaş
0 Paylaş
⚠ Yorum bırakmayı tercih ettiğiniz için teşekkür ederiz. Lütfen tüm yorumların yorum politikamıza göre denetlendiğini ve e-posta adresinizin YAYINLANMAYACAĞINI unutmayın. Lütfen isim alanında anahtar sözcükler KULLANMAYIN. Kişisel ve anlamlı bir konuşma yapalım, içeriğimize katkı sunalım.
Bir cevap yazın

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

Önceki Yazı

WordPress Pingback Nedir?

Sonraki Yazı

WordPress’te Kategori Açıklamaları Nasıl Gösterilir?

Benzer Yazılar

WordPress’te Kategori Açıklamaları Nasıl Gösterilir?

Wordpress sitenizde kategori açıklamalarını görüntülemek istiyor musunuz?Kategoriler kullanıcılarınızın içeriklerinizi rahatlıkla bulabilmeleri sağlar. Bu yüzden kategorilerinizin bir açıklama metinine sahip olması kullanıcı deneyimi açısında oldukça önemlidir.Bu yazımızda, WordPress'te kategorilerinize nasıl kolayca açıklama ekleyeceğinizi göstereceğiz.
Devamını Oku