Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Kupası
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

WordPress Alt Teması Nasıl Oluşturulur (Başlangıç Kılavuzu)

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.

How to Create a WordPress Child Theme

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:

  1. 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.
  2. İ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.
  3. Tema geliştirme için yerel bir site veya hazırlık sitesi kullanın. Canlı sitenizde istemediğiniz hatalar oluşturmak istemezsiniz.
  4. Ö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:

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.

Bluehost site settings

Genel Bakış sekmesinde, ‘Hızlı Bağlantılar’ bölümüne ilerleyin.

Ardından, ‘Dosya Yöneticisi’ni seçin.

Bluehost File Manager button

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.

Creating a new folder in Bluehost file manager

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.

Naming a new child theme file in Bluehost file manager

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.

Creating a new file in Bluehost file manager

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.

Creating a new stylesheet file in Bluehost file manager

Ş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.

Editing a style.css file in Bluehost file manager

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.

Saving a stylesheet file in Bluehost file manager

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.

Activating a child theme in WordPress admin

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.

Creating a new child theme with Child Theme Configurator

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.

Choosing a parent theme in Child Theme Configurator

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.

Choosing where to save the stylesheet in Child Theme Configurator

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.

Choosing the parent theme stylesheet handling in Child Theme Configurator

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.

Filling out the child theme details in Child Theme Configurator

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.

Clicking the Create New Child Theme button in Child Theme Configurator

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.

Previewing a child theme in Child Theme Configurator

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.

Activating a child theme after it was made with Child Theme Configurator

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.

Creating a child theme with Create Block Theme plugin

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.

Inserting the child block theme's information in the Create Block Theme plugin

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.

Seeing the newly created child theme made with the Create Block Theme plugin

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.

Astra Child Theme Generator website

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:

Demonstrating how the Chrome inspect tool works

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:

Adding custom CSS in a child theme's stylesheet in the theme file editor

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:

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.

Selecting the Full-Site Editor from the WordPress admin panel

Aralarından seçim yapabileceğiniz birkaç menü göreceksiniz.

Burada, sadece ‘Stiller’i seçin.

Opening the Styles menu in Full Site Editor

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.

Clicking the Edit Styles button in the Full Site Editor

Ş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.

Clicking the Typography menu in Full Site Editor

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.

Clicking Headings in the Full Site Editor

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.

Styling headings in the Full Site Editor

İş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.

Saving changes made to a child theme with the Create Block Theme plugin

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.

Selecting what changes to save to the child theme with the Create Block Theme plugin

İşiniz bittiğinde, kenar çubuğunu sonuna kadar kaydırın.

Ardından, ‘Değişiklikleri Kaydet’e tıklayın.

Clicking on the Save Changes button in the Create Block Theme plugin

Ş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.

Clicking to view the theme.json file in the Create Block Theme plugin

Ü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.

Viewing the theme.json file in the Create Block Theme plugin

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.

Copying footer.php in Bluehost file manager

Bundan sonra, alt temanızın dosya yolunu girin.

İşiniz bittiğinde, ‘Dosyaları Kopyala’ya tıklamanız yeterlidir.

Entering the child theme's file path to copy and paste the footer.php into inside Bluehost file manager

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.

Editing footer.php in Bluehost file manager

Ö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:

Replacing the WordPress footer links in footer.php inside Bluehost file manager

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.

Adding a dynamic copyright notice in footer.php

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.

Creating a custom widget area for a child theme

Ö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.

Açıklama: İçeriğimiz okuyucu desteklidir. Bu, bazı bağlantılarımıza tıklarsanız komisyon kazanabileceğimiz anlamına gelir. WPBeginner'ın nasıl finanse edildiğini, neden önemli olduğunu ve nasıl destek olabileceğinizi görün. İşte editoryal sürecimiz.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Ultimate WordPress Araç Kiti

Araç setimize ÜCRETSİZ erişim sağlayın - her profesyonelin sahip olması gereken WordPress ile ilgili ürün ve kaynaklardan oluşan bir koleksiyon!

Reader Interactions

100 yorumBir Cevap Bırakın

  1. 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

  2. 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.

  3. 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

  4. 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

  5. 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

  6. Rubb

    Can I delete the plugin after I create the child theme?

    • WPBeginner Support

      Currently, you can do that with the plugin :)

      Yönetici

  7. 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

  8. 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

Bir Cevap Bırakın

Yorum bırakmayı seçtiğiniz için teşekkür ederiz. Lütfen tüm yorumların yorum poli̇ti̇kasi uyarınca denetlendiğini ve e-posta adresinizin yayımlanmayacağını unutmayın. Ad alanında anahtar kelime KULLANMAYIN. Kişisel ve anlamlı bir sohbet edelim.