Alt temalar, etrafta çokça kullanılan ve yeni başlayanların kafasını karıştıran WordPress terimlerinden biridir. Hatta bunları duymuş ve ne kadar karmaşık göründükleri için oluşturmayı atlamaya karar vermiş olabilirsiniz.
Bunu anlıyoruz. Ancak deneyimlerimize göre, alt temalar ileride sizi bir sürü baş ağrısından kurtarabilir. Değerli özelleştirmelerinizi korur, sitenizi bozmadan denemeler yapmanızı sağlar ve temanızı güncellemeyi çocuk oyuncağı haline getirir.
İlgileniyorsanız, bu yeni başlayan dostu kılavuzda bir alt temanın nasıl çalıştığını, nasıl özelleştirileceğini ve üzerinde nasıl değişiklik yapılacağını açıkladık.
Alt Tema Nasıl Çalışır ve Neden İhtiyacınız Var?
Bir alt tema, başka bir WordPress temasının tüm özelliklerini, işlevlerini ve stillerini devralır. Bir alt tema oluşturduğunuzda, orijinal tema ana tema olarak adlandırılır.
Kalıtım, temanın ana stilini tanımlayan üst temanın style.css dosyasını içerir. Alt tema, kendi dosyalarını ekleyerek veya mevcut olanları değiştirerek devralınan özellikleri geçersiz kılabilir veya genişletebilir.
WordPress tem anızı bir alt tema yüklemeden özelleştirmek mümkün olsa da, yine de bir temaya ihtiyaç duymanızın birkaç nedeni vardır:
- Alt temalar, tema güncellemeleri sırasında özelleştirmelerinizi koruyarak üzerlerine yazılmasını önler. Ana temayı doğrudan değiştirirseniz, güncelleme yaptığınızda bu ince ayarlar kaybolabilir.
- Alt temalar, bir hazırlama ortamına benzer şekilde, sitenin orijinal temasını bozmadan yeni tasarımları veya özellikleri güvenle denemenizi sağlar.
- Kod yazmayı biliyorsanız, alt temalar geliştirme sürecini daha verimli hale getirebilir. Bir alt temanın dosyaları ana temanınkilerden çok daha basittir. Ana temanın yalnızca değiştirmek veya genişletmek istediğiniz kısımlarını değiştirmeye odaklanabilirsiniz.
WordPress Alt Teması Oluşturmadan Önce Yapılması Gerekenler
Birçok WordPress kullanıcısının teknik konulara dalmak için heyecanlandığını, ancak hatalar ortaya çıktığında cesaretlerinin kırıldığını gördük. Bunu anlıyoruz. Bu yüzden bir alt tema oluşturmadan önce neye bulaştığınızı bilmek önemlidir.
İşte bu adım adım kılavuza devam etmeden önce yapmanızı önerdiğimiz bazı şeyler:
- Kod ile çalışacağınızın farkında olun. Yapmanız gereken değişiklikleri anlamak için en azından temel düzeyde HTML, CSS, PHP ve isteğe bağlı olarak JavaScript bilgisine sahip olmanız gerekecektir. WordPress tema el kitabında bu konuda daha fazla bilgi edinebilirsiniz.
- İstediğiniz web sitesi tasarımına ve özelliklerine sahip bir ana tema seçin. Mümkünse, yalnızca birkaç değişiklik yapmanız gereken bir tema bulun. Gerekirse WordPress temalarını değiştirmeden önce yapılması gerekenler kontrol listemizi takip edebilirsiniz.
- Tema geliştirme için yerel bir site veya hazırlık sitesi kullanın. Canlı sitenizde istemediğiniz hatalar oluşturmak istemezsiniz.
- Önceweb sitenizi yedekleyin. Eğer bu ilk seferinizse Duplicator gibi bir yedekleme eklentisi kullanmanızı öneririz.
Mevcut temanızdan bir alt tema oluşturmanın birkaç yolu vardır. Biri manuel kodla yapılırken, diğerleri çok daha acemi dostu olan bir eklenti gerektirir.
Teknik deneyiminiz yoksa ilk yöntem göz korkutucu görünebilir. Bununla birlikte, eklenti yöntemlerinden birini seçseniz bile, sürece ve ilgili dosyalara aşina olmak için manuel yöntemi okumanızı öneririz.
Profesyonel İpucu: Temanızı alt tema oluşturmadan özelleştirmek mi istiyorsunuz? Web sitenizi bozmadan özel kod parçacıklarıyla yeni özellikleri güvenle etkinleştirmek için WPCode ‘u kullanın.
Tüm bunları aklımızda tutarak, WordPress’te bir alt temanın nasıl oluşturulacağına geçelim. Aşağıdaki bağlantıları kullanarak tercih ettiğiniz yönteme geçebilirsiniz:
- Method 1: Creating a Child WordPress Theme Manually
- Method 2: Creating a Child Classic Theme With a Plugin
- Method 3: Creating a Child Block Theme With a Plugin
- Bonus Tip: Find Out If Your Theme Has a Child Theme Generator
- How to Customize Your Classic Child Theme
- How to Customize Your Block Child Theme
- How to Edit a Child Theme's Template Files
- How to Add New Functionality to Your Child Theme
- How to Troubleshoot Your WordPress Child Theme
Yöntem 1: Manuel Olarak Alt WordPress Teması Oluşturma
Öncelikle WordPress kurulum klasörünüzdeki /wp-content/themes/
dosyasını açmanız gerekir.
Bunu WordPress hosting ‘inizin dosya yöneticisini veya bir FTP istemcisini kullanarak yapabilirsiniz. Biz ilk seçeneğin çok daha kolay olduğunu düşünüyoruz, bu yüzden bunu kullanacağız.
Bluehost müşterisiyseniz, barındırma hesabı kontrol panelinize giriş yapabilir ve ‘Web Siteleri’ sekmesine gidebilirsiniz. Bundan sonra, ‘Ayarlar’a tıklayın.
Genel Bakış sekmesinde, ‘Hızlı Bağlantılar’ bölümüne ilerleyin.
Ardından, ‘Dosya Yöneticisi’ni seçin.
Bu aşamada, web sitenizin public_html klasörüne gitmeniz ve /wp-content/themes/
yolunu açmanız gerekir.
Burada, alt temanız için yeni bir klasör oluşturmak için sol üst köşedeki ‘+ Klasör’ düğmesine tıklamanız yeterlidir.
Klasöre istediğiniz ismi verebilirsiniz.
Bu eğitimde, ana temamız olarak Twenty Twenty-One kullanacağımız için sadece twentytwentyone-child klasör adını kullanacağız. İşiniz bittiğinde, ‘Yeni Klasör Oluştur’a tıklayın.
Ardından, yeni oluşturduğunuz klasörü açmalı ve alt temanızın ilk dosyasını oluşturmak için ‘+ Dosya’ya tıklamalısınız.
Bir FTP istemcisi kullanıyorsanız, Notepad gibi bir metin düzenleyici kullanabilir ve dosyayı daha sonra yükleyebilirsiniz.
Devam edin ve bu dosyaya ‘style.css’ adını verin, çünkü bu dosya çocuğunuzun ana stil sayfasıdır ve çocuk teması hakkında bilgi içerecektir.
Ardından, ‘Yeni Dosya Oluştur’a tıklayın.
Şimdi, style.css dosyasına sağ tıklayın.
Bundan sonra, aşağıdaki ekran görüntüsünde olduğu gibi yeni bir sekme açmak için ‘Düzenle’ye tıklayın.
Bu yeni sekmede, aşağıdaki metni yapıştırabilir ve ihtiyaçlarınıza göre ayarlayabilirsiniz:
/*
Theme Name: Twenty Twenty-One Child
Theme URI: https://wordpress.org/themes/twentytwentyone/
Description: Twenty Twenty-One child theme
Author: WordPress.org
Author URI: https://wordpress.org/
Template: twentytwentyone
Version: 1.0.0
Text Domain: twentytwentyonechild
*/
İşiniz bittiğinde, ‘Değişiklikleri Kaydet’e tıklayın.
Yapmanız gereken bir sonraki şey ikinci bir dosya oluşturmak ve ona functions.php adını vermektir. Bu dosya, stil sayfalarını ana temanın dosyalarından içe aktaracak veya sıraya alacaktır.
Belgeyi oluşturduktan sonra, aşağıdaki wp_enqueue kodunu ekleyin:
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
$parenthandle = 'twenty-twenty-one-style'; // This is 'twenty-twenty-one-style' for the Twenty Twenty-one theme.
$theme = wp_get_theme();
wp_enqueue_style( $parenthandle, get_template_directory_uri() . '/style.css',
array(), // if the parent theme code has a dependency, copy it to here
$theme->parent()->get('Version')
);
wp_enqueue_style( 'custom-style', get_stylesheet_uri(),
array( $parenthandle ),
$theme->get('Version') // this only works if you have Version in the style header
);
}
İşiniz bittiğinde, dosyayı önceki adımda olduğu gibi kaydedin.
Not: Bu yöntemde, alt temanızın stil sayfalarının düzgün şekilde yüklendiğinden emin olmak için resmi Alt Temalar ve Varlıkları Dahil Etme belgelerini okumanızı öneririz.
Artık çok temel bir alt tema oluşturdunuz. WordPress yönetici panelinizde Görünüm ” Temalar bölümüne gittiğinizde Twenty Twenty-One Çocuk seçeneğini görmelisiniz.
Sitenizde alt temayı kullanmaya başlamak için ‘Etkinleştir’ düğmesine tıklayın.
Yöntem 2: Bir Eklenti ile Klasik Çocuk Teması Oluşturma
Sıradaki yöntemde Child Theme Configurator eklentisi kullanılmaktadır. Bu kullanımı kolay WordPress eklentisi, kod kullanmadan hızlı bir şekilde WordPress alt temaları oluşturmanızı ve özelleştirmenizi sağlar, ancak yalnızca klasik (blok olmayan) bir tema ile iyi çalışır.
Yapmanız gereken ilk şey WordPress eklentisini yüklemek ve etkinleştirmektir. Etkinleştirdikten sonra, WordPress panonuzda Araçlar ” Alt Temalar bölümüne gitmeniz gerekir.
Ebeveyn/Çocuk sekmesinde sizden bir eylem seçmeniz istenecektir. Başlamak için ‘Yeni bir Alt Tema Oluştur’ seçeneğini seçin.
Ardından, açılır menüden bir üst tema seçin. Biz Hestia temasını seçeceğiz.
Bundan sonra, temanın ana tema olarak kullanıma uygun olduğundan emin olmak için ‘Analiz Et’ düğmesine tıklamanız yeterlidir.
Ardından, alt temanın kaydedileceği klasörü adlandırmanız istenecektir. İstediğiniz herhangi bir klasör adını kullanabilirsiniz.
Bunun altında, yeni stillerin nereye kaydedileceğini seçmeniz gerekir: birincil stil sayfasına veya ayrı bir stil sayfasına.
Birincil stil sayfası, alt temanızla birlikte gelen varsayılan stil sayfasıdır. Bu dosyaya yeni özel stiller kaydettiğinizde, doğrudan alt temanızın ana stillerini değiştirmiş olursunuz. Her değişiklik orijinal temanın stilinin üzerine yazılır.
Ayrı seçeneği, yeni bir özel stili ayrı bir stil sayfası dosyasına kaydetmenizi sağlar. Bu, orijinal temanın stilini korumak ve üzerine yazmamak istiyorsanız kullanışlıdır.
Gösterim amacıyla ilk seçeneği seçeceğiz. Ancak alt tema özelleştirmelerinizle daha yaratıcı hale geldikçe, bu işlemi her zaman tekrarlayabilir ve ikinci seçeneği seçebilirsiniz.
Aşağı doğru ilerlerken, ana temanın stil sayfasına nasıl erişileceğini seçmeniz gerekir.
Eklentinin uygun eylemleri otomatik olarak belirlemesine izin vereceği için varsayılan ‘WordPress stil kuyruğunu kullan’ seçeneğini kullanacağız.
Adım 7’ye geldiğinizde, ‘Alt Tema Özelliklerini Düzenlemek için Tıklayın’ etiketli düğmeye tıklamanız gerekecektir.
Daha sonra alt temanızın ayrıntılarını doldurabilirsiniz.
Manuel olarak bir alt tema oluşturduğunuzda, ana temanın menülerini ve widget’larını kaybedersiniz. Alt Tema Yapılandırıcısı bunları ana temadan alt temaya kopyalayabilir. Bunu yapmak istiyorsanız 8. adımdaki kutuyu işaretleyin.
Son olarak, yeni alt temanızı oluşturmak için ‘Yeni Alt Tema Oluştur’ düğmesine tıklayın.
Eklenti, alt temanız için bir klasör oluşturacak ve temayı daha sonra özelleştirmek için kullanacağınız style.css ve functions.php dosyalarını ekleyecektir.
Temayı etkinleştirmeden önce, önizleme yapmak ve iyi göründüğünden ve sitenizi bozmadığından emin olmak için ekranın üst kısmındaki bağlantıya tıklamalısınız.
Her şey çalışıyor gibi görünüyorsa, ‘Etkinleştir ve Yayınla’ düğmesine tıklayın.
Şimdi, alt temanız yayına girecektir.
Bu aşamada, alt tema tam olarak ana tema gibi görünecek ve davranacaktır.
Yöntem 3: Bir Eklenti ile Alt Blok Teması Oluşturma
Eğer bir blok tema kullanıyorsanız, WordPress Create Block Theme eklentisi ile bir alt tema oluşturmanın kolay bir yolunu sunar.
İlk olarak, WordPress eklentisini yüklemeniz ve etkinleştirmeniz gerekecektir. Bundan sonra, Görünüm ” Blok Tema Oluştur‘a gidin.
Burada, ‘Create a Child of [current theme name]’ seçeneğini seçmeniz yeterlidir.
Ardından, alt temanızın bilgilerini doldurun. Bu örnekte Twenty Twenty-Four kullandığımız için temaya Twenty Twenty-Four Child adını vereceğiz.
Ayrıca alt tema için bir açıklama ve yazar da verdik. Tamamlandığında, ‘Alt Tema Oluştur’ düğmesine tıklayın.
Eklenti şimdi WordPress tema zip dosyasını oluşturacak ve yönetici alanınıza yükleyecektir.
Bu işlem tamamlandığında, web siteniz yeni oluşturulan bu alt temayı otomatik olarak etkinleştirecektir. Bunu Görünüm ” Temalar bölümüne giderek onaylayabilirsiniz.
Bonus İpucu: Temanızın Alt Tema Oluşturucusu Olup Olmadığını Öğrenin
Şanslıysanız, WordPress temanız zaten bir alt tema oluşturmak için mevcut bir özelliğe sahip olabilir.
Örneğin, Astra kullanıyorsanız, Astra Çocuk Teması Oluşturucu web sitesine gidebilirsiniz. Bundan sonra, sadece alt tema adınızı girin ve ‘Oluştur’ düğmesine tıklayın.
Tarayıcınız daha sonra alt temanızı otomatik olarak bilgisayarınıza indirecek ve bunu WordPress’e kendiniz yükleyebileceksiniz.
Ayrıca alt tema oluşturucusu olan başka popüler WordPress tem aları da bulduk:
Klasik Alt Temanızı Özelleştirme
Not: Bu bölüm klasik WordPress teması kullanıcıları içindir. Eğer blok tema kullanıyorsanız, bir sonraki bölüme geçebilirsiniz.
Teknik olarak, Tema Özelleştirici’yi kullanarak alt temanızı kod olmadan özelleştirebilirsiniz. Burada yaptığınız değişiklikler ana temanızı etkilemeyecektir. Kodlama konusunda henüz rahat değilseniz, Özelleştirici’yi kullanmaktan çekinmeyin.
Bununla birlikte, alt temayı kodla özelleştirmenizi de öneririz.
WordPress tema geliştirme hakkında daha fazla bilgi edinmenin yanı sıra, kod özelleştirme, değişikliklerin alt temanın dosyalarında belgelenmesine olanak tanıyarak bunların izlenmesini kolaylaştırır.
Şimdi, bir alt temayı özelleştirmenin en temel yolu style.css dosyasına özel CSS eklemektir. Bunu yapmak için hangi kodu özelleştirmeniz gerektiğini bilmeniz gerekir.
Ana temadaki mevcut kodu kopyalayıp değiştirerek süreci basitleştirebilirsiniz. Bu kodu Chrome veya Firefox Inspect aracını kullanarak ya da doğrudan ana temanın CSS dosyasından kopyalayarak bulabilirsiniz.
Yöntem 1: Chrome veya Firefox Inspector’dan Kod Kopyalama
Değiştirmeniz gereken CSS kodunu keşfetmenin en kolay yolu, Google Chrome ve Firefox ile birlikte gelen denetçi araçlarını kullanmaktır. Bu araçlar, bir web sayfasının herhangi bir öğesinin arkasındaki HTML ve CSS’ye bakmanıza olanak tanır.
Denetçi aracı hakkında daha fazla bilgiyi denetleme öğesinin temelleri: WordPress’i kendin yap kullanıcıları için özelleştirme başlıklı kılavuzumuzda bulabilirsiniz.
Web sayfanıza sağ tıkladığınızda ve inspect öğesini kullandığınızda, sayfanın HTML ve CSS’sini göreceksiniz.
Farenizi farklı HTML satırlarının üzerine getirdiğinizde, denetçi bunları üst pencerede vurgulayacaktır. Ayrıca, vurgulanan öğeyle ilgili CSS kurallarını da gösterecektir:
Nasıl görüneceğini görmek için CSS’yi orada düzenlemeyi deneyebilirsiniz. Örneğin, temanın gövdesinin arka plan rengini #fdf8ef olarak değiştirmeyi deneyelim. body {
yazan kod satırını ve içinde color:
yazan kodu bulun.
Renk:
öğesinin yanındaki renk seçici simgesine tıklayın ve HEX kodunu aşağıdaki gibi uygun alana yapıştırın:
Artık CSS kullanarak arka plan rengini nasıl değiştireceğinizi biliyorsunuz. Değişiklikleri kalıcı hale getirmek için, style.css dosyanızı alt tema dizininde açabilirsiniz ( dosya yöneticisini veya FTP‘yi kullanarak).
Ardından, aşağıdaki kodu alt tema bilgilerinin altına aşağıdaki gibi yapıştırın:
/*
Theme Name: Twenty Twenty-One Child
Theme URI: https://wordpress.org/themes/twentytwentyone/
Description: Twenty Twenty-One child theme
Author: WordPress.org
Author URI: https://wordpress.org/
Template: twentytwentyone
Version: 1.0.0
Text Domain: twentytwentyonechild
*/
body {
background-color: #fdf8ef
}
WordPress yöneticisine gidip Görünüm ” Tema Dosyası Düzenleyicisi‘ni açarsanız aşağıdaki gibi görünecektir:
Yeni başlayan biriyseniz ve başka değişiklikler yapmak istiyorsanız, her kodun tam olarak hangi öğeye atıfta bulunduğunu bilmeniz için HTML ve CSS’ye aşina olmanızı öneririz. İnternette başvurabileceğiniz birçok HTML ve CSS kopya sayfası bulunmaktadır.
İşte alt tema için oluşturduğumuz stil sayfasının tamamı. Denemekten ve değiştirmekten çekinmeyin:
/*
Theme Name: Twenty Twenty-One Child
Theme URI: https://wordpress.org/themes/twentytwentyone/
Description: Twenty Twenty-One child theme
Author: WordPress.org
Author URI: https://wordpress.org/
Template: twentytwentyone
Version: 1.0.0
Text Domain: twentytwentyonechild
*/
.site-title {
color: #7d7b77;
}
.site-description {
color: #aba8a2;
}
body {
background-color: #fdf8ef;
color: #7d7b77;
}
.entry-footer {
color: #aba8a2;
}
.entry-title {
color: #aba8a2;
font-weight: bold;
}
.widget-area {
color: #7d7b77;
}
Yöntem 2: Ana Temanın style.css Dosyasından Kod Kopyalama
Belki de alt temanızda özelleştirmek istediğiniz pek çok şey vardır. Bu durumda, bazı kodları doğrudan ana temanın style.css dosyasından kopyalayıp alt temanızın CSS dosyasına yapıştırmak ve ardından değiştirmek daha hızlı olabilir.
İşin zor kısmı, bir temanın stil sayfası dosyasının yeni başlayanlar için gerçekten uzun ve bunaltıcı görünebilmesidir. Ancak, temelleri anladıktan sonra aslında o kadar da zor değildir.
Twenty Twenty-One ana temasının stil sayfasından gerçek bir örnek kullanalım. WordPress kurulum klasörünüzde /wp-content/themes/twentytwentyone
adresine gitmeniz ve ardından style.css dosyasını dosya yöneticinizde, FTP’de veya Tema Dosyası Düzenleyicisinde açmanız gerekir.
Aşağıdaki kod satırlarını göreceksiniz:
:root {
/* Colors */
--global--color-black: #000;
--global--color-dark-gray: #28303d;
--global--color-gray: #39414d;
--global--color-light-gray: #f0f0f0;
--global--color-green: #d1e4dd;
--global--color-blue: #d1dfe4;
--global--color-purple: #d1d1e4;
--global--color-red: #e4d1d1;
--global--color-orange: #e4dad1;
--global--color-yellow: #eeeadd;
--global--color-white: #fff;
--global--color-white-50: rgba(255, 255, 255, 0.5);
--global--color-white-90: rgba(255, 255, 255, 0.9);
--global--color-primary: var(--global--color-dark-gray); /* Body text color, site title, footer text color. */
--global--color-secondary: var(--global--color-gray); /* Headings */
--global--color-primary-hover: var(--global--color-primary);
--global--color-background: var(--global--color-green); /* Mint, default body background */
--global--color-border: var(--global--color-primary); /* Used for borders (separators) */
}
3 ila 15. satırlar, tüm temanın kendi özel HEX kodlarında kullanacağı renk türlerini (sarı, yeşil, mor gibi) kontrol eder. Ve sonra, ‘global-color-primary’ veya ‘global-color-secondary’ gibi satırlar için, bunlar o temanın birincil ve ikincil renkleri anlamına gelir.
Bu kod satırlarını alt temanızın stil sayfasına kopyalayabilir ve ardından mükemmel renk düzeninizi oluşturmak için HEX kodlarını değiştirebilirsiniz.
Ana temanın stil sayfasında aşağı doğru ilerlediğinizde, burada olduğu gibi diğer değişkenlerin de bu renk değişkenlerine sahip olabileceğini fark edeceksiniz:
/* Buttons */
--button--color-text: var(--global--color-background);
Bu temel olarak, tüm düğme metinlerinin --global--color-background:
içinde bildirilen aynı rengi kullanacağı anlamına gelir; bu renk nane yeşilidir(--global--color-green: #d1e4dd
). Eğer --global--color-green:
içindeki HEX değerini değiştirirseniz, düğme metni de farklı görünecektir.
Not: Twenty Twenty-One alt temasını kullanıyorsanız ve herhangi bir değişiklik görmüyorsanız, style.css dosyasını her güncellediğinizde tema dosyası bilgilerinin ‘Sürüm’ kısmını güncellemeniz gerekebilir (örneğin, 1.0’dan 2.0’a).
Alt tema özelleştirmelerinizi denemek için bu eğitimleri de takip edebilirsiniz:
- WordPress’te Metin Rengi Nasıl Değiştirilir
- WordPress Logo Boyutunuzu Değiştirme (Tüm Temalarla Çalışır)
- WordPress Temalarında Blockquotes Stili Nasıl Özelleştirilir
- WordPress Body Class 101: Tema Tasarımcıları için İpuçları ve Püf Noktaları
- Herhangi Bir WordPress Temasına Paralaks Efekti Nasıl Eklenir?
Block Alt Temanızı Özelleştirme
Bir alt blok teması kullanıyorsanız, özelleştirmelerinizin çoğu style .css değil theme.json dosyanızda yapılacaktır.
Ancak testlerimiz sırasında sürecin karmaşık olduğunu gördük. Klasik alt temaların aksine, WordPress tema geliştirmede yeniyseniz doldurmanız gereken daha büyük bir bilgi boşluğu var (özellikle JSON ve CSS’nin orada nasıl işlendiği hakkında).
Bununla birlikte, Create Block Theme eklentisini kullanarak çok daha kolay bir alternatif bulduk. Bu araç WordPress Tam Site Editöründe yapılan tüm değişiklikleri alt tema.json dosyanıza kaydedebilir. Böylece, herhangi bir koda dokunmanız gerekmeyecek çünkü eklenti bunu sizin için halledecek.
Size bir örnek gösterelim. İlk olarak, Görünüm ” Düzenleyici‘ye giderek WordPress Tam Site Düzenleyicisi ‘ni açın.
Aralarından seçim yapabileceğiniz birkaç menü göreceksiniz.
Burada, sadece ‘Stiller’i seçin.
Bir sonraki sayfada, aralarından seçim yapabileceğiniz çeşitli yerleşik stil kombinasyonları göreceksiniz.
Bizim amacımız için, tüm bunları atlayabilir ve sadece kalem simgesine tıklayabilirsiniz.
Şimdi, alt temanızın yazı tipleri gibi bazı kısımlarını değiştirmeyi deneyelim.
Bu örnek için, devam edin ve sağ kenar çubuğundaki ‘Tipografi’ye tıklayın.
Ardından, metin, bağlantılar, başlıklar, alt yazılar ve düğmeler için temanın genel yazı tiplerini değiştirmek üzere bazı seçenekler göreceksiniz.
Göstermek için ‘Başlıklar’a tıklayalım.
Yazı Tipi açılır menüsünde, orijinal seçimi mevcut olan herhangi bir yazı tipiyle değiştirin.
Gerekirse görünümü, satır yüksekliğini, harf aralığını ve harf kaplamasını değiştirmekten çekinmeyin.
İşiniz bittiğinde, sadece ‘Kaydet’e tıklayın. Bundan sonra, ‘Kaydet’in yanındaki Blok Teması Oluştur düğmesine (İngiliz anahtarı simgesi) tıklayabilirsiniz.
Ardından, ‘Değişiklikleri Temaya Kaydet’e tıklayın.
Ardından, devam edin ve alt temaya hangi değişikliklerin kaydedileceğini seçin.
Örnekler arasında yazı tipleri, özel stiller, şablon değişiklikleri ve daha fazlası yer alır.
İşiniz bittiğinde, kenar çubuğunu sonuna kadar kaydırın.
Ardından, ‘Değişiklikleri Kaydet’e tıklayın.
Şimdi, koda yansıyan değişiklikleri görebilmeniz için theme.json dosyanızı görüntüleyelim.
Bunu yapmak için Blok Teması Oluştur düğmesine tekrar tıklayın ve ‘Tema.json’u görüntüle’yi seçin.
Üzerine tıkladıktan sonra, dosyanın bazı yeni kod eklemeleri içerdiğini göreceksiniz.
Bizim durumumuzda, dosya başlık etiketlerinin yarı kalın görünümlü, 1,2 satır yüksekliğinde, 1 piksel satır aralığında ve küçük harflerle Inter yazı tipini kullanacağını belirten kodu içerir.
Bu nedenle, alt blok temanızı her düzenlediğinizde, İngiliz anahtarı simgesine tıkladığınızdan ve değişikliklerinizi kaydettiğinizden emin olun, böylece iyi belgelenmiş olurlar.
Alt Temanın Şablon Dosyaları Nasıl Düzenlenir?
Çoğu WordPress teması, tema içindeki belirli bir alanın tasarımını ve düzenini kontrol eden tema dosyaları olan şablonlara sahiptir. Örneğin, altbilgi bölümü genellikle footer.php dosyası tarafından ele alınır ve üstbilgi header.php dosyası tarafından ele alınır.
Her WordPress temasının da farklı bir düzeni vardır. Örneğin, Twenty Twenty-One temasında bir üstbilgi, içerik döngüsü, altbilgi widget alanı ve altbilgi bulunur.
Bir şablonu değiştirmek istiyorsanız, dosyayı ana tema klasöründe bulmanız ve alt tema klasörüne kopyalamanız gerekir. Bundan sonra, dosyayı açmalı ve istediğiniz değişiklikleri yapmalısınız.
Örneğin, Bluehost kullanıyorsanız ve ana temanız Twenty Twenty-One ise, dosya yöneticinizde /wp-content/themes/twentytwentyone
adresine gidebilirsiniz. Ardından footer.php gibi bir şablon dosyasına sağ tıklayın ve ‘Kopyala’yı seçin.
Bundan sonra, alt temanızın dosya yolunu girin.
İşiniz bittiğinde, ‘Dosyaları Kopyala’ya tıklamanız yeterlidir.
Daha sonra dosya yoluna yönlendirileceksiniz.
Footer.php dosyasını düzenlemek için üzerine sağ tıklayın ve ‘Düzenle’yi seçin.
Örnek olarak, ‘Proudly powered by WordPress’ bağlantısını altbilgi alanından kaldıracağız ve oraya bir telif hakkı bildirimi ekleyeceğiz.
Bunu yapmak için, <div class="powered-by">
etiketleri arasındaki her şeyi silmelisiniz:
<div class="powered-by">
<?php
printf(
/* translators: %s: WordPress. */
esc_html__( 'Proudly powered by %s.', 'twentytwentyone' ),
'<a href="' . esc_url( __( 'https://wordpress.org/', 'twentytwentyone' ) ) . '">WordPress</a>'
);
?>
</div><!-- .powered-by -->
Ardından, aşağıdaki örnekte bu etiketlerin altında bulduğunuz kodu yapıştırmanız gerekir:
<div class="powered-by">
<p>© Copyright <?php echo date("Y"); ?>. All rights reserved.</p>
</div><!-- .powered-by -->
İşte şimdi metin düzenleyicide sahip olmanız gereken şey:
Devam edin ve değişiklikleri resmi hale getirmek için dosyayı kaydedin.
Bundan sonra, yeni telif hakkı bildirimini görmek için web sitenizi ziyaret edin.
Alt Temanıza Yeni İşlevsellik Ekleme
Bir temadaki functions.php dosyası, bir WordPress sitesine özellikler eklemek veya varsayılan özellikleri değiştirmek için PHP kodunu kullanır. WordPress siteniz için mevcut temanızla otomatik olarak etkinleştirilen bir eklenti gibi davranır.
Kod parçacıklarını kopyalayıp functions.php’ye yapıştırmanızı isteyen birçok WordPress eğitimi bulacaksınız. Ancak değişikliklerinizi ana temaya eklerseniz, temaya yeni bir güncelleme yüklediğinizde bunların üzerine yazılacaktır.
Bu nedenle özel kod parçacıkları eklerken bir alt tema kullanmanızı öneririz. Bu eğitimde, temamıza yeni bir widget alanı ekleyeceğiz.
Bu kod parçacığını alt temamızın functions.php dosyasına ekleyerek bunu yapabiliriz. İşlemi daha da güvenli hale getirmek için WPCode eklentisini kullanmanızı öneririz, böylece functions.php dosyasını doğrudan düzenlemeyerek hata riskini azaltırsınız.
Daha fazla bilgi için özel kod parçacıklarının nasıl ekleneceğine ilişkin kılavuzumuzu okuyabilirsiniz.
İşte functions.php dosyanıza eklemeniz gereken kod:
// Register Sidebars
function custom_sidebars() {
$args = array(
'id' => 'custom_sidebar',
'name' => __( 'Custom Widget Area', 'text_domain' ),
'description' => __( 'A custom widget area', 'text_domain' ),
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
);
register_sidebar( $args );
}
add_action( 'widgets_init', 'custom_sidebars' );
Dosyayı kaydettikten sonra, WordPress kontrol panelinizin Görünüm ” Widget ‘lar sayfasını ziyaret edebilirsiniz.
Burada, widget ekleyebileceğiniz yeni özel widget alanınızı göreceksiniz.
Özel kod parçacıklarını kullanarak temanıza ekleyebileceğiniz pek çok başka özellik vardır. WordPress functions.php dosyası için bu son derece kullanışlı püf noktalarına ve yeni başlayanlar için faydalı WordPress kod parçacıklarına göz atın.
WordPress Alt Temanızdaki Sorunlar Nasıl Giderilir?
Daha önce hiç alt tema oluşturmadıysanız, bazı hatalar yapma olasılığınız yüksektir ve bu normaldir. Bu nedenle bir yedekleme eklentisi kullanmanızı, yerel bir site veya hazırlama ortamı oluşturmanızı ve demo siteniz için kukla içerik kullanmanızı öneririz.
Tüm bunlar söylenirken, çok çabuk pes etmeyin. WordPress topluluğu çok beceriklidir, bu nedenle yaşadığınız sorun ne olursa olsun, muhtemelen bir çözümü zaten vardır.
Başlangıç olarak, bir çözüm bulmak için en yaygın WordPress hatalarımıza göz atabilirsiniz.
Muhtemelen göreceğiniz en yaygın hatalar, kodda gözden kaçırdığınız bir şeyden kaynaklanan sözdizimi hatalarıdır. WordPress’te söz dizimi hatasının nasıl bulunacağı ve düzeltileceğine ilişkin hızlı kılavuzumuzda bu sorunları çözme konusunda yardım bulabilirsiniz.
Ayrıca, bir şeyler çok yanlış giderse her zaman yeniden başlayabilirsiniz. Örneğin, ana temanızın gerektirdiği bir şeyi yanlışlıkla sildiyseniz, dosyayı alt temanızdan silebilir ve baştan başlayabilirsiniz.
Umarız bu makale bir WordPress alt temasının nasıl oluşturulacağını öğrenmenize yardımcı olmuştur. WordPress temanızı en son standartlara göre nasıl test edeceğinize dair nihai kılavuzumuza ve ücretsiz ve premium WordPress temaları hakkındaki karşılaştırma yazımıza da göz atmak isteyebilirsiniz.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Hajjalah
Thanks for this comprehensive guide. I would like to create a child theme using the plugin method but still have some not sure about some issues.
Will the codes in the WPCode plugin take effect on the child theme? If the parent theme is updated but the child theme is not updated, Can’t they conflict to cause an error?
WPBeginner Support
Yes the code in WPCode will appear on your child theme and if you update the parent theme there is a chance of conflict but it is not a guarantee.
Yönetici
Jiří Vaněk
A child theme is always the first thing I create on a newly installed site. Although I try to use WP Code a lot and avoid problems, but the child theme is an absolutely brilliant thing when updating a template and can save a lot of trouble with lost code that disappears from the main template after an update.
Asad
Sir, what should I write in function.php to call the Parent theme?
WPBeginner Support
You would want to use the code from our article below the text /* enqueue scripts and style from parent theme */
Yönetici
Yogesh Sambare
Hi, Team wpbeginner,
Thanks for this awesome guide, now I think I’m able to make my themes child theme, and it’s really helpful for me .
WPBeginner Support
Glad you found our guide helpful!
Yönetici
Ricardo
The line:
“wp_get_theme()->get(‘Version’) )”
Should be:
“wp_get_theme()->get(‘Version’) )”
cheers!
WPBeginner Support
While our comments automatically changed that in your message, we see the issue, thank you for letting us know
Yönetici
Rubb
Can I delete the plugin after I create the child theme?
WPBeginner Support
Currently, you can do that with the plugin
Yönetici
Eitan
You need to add quotation marks to the Y = (“Y”) at the echo date, or you’ll get an error. – echo date(“Y”)
WPBeginner Support
Thank you for pointing out the typo
Yönetici
Bomo
So now that we have created a child theme, how do we update the parent theme when the child theme is activated?
WPBeginner Support
You would update the parent theme as you normally would. For safety, you may want to create a backup before you update the parent theme in case there is a conflict somewhere.
Yönetici
RYAD
But do we have to activate the parent theme before we update and them desactivate it and reactivate the child theme ?
WPBeginner Support
No, you can update the theme without it being active