1. Anasayfa
  2. Blog
  3. WordPress Kılavuzları

WordPress Child Theme Nasıl Oluşturulur?

WordPress Child Theme Nasıl Oluşturulur?

Child theme (alt tema), ana temanızın tüm işlevselliğini ve tasarımını miras alan, ancak sizin yaptığınız özelleştirmeleri güvenli bir şekilde barındıran bağımsız bir tema yapısıdır. Bu sayede, tema güncellemelerinde özelleştirmeleriniz kaybolmaz. Değişiklikleriniz child theme içinde korunur ve ana tema ne kadar güncellenirse güncellensin, özel kodlarınız yerinde kalır. Peki, WordPress child theme nasıl oluşturulur? Bu rehberde, WordPress child theme oluşturma sürecini adım adım ele alacağız.

Manuel Yöntem: FTP ile Child Theme Oluşturma

Manuel child theme oluşturma yöntemi, WordPress tema yapısını derinlemesine anlamanızı sağlar ve size tam kontrol verir.

  1. Child Theme Klasörü Oluşturma: FTP programınızla sunucunuza bağlanın ve wp-content/themes/ dizinine gidin. Burada yeni bir klasör oluşturun. Klasör adı küçük harflerle, tire (-) ile ayrılmış olmalı ve parent theme (ana tema) adını içermeli. Örnek: twentytwentyfour-child veya astra-child. Boşluk veya Türkçe karakter kullanmayın.
  2. style.css Dosyası Oluşturma: Child theme klasörünüzün içine style.css adında bir dosya oluşturun. Bu dosya, WordPress’e child theme hakkında bilgi veren zorunlu bir dosyadır. Dosyanın en başına özel bir header eklemeniz gerekir. Bu header olmadan WordPress, klasörünüzü tema olarak tanımaz.
  3. functions.php Dosyası Oluşturma: Child theme klasörünüze functions.php adında ikinci bir dosya oluşturun. Bu dosya, ana temanın stil dosyalarını doğru şekilde yüklemek ve kendi özel fonksiyonlarınızı eklemek için kullanılır. Modern WordPress’te ana tema CSS’ini enqueue etmek zorunludur.
  4. Child Theme’i Aktif Etme: WordPress yönetim panelinize gidin. Görünüm > Temalar menüsünden child theme’inizi bulun ve “Etkinleştir” butonuna tıklayın. Siteniz artık child theme üzerinden çalışıyor. Görünümde herhangi bir değişiklik olmamalı çünkü henüz özelleştirme yapmadınız.

Şimdi style.css dosyasının içeriğine detaylı bakalım. Dosyanın en üstüne aşağıdaki header bilgilerini eklemeniz gerekir. Bu bilgiler, WordPress’in child temanızı tanıması ve yönetici panelinde göstermesi için gereklidir:

  • style.css içeriği:
/*
Theme Name:   Twenty Twenty-Four Child
Theme URI:    https://sizinsitedizininiz.com/
Description:  Twenty Twenty-Four teması için özel child theme
Author:       Adınız Soyadınız
Author URI:   https://sizinsitedizininiz.com/
Template:     twentytwentyfour
Version:      1.0.0
Text Domain:  twentytwentyfour-child
*/

Burada dikkat etmeniz gereken en kritik satır Template: satırıdır. Bu satıra ana temanızın klasör adını (tam olarak dosya sistemindeki adı) yazmalısınız. Eğer ana tema klasörü astra ise, buraya Template: astra yazmalısınız. Tema başlığındaki ismi değil, klasör adını kullanmanız çok önemlidir. Yanlış yazarsanız, WordPress ana temanızı bulamaz ve child tema çalışmaz.

  • functions.php İçeriği:
<?php
// Ana tema CSS'ini yükle
function child_theme_enqueue_styles() {
    wp_enqueue_style( 
        'parent-style', 
        get_template_directory_uri() 
        . '/style.css' 
    );
    wp_enqueue_style( 
        'child-style',
        get_stylesheet_directory_uri() 
        . '/style.css',
        array( 'parent-style' ),
        wp_get_theme()->get('Version')
    );
}
add_action( 
    'wp_enqueue_scripts', 
    'child_theme_enqueue_styles' 
);
?>

Bu temel yapıyı oluşturduktan sonra child theme’iniz çalışır durumda. Artık style.css dosyasına kendi CSS kodlarınızı ekleyebilir, functions.php’ye özel fonksiyonlar yazabilir ve gerektiğinde parent theme’den şablon dosyalarını kopyalayıp özelleştirebilirsiniz. Tüm değişiklikleriniz güvenli bir şekilde child theme içinde kalacaktır.

Eklenti ile Child Theme Oluşturma (Hızlı+Kolay)

Manuel yönteme alternatif olarak, WordPress eklentileri kullanarak child tema oluşturabilirsiniz. Bu yöntem özellikle FTP bilgisi olmayan veya hızlı bir şekilde child theme oluşturmak isteyen kullanıcılar için idealdir. Eklentiler, tüm teknik detayları sizin yerinize halleder ve birkaç tıklama ile child temanızı hazır hale getirir.

Child Theme Configurator eklentisi en popüler ve güvenilir child theme oluşturma eklentisidir. WordPress eklenti dizininde milyonlarca aktif kurulumu vardır ve sürekli güncellenmektedir. Temel özellikleri şunlardır:

  • Tek tıkla child theme oluşturma
  • Parent theme CSS’ini analiz etme ve kopyalama seçenekleri
  • Görsel CSS editörü (değişiklikleri canlı önizleme)
  • Mevcut özelleştirmeleri child theme’e taşıma
  • Tema dosyalarını kopyalama ve düzenleme
  • PHP ve CSS söz dizimi kontrolü
  • Yedekleme ve geri yükleme özellikleri

# Kurulum Adımları:

  1. WordPress yönetim panelinde Eklentiler > Yeni Ekle menüsüne gidin
  2. Arama kutusuna “Child Theme Configurator” yazın
  3. Eklentiyi bulun, Şimdi Yükle butonuna tıklayın
  4. Yükleme tamamlandıktan sonra Etkinleştir butonuna tıklayın
  5. Araçlar > Child Themes menüsünden eklenti ayarlarına erişin.
  6. Karşınıza çıkan arayüzde birkaç önemli seçenek bulunur. İlk olarak “Create a new Child Theme” (Yeni Child Theme Oluştur) seçeneğini işaretleyin. Ardından açılan menüden ana temanızı seçin. Eklenti, kurulu tüm temalarınızı listeler.
  7. Ana temanızı seçtikten sonra “Analyze” butonuna tıklayın. Eklenti, parent theme’in yapısını inceler ve uyumluluk kontrolü yapar. Herhangi bir sorun varsa sizi uyarır.
  8. Alt temanız için bir isim ve açıklama girin. Gerekirse logo veya screenshot ekleyebilirsiniz. Bu bilgiler, tema listesinde görünecektir.
  9. Parent CSS’i nasıl yüklemek istediğinizi seçin. Önerilen seçenek “Use the WordPress style queue” (WordPress stil kuyruğunu kullan) seçeneğidir.
  10. Create New Child Theme” butonuna tıklayın. Eklenti, tüm gerekli dosyaları otomatik oluşturur ve child temanızı aktif eder.
  11. Child Theme Configurator’ın en güçlü özelliklerinden biri, görsel CSS editörüdür. Eklenti arayüzündeki “Web Fonts” ve “Custom CSS” sekmelerinden, kod yazmadan CSS değişiklikleri yapabilirsiniz. Yaptığınız değişiklikler anında önizlenir ve onayladığınızda child temanızın style.css dosyasına kaydedilir. Bu özellik, CSS bilgisi sınırlı olan kullanıcılar için çok değerlidir.
  12. Ayrıca eklenti, mevcut özelleştirmelerinizi child theme’e taşıma imkanı sunar. Eğer daha önce WordPress özelleştirici (Customizer) veya “Ek CSS” alanında değişiklikler yaptıysanız, eklenti bunları tespit eder ve child theme’e aktarma seçeneği sunar. Bu sayede hiçbir özelleştirmenizi kaybetmezsiniz. “Files” sekmesinden ise parent theme dosyalarını child theme’e kopyalayabilir ve doğrudan eklenti içinde düzenleyebilirsiniz.

# Diğer Popüler Eklentiler:

  • WP Child Theme Generator: Minimalist arayüzü seven kullanıcılar için basit bir alternatif.
  • Child Theme Wizard: Sihirbaz benzeri adım adım kurulum sunar.
  • One-Click Child Theme: Tek tıkla basit child theme oluşturur, ekstra özellik sunmaz.

Child Theme’de Stil Değişiklikleri Nasıl Yapılır?

Child theme oluşturduktan sonraki en yaygın işlem, CSS ile görsel değişiklikler yapmaktır. Sitenizin renklerini, yazı tiplerini, düzen özelliklerini veya herhangi bir görsel öğeyi CSS ile özelleştirebilirsiniz. Child theme’inizin style.css dosyası, bu özelleştirmeler için ideal yerdir ve tüm değişiklikleriniz tema güncellemelerinden etkilenmeden korunur.

CSS özelleştirmesi yaparken en önemli konu, özgüllük (specificity) kavramını anlamaktır. WordPress ve parent theme’iniz zaten binlerce satır CSS içerir. Sizin yazdığınız CSS kurallarının uygulanması için, mevcut kurallara göre daha özgül olması veya dosya yükleme sırasında sonra gelmesi gerekir. Child theme CSS dosyası varsayılan olarak parent theme CSS’inden sonra yüklendiği için, aynı özgüllükteki kurallarınız öncelik kazanır.

# Temel CSS Özelleştirme Örnekleri

/* Site başlığı rengini değiştirme */
.site-title a {
    color: #c6c9dc;
    font-weight: 700;
}

/* Ana menü öğelerine hover efekti */
.main-navigation a:hover {
    background-color: #E0F5FB;
    color: #333;
    transition: all 0.3s ease;
}

/* Blog yazı başlıklarını büyütme */
.entry-title {
    font-size: 2.5rem;
    line-height: 1.3;
    margin-bottom: 1.5rem;
}

/* Footer arka plan rengi */
.site-footer {
    background-color: #BFC3CD;
    padding: 3rem 0;
}

/* Butonları özelleştirme */
.wp-block-button__link {
    background-color: #CED0EE;
    border-radius: 8px;
    padding: 15px 30px;
}

/* Responsive tasarım için media query */
@media (max-width: 768px) {
    .entry-title {
        font-size: 1.8rem;
    }
}

# CSS Yazma İpuçları

  • Tarayıcı Geliştirici Araçları Kullanın: Chrome veya Firefox’ta F12 tuşuna basarak geliştirici araçlarını açın. Değiştirmek istediğiniz öğeye sağ tıklayıp “İncele” seçin. Mevcut CSS kurallarını görün ve deneyler yapın.
  • Özgüllüğü Artırın: CSS’iniz uygulanmıyorsa, selektörünüzü daha spesifik hale getirin. Örneğin .button yerine body .site-main .button yazın.
  • !important Kullanımından Kaçının: !important kullanmak kolay çözüm gibi görünse de, ileride CSS’inizi yönetmeyi zorlaştırır. Sadece son çare olarak kullanın.
  • Yorumlar Ekleyin: CSS dosyanıza açıklayıcı yorumlar ekleyin. Aylar sonra kodu tekrar incelediğinizde ne yaptığınızı anlamanız kolaylaşır.
  • Değişkenleri Organize Edin: CSS custom properties (değişkenler) kullanarak renk ve boyut değerlerini tek yerden yönetebilirsiniz.

# CSS Değişkenleri Kullanımı

:root {
    --main-color: #c6c9dc;
    --accent-color: #E0F5FB;
    --font-size-large: 2rem;
}

h1 {
    color: var(--main-color);
    font-size: var(--font-size-large);
}

CSS özelleştirmelerini test ederken, önce WordPress özelleştirici içindeki “Ek CSS” alanında denemeler yapın. Bu alan, canlı önizleme sunar ve değişikliklerinizi kaydetmeden görebilirsiniz. Tasarımdan memnun kaldığınızda, bu CSS kodlarını child theme’inizin style.css dosyasına taşıyın. Bu sayede, kodlarınız kalıcı olur ve tema değişikliklerinde kaybolmaz.

Karmaşık CSS değişiklikleri için, birden fazla CSS dosyası kullanabilirsiniz. Örneğin, responsive tasarım için ayrı bir responsive.css dosyası, animasyonlar için animations.css dosyası oluşturabilirsiniz. Bu dosyaları child theme klasörüne ekledikten sonra, functions.php içinde wp_enqueue_style() fonksiyonuyla yüklemelisiniz. Bu yaklaşım, kodlarınızı daha organize ve yönetilebilir kılar.

Child Theme’e Özel Fonksiyonlar Ekleme

Child theme’inizin functions.php dosyası, PHP fonksiyonları ve WordPress hook’ları kullanarak sitenizin işlevselliğini genişletmenizi sağlar. Bu dosya, CSS değişikliklerinin ötesine geçerek sitenizin davranışını değiştirmenize, yeni özellikler eklemenize ve WordPress’in çeşitli yönlerini özelleştirmenize imkan tanır. Ancak bu dosyada yapılan hatalar siteyi çökertebilir, bu yüzden dikkatli olmalısınız.

WordPress’te işlevsellik eklemenin temel yolu, hook sistemini kullanmaktır. İki tür hook vardır: action hooks (belirli bir noktada kod çalıştırır) ve filter hooks (veriyi değiştirip geri döndürür). Child theme functions.php’si, bu hook’ları kullanarak WordPress’in çeşitli noktalarına müdahale etmenizi sağlar. Parent theme’in functions.php’si ile child theme’in functions.php’si arasındaki temel fark, child theme’in dosyasının önce yüklenmesidir. Bu detay, bazı özelleştirmeler için kritik önem taşır.

  • Özel Widget Alanı Ekleme:
function child_register_sidebar() {
    register_sidebar( array(
        'name'          => 'Özel Widget Alanı',
        'id'            => 'custom-widget-area',
        'description'   => 'Özel içerik için widget alanı',
        'before_widget' => '<div class="widget">',
        'after_widget'  => '</div>',
        'before_title'  => '<h3 class="widget-title">',
        'after_title'   => '</h3>',
    ) );
}
add_action( 'widgets_init', 'child_register_sidebar' );
  • Alıntı (Excerpt) Uzunluğunu Değiştirme:
function child_custom_excerpt_length( $length ) {
    return 30; // Kelime sayısı
}
add_filter( 'excerpt_length', 'child_custom_excerpt_length', 999 );

function child_excerpt_more( $more ) {
    return '... <a href="' . get_permalink() . '">Devamını Oku</a>';
}
add_filter( 'excerpt_more', 'child
  • Özel Yazı Tipi (Custom Font) Ekleme:
function child_add_google_fonts() {
    wp_enqueue_style( 
        'google-fonts', 
        'https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap',
        array(),
        null
    );
}
add_action( 'wp_enqueue_scripts', 'child_add_google_fonts' );
  • Admin Paneline Özel CSS Ekleme
function child_admin_custom_css() {
    echo '<style>
        .custom-admin-style {
            background-color: #F5F7FD;
            padding: 20px;
        }
    </style>';
}
add_action( 'admin_head', 'child_admin_custom_css' );
  • Özelleştirilmiş Logo Boyutları:
function child_custom_logo_setup() {
    add_theme_support( 'custom-logo', array(
        'height'      => 100,
        'width'       => 400,
        'flex-height' => true,
        'flex-width'  => true,
    ) );
}
add_action( 'after_setup_theme', 'child_custom_logo_setup' );
  • JavaScript Dosyası Ekleme:
function child_enqueue_scripts() {
    wp_enqueue_script( 
        'custom-script',
        get_stylesheet_directory_uri() . '/js/custom.js',
        array( 'jquery' ),
        '1.0.0',
        true // Footer'da yükle
    );
}
add_action( 'wp_enqueue_scripts', 'child_enqueue_scripts' );

Functions.php’ye kod eklerken dikkat edilmesi gereken önemli güvenlik ve performans kuralları vardır. Her zaman <?php etiketi ile başlayın ve dosyanın sonuna kapanış etiketi ?> eklemeyin (bu, boşluk karakterlerinden kaynaklanan hataları önler). Fonksiyon isimlerini benzersiz yapın, parent theme veya eklentilerle çakışmayı önlemek için başına child_ ön eki ekleyin. Büyük veri işlemleri yapan fonksiyonları önbelleğe alın (transient API kullanarak). Ve en önemlisi, her değişiklikten sonra siteyi test edin.

⚠️ Güvenlik Uyarısı: functions.php’ye kullanıcı girdisi alan fonksiyonlar eklerken, mutlaka veri doğrulama ve temizleme (sanitization) yapın. sanitize_text_field(), esc_html(), wp_kses() gibi WordPress fonksiyonlarını kullanın. Aksi halde güvenlik açıkları oluşabilir.

Şablon Dosyalarını Özelleştirme

WordPress, sayfalarınızı oluştururken belirli bir dosya hiyerarşisi izler. Bu sisteme Template Hierarchy (Şablon Hiyerarşisi) denir. Child theme ile, bu şablon dosyalarından herhangi birini kopyalayıp özelleştirebilirsiniz. WordPress önce child theme klasöründe şablon dosyasını arar; bulamazsa parent theme’e bakar. Bu mekanizma, size tam tasarım kontrolü verir.

  • Temel Şablon Dosyaları:
    • index.php – Ana şablon dosyası (fallback)
    • header.php – Site başlığı
    • footer.php – Site alt bilgisi
    • sidebar.php – Kenar çubuğu
    • single.php – Tekil yazı sayfası
    • page.php – Sayfa şablonu
    • archive.php – Arşiv sayfaları
    • search.php – Arama sonuçları
    • 404.php – Hata sayfası
    • functions.php – Tema fonksiyonları
  • Özel Sayfa Şablonları: Kendi sayfa şablonlarınızı oluşturabilirsiniz. Dosyanın en üstüne şu yorumu ekleyin:
/*
Template Name: Tam Genişlik Sayfa
*/

Bu şablon, sayfa düzenleyicide “Şablon” seçeneklerinde görünür.

  • Şablon Dosyası Override Etme Adımları:
    • Parent Theme Klasörünü Açın: FTP ile veya dosya yöneticisiyle wp-content/themes/parent-theme-adi/ klasörüne gidin.
    • Dosyayı Kopyalayın: Özelleştirmek istediğiniz şablon dosyasını (örneğin single.php) bulun ve kopyalayın.
    • Child Theme Klasörüne Yapıştırın: Dosyayı wp-content/themes/child-theme-adi/ klasörüne yapıştırın.
    • Dosyayı Düzenleyin: Metin editörünüzde açın ve istediğiniz değişiklikleri yapın. HTML yapısını, PHP kodlarını veya WordPress fonksiyonlarını değiştirebilirsiniz.
    • Test Edin: Değişikliklerinizi kaydedin ve sitenizde ilgili sayfayı görüntüleyerek sonucu kontrol edin.
  • Template Parts (Şablon Parçaları): Bazı temalar, tekrar eden içerikler için template parts kullanır (örneğin content.php, content-single.php). Bunlar get_template_part() fonksiyonuyla çağrılır. Bu dosyaları da aynı şekilde override edebilirsiniz.

Şablon dosyalarını özelleştirirken en yaygın senaryolardan biri, header.php dosyasını düzenlemektir. Örneğin, logo konumunu değiştirmek, ekstra bir menü eklemek veya meta etiketleri güncellemek isteyebilirsiniz. Header.php’yi child theme’inize kopyaladıktan sonra, HTML ve PHP kodlarını dilediğiniz gibi düzenleyebilirsiniz. Ancak dikkat: Ana tema güncellemelerinde yeni özellikler eklenirse, bu değişiklikler child theme’inizdeki override edilmiş dosyada olmayacaktır. Bu nedenle, sadece gerçekten değiştirmeniz gereken kısımları override etmek ve mümkünse hook’lar kullanmak daha sürdürülebilir bir yaklaşımdır.

  • Template Hierarchy Mantığı– WordPress, bir sayfa yüklenirken en spesifik şablondan başlayarak, daha genel şablonlara doğru arama yapar. Örneğin bir kategori arşiv sayfası için: category-{slug}.phpcategory-{id}.phpcategory.phparchive.phpindex.php sırasını izler. İlk bulunan dosya kullanılır.
  • Partial Template’lar– Büyük şablon dosyalarını parçalara bölerek yönetimi kolaylaştırabilirsiniz. get_template_part( 'template-parts/content', 'page' ) gibi fonksiyonlar kullanarak modüler yapı oluşturun.
  • WooCommerce Şablonları– WooCommerce kullanıyorsanız, e-ticaret şablonlarını özelleştirmek için child theme’inizde woocommerce/ klasörü oluşturun ve şablon dosyalarını buraya kopyalayın. WooCommerce dokümentasyonunda hangi dosyaların override edilebileceği belirtilir.
  • Blok Tema Şablonları (FSE). Modern blok temalar (Full Site Editing) kullanıyorsanız, şablon sistemi farklıdır. Bu temalarda, templates/ klasöründe HTML dosyaları bulunur ve WordPress editörü ile görsel olarak düzenlenirler. Child theme ile bu dosyaları override edebilirsiniz.

Şablon dosyalarını özelleştirirken, WordPress’in şablon etiketlerini (template tags) ve koşullu etiketleri (conditional tags) kullanmanız gerekecektir. the_title(), the_content(), get_header() gibi fonksiyonlar ve is_home(), is_single(), is_page() gibi koşullar, dinamik içerik oluşturmanızı sağlar. WordPress Codex ve resmi dokümantasyon, bu fonksiyonların kullanımı hakkında detaylı bilgi sunar.

Child Theme Yönetimi: Hata Ayıklama, Güncelleme ve Bakım

Child theme oluşturduktan sonra düzenli bakım ve doğru yönetim önemlidir. Zaman içinde kod ekledikçe, sitenizi güncelledikçe veya sorunlarla karşılaştıkça, child temanızı etkili bir şekilde yönetmeniz gerekir. İyi bir yönetim pratiği, hem sitenizin performansını hem de güvenliğini artırır.

  • Düzenli Yedekleme– Child theme klasörünüzü düzenli olarak yedekleyin. functions.php ve style.css dosyalarında yaptığınız her önemli değişiklikten sonra yerel bir kopyasını bilgisayarınıza indirin. Otomatik yedekleme eklentileri kullanarak tema klasörlerini de yedek planınıza dahil edin. Büyük değişiklikler öncesi manuel anlık yedek almanız, sorun durumunda hızlı geri dönüş sağlar.
  • Versiyon Kontrolü– Git gibi versiyon kontrol sistemleri kullanarak alt temanızın geçmişini takip edin. Bu sayede hangi değişikliği ne zaman yaptığınızı görebilir, gerektiğinde eski versiyonlara dönebilirsiniz. GitHub veya GitLab gibi platformlarda uzak depo oluşturarak ekip çalışmasını da kolaylaştırabilirsiniz. Her commit’te açıklayıcı mesajlar yazın.
  • Kod Dokümantasyonu– Functions.php ve özel şablon dosyalarınızda yorum satırları ekleyin. Her fonksiyonun ne yaptığını, neden eklendiğini ve nasıl çalıştığını açıklayın. Aylar sonra kodu tekrar incelediğinizde veya başka bir geliştirici projeyi devralırsa, bu yorumlar çok değerli olacaktır. Karmaşık CSS bloklarını da yorumlayın.
  • Performans Optimizasyonu:
    • Gereksiz Kodları Temizleyin: Kullanmadığınız CSS kurallarını ve fonksiyonları silin. Eski denemelerinizi yoruma almak yerine tamamen kaldırın.
    • CSS ve JS Minify Edin: Üretim ortamında sıkıştırılmış dosyalar kullanın. Eklentiler (Autoptimize, WP Rocket) veya manuel minify araçları kullanabilirsiniz.
    • Görselleri Optimize Edin: Child theme’e eklediğiniz görselleri sıkıştırın. WebP formatı kullanın. Lazy loading uygulayın.
    • Veritabanı Sorgularını Önbelleğe Alın: Karmaşık sorguları tekrar tekrar çalıştırmak yerine, transient API ile önbelleğe alın.
  • Block Patterns ve FSE Entegrasyonu– WordPress 5.9 ve sonrasındaki Full Site Editing (FSE) devrimi, child theme geliştirmeyi değiştirdi. Blok temalar kullanıyorsanız, theme.json dosyasını child theme’inizde override edebilir, özel blok kalıpları (block patterns) oluşturabilirsiniz. patterns/ klasörü oluşturarak kendi blok kalıplarınızı ekleyin ve site editöründe kullanın.
  • Global Styles ve Design Tokens– Modern child theme’lerde, theme.json dosyası ile global stilleri yönetin. Renk paletleri, tipografi ayarları, spacing değerleri ve diğer design token’ları tek bir JSON dosyasında toplayın. Bu yaklaşım, hem kod tekrarını azaltır hem de tutarlı tasarım sistemi oluşturur. CSS değişkenleri otomatik oluşturulur.
  • Accessibility (Erişilebilirlik)– WCAG standartlarına uygun child theme geliştirin. Klavye navigasyonunu test edin, ARIA etiketleri ekleyin, renk kontrastlarını optimize edin. Skip links, focus stilleri ve semantic HTML kullanın. wp_nav_menu()‘de aria-label parametrelerini unutmayın.
  • REST API ve Headless WordPress– Child theme’inizde REST API endpoint’leri oluşturabilirsiniz. register_rest_route() ile özel API’ler tanımlayın. Headless WordPress mimarisinde bile, child theme içinde backend mantığını ve özel post type’ları yönetebilirsiniz. Theme JSON ile frontend bağımsız yapılandırma yapın.
  • Profesyonel Geliştirme İş Akışı– Profesyonel child theme geliştirme, sadece kod yazmaktan ibaret değildir. Doğru araçlar ve iş akışı kullanmak, hem üretkenliğinizi artırır hem de hatasız kod yazmanızı sağlar. Local geliştirme ortamı (Local by Flywheel, XAMPP, WAMP, Docker) kurun ve değişikliklerinizi önce burada test edin. CSS preprocessor’ları (SASS, LESS) kullanarak daha organize ve güçlü stil dosyaları oluşturun. Task runner’lar (Gulp, Webpack) ile otomatik minification, autoprefixer ve browser-sync gibi işlemleri otomatikleştirin.

Child theme geliştirirken, WordPress ekosistemindeki diğer araçlarla entegrasyonu düşünün:

  • Page Builder Uyumluluğu: Elementor, Beaver Builder gibi page builder’lar kullanılıyorsa, child theme’inizin bu araçlarla çakışmadığından emin olun. Özel CSS sınıfları ekleyin.
  • WooCommerce Entegrasyonu: E-ticaret sitesi için child theme oluşturuyorsanız, WooCommerce hook’larını kullanın ve e-ticaret şablonlarını özelleştirin.
  • ACF ve Custom Fields: Advanced Custom Fields gibi eklentilerle özel alanlar oluşturuyorsanız, bu verileri child theme şablonlarında göstermek için fonksiyonlar yazın.
  • SEO Eklentileri: Yoast SEO, Rank Math gibi eklentilerle uyumlu meta tag yapısı oluşturun. Schema markup ekleyin.

Oluşturduğunuz child theme’i başka projelerde veya müşteriler için kullanmak isteyebilirsiniz:

  • Şablon Olarak Kaydetme: Generic bir child theme yapısı oluşturun ve yeni projelerde başlangıç noktası olarak kullanın.
  • GitHub’da Paylaşma: Açık kaynak olarak GitHub’da yayınlayabilir, topluluktan geri bildirim alabilirsiniz.
  • ZIP ile Dışa Aktarma: Child theme klasörünü ZIP’leyerek kolayca taşıyın. Tema kurulum ekranından yüklenebilir hale getirin.
  • Dokümantasyon Hazırlama: README.md dosyası ekleyerek kurulum ve özelleştirme talimatları verin.

Child theme oluşturma yeteneği, WordPress geliştirici yolculuğunuzda sizi bir sonraki seviyeye taşıyan kritik bir beceridir. Bu rehberde öğrendiğiniz teknikleri pratik ederek, profesyonel, sürdürülebilir ve ölçeklenebilir WordPress projeleri geliştirebilirsiniz.

Editör Notu: İçeriğimiz okuyucu desteğiyle finanse edilmektedir. Bu, bağlantılarımızdan bazılarına tıkladığınızda komisyon kazanabileceğimiz anlamına gelir.

Burada sadece teorik bilgiler değil, gerçek deneyimlere dayanan pratik çözümler var. Burada yol arkadaşı olacağız. Karmaşık konuları birlikte çözecek, teknik detayları birlikte aşacağız...

Yazarın Profili