Sıfırdan bire: Modern WordPress tema geliştirme temel becerilerini öğrenmenize yardımcı olacak adım adım bir rehber.

Modern WordPress Tema Geliştirme Temel Kavramları

Modern WordPress tema yapıları, geleneksel yöntemlerden belirgin şekilde farklıdır. Temel değişiklik, Block Theme (Blok Tema) ve Full Site Editing (FSE – Tüm Site Düzenleme) modellerinin kapsamlı bir şekilde benimsenmesidir. Bu, temanın görünümünün ve düzeninin – başlık, alt bilgi alanlarından makale içeriğine kadar – Gutenberg editöründeki “bloklar” aracılığıyla oluşturulabileceği ve değiştirilebileceği anlamına gelir; karmaşık PHP şablonları doğrudan yazmaya gerek kalmaz.

Modern bir temanın temel dosya yapısı köklü bir şekilde basitleştirilmiştir. Bunlar arasında en kritik olan şablon dosyasıdır.theme.jsonBu dosya, temanın stilini, renk paletini, düzenlemesini ve diğer genel ayarlarını tanımlar. Bir diğer hayati öneme sahip dosya ise…index.htmlGeleneksel olanın yerini aldı.index.phpVarsayılan bir şablon olarak, sayfa iskelesini oluşturmak için editör tarafından işlenebilen, statik HTML blokları kullanılır. Aynı zamanda…style.cssDosya hâlâ mevcut ve esas olarak tema bilgilerini belirtmek için kullanılıyor; ancak CSS stil tanımlarının çoğu başka bir yere taşındı.theme.jsonVeya editör tarafından yönetilir.

Geriye dönük uyumluluğu korumak için, WordPress temanın kök dizininde belirli dosyaların olup olmadığını kontrol eder.block-templates或templatesKlasörler. Bu klasörler, blok tabanlı HTML şablon dosyalarını saklamak için kullanılır. Örneğin…single.html或page.htmlBu öğeler, PHP şablon dosyalarından önce kullanılacaktır. Aynı zamanda, temadan gelen stil ve ön uç kaynaklarının işlenme yöntemi buna bağlıdır.wp_enqueue_style和wp_enqueue_scriptFonksiyonlar genellikle ana dosyada bulunur.functions.phpKayıt ve sıra bekleme işlemleri burada yapılır.

Tavsiye edilen okuma WordPress Tema Geliştirme: Başlangıçtan Uzmanlığa – Kendi Web Sitelerinizi Oluşturmayı Adım Adım Öğrenin。

Bu fikir değişimini anlamak – sabit PHP şablonları yazmaktan, stil ve yapıyı JSON ve blok işaretleri kullanarak tanımlamaya geçmek – modern tema geliştirmeyi öğrenmenin ilk adımıdır.

UltaHost WordPress Sunucusu

30 gün iade garantisi, sınırsız bant genişliği ve veritabanı kullanımı, ücretsiz DDoS koruması; 3 yıllık abonelikte indirim (50%).

Sayfaya erişin.

Temel konu dosyalarının oluşturulması ve yapılandırılması

Modern bir WordPress teması oluşturmak için öncelikle şunlara ihtiyacınız var:wp-content/themesDizin içinde yeni bir tema klasörü oluşturun. Blok temaları için de geçerlidir.style.cssDosya hâlâ gerekli olan bir “kimlik belgesidir” ve dosyanın üst kısmındaki yorum bloğu belirli bilgileri içermelidir.

/*
Theme Name: 我的现代主题
Theme URI: https://example.com/my-theme
Author: Your Name
Author URI: https://example.com
Description: 一个使用全站编辑的现代WordPress主题。
Version: 1.0
License: GPL v2 or later
Text Domain: my-modern-theme
*/

Hemen ardından, modern bir tasarıma sahip bir “beyin” oluşturmanız gerekiyor.theme.jsonBu JSON dosyası, temanın kök dizininde bulunur ve genel stilleri ve tema ayarlarını merkezi bir şekilde kontrol etmek için kullanılır. Bu dosya aracılığıyla, yazı tipi boyutları, yazı tipi aileleri, renk paletleri, blokların varsayılan stilleri gibi özellikleri tanımlayabilirsiniz. Eklentiler ve alt temalar da bu ayarları daha da özelleştirebilirler. Temel bir yapıdır.theme.jsonYapısı şu şekildedir:

{
  "version": 2,
  "settings": {
    "color": {
      "palette": [
        { "name": "黑色", "slug": "black", "color": "#000000" },
        { "name": "白色", "slug": "white", "color": "#ffffff" }
      ]
    },
    "typography": {
      "fontSizes": [
        { "name": "小", "slug": "small", "size": "14px" },
        { "name": "中", "slug": "medium", "size": "20px" }
      ]
    }
  },
  "styles": {
    "color": {
      "background": "white",
      "text": "black"
    },
    "typography": {
      "fontSize": "var(--wp--preset--font-size--medium)"
    }
  },
  "customTemplates": [
    {
      "name": "宽幅页面",
      "title": "宽幅页面",
      "postTypes": [ "page" ]
    }
  ]
}

Ana Tema Şablonuindex.htmlVarsayılan sayfa yapısı tanımlanmıştır. Bu yapı, tamamen editör tarafından tanınan HTML yorumlarıyla çevrili blok işaretlerinden oluşmaktadır; örneğin:

<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group">
    <!-- wp:post-content {"layout":{"type":"constrained"}} /-->
</main>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

Bu yapı, sayfa başlığını, ana içerik bölgesini ve sayfa altını net bir şekilde ayırır ve bunları birbirinden bağımsız hale getirir. Ayrıca, sayfa içeriğinin düzenlenmesini ve okunmasını kolaylaştırmak için çeşitli tasarım özellikleri kullanır.wp:post-contentMakale içeriği blok bazında dinamik olarak yüklenir. Son olarak, temanın kök dizininde “Block Template Parts” adlı bir klasör oluşturulması gerekmektedir.partsVe bunun içine yerleştirin.header.html和footer.htmlDiğer bileşen dosyaları.

Tavsiye edilen okuma 2026 Yılında Popüler Başlangıç Rehberi: Sıfırdan İlk WordPress Temanınızı Nasıl Oluşturursunuz?。

Sayfaları şablonlar ve şablon bileşenleri kullanarak oluşturun.

Blok temalarında, sayfanın düzen yapısı esas olarak şablonlar (Templates) ve şablon bileşenleri (Template Parts) aracılığıyla oluşturulur. Şablonlar, belirli türdeki sayfaların (örneğin tek bir makale, arşiv sayfası) genel yapısını tanımlamak için kullanılırken, şablon bileşenleri ise başlık, altlık gibi yeniden kullanılabilir modüllerdir.

Şablon dosyaları genellikle temanın klasöründe bulunur.templatesKlasörün içinde. WordPress, farklı sorgu türleri için otomatik olarak belirli şablon dosyalarını eşleştirir. Örneğin,single.htmlTek bir makaleyi sunmak için kullanılır.page.htmlStatik sayfalar için kullanılır.home.html或index.htmlBlogun ana sayfası için kullanılır. Bunu şu şekilde yapabilirsiniz:theme.json的customTemplatesBazı ifadeler, özel şablonlar olarak tanımlanmış ve kullanıcılar tarafından sayfa düzenleyicisinde seçilebilmektedir.

Şablon bileşenleri şurada saklanmaktadır:partsBu klasör, kodun yeniden kullanım oranını ve bakım kolaylığını büyük ölçüde artırmaktadır. Bir başlık (header) dosyası oluşturulmuştur.header.htmlÜst bölgeyi, site başlık bloğu, navigasyon bloğu gibi öğeler kullanarak oluşturabilirsiniz. Sayfa altı (footer) dosyasını da oluşturun.footer.htmlTelif hakkı bilgileri ve küçük araçlar (widget’lar) bölümü buraya yerleştirilebilir.

hosting.com Paylaşımlı Barındırma

AMD EPYC CPU'lar, NVMe SSD depolama ve LiteSpeed ile yüksek performans, 7/24, 7x7 uzman şirket içi destek, SSL, kaba kuvvet, kötü amaçlı yazılım ve DDoS koruması dahil gelişmiş güvenlik önlemleri, 73%'ye kadar tasarruf

Sayfaya erişin.

Tipik bir…header.htmlBu, aşağıdaki gibi olabilir:

<!-- wp:group {"tagName":"header","layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
<header class="wp-block-group">
    <!-- wp:site-title /-->
    <!-- wp:navigation {"ref":4} /-->
</header>
<!-- /wp:group -->

Bu örnekte,wp:navigationBlok, kendi içindeki öğeler aracılığıyla işlev görür.refÖzellik, “Görünüm” -> “Düzenleyici” bölümünde oluşturulup kaydedilen ve ID’si 4 olan bir navigasyon menüsünü referans alıyor; bu da tüm sitenin içeriğinin ve yapısının ayrılmasının ne kadar güçlü bir özellik olduğunu gösteriyor. Ana şablon içinde bu bileşenlere referans verilerek…Böylece bunları sayfaya ekleyebilirsiniz.

Daha karmaşık düzenlemeler için şunlardan yararlanılabilir:wp:group、wp:columns、wp:querySatırlar, sütunlar ve döngü içerikleri, blokları kullanarak oluşturulur. Örneğin,wp:queryBloklar, en yeni makaleleri dinamik olarak listeleyebilir; bu, geleneksel temalardaki ana döngüye eşdeğerdir. Ancak artık tüm bu ayarlamalar tamamen görsel bir editör aracılığıyla yapılıyor.

Tavsiye edilen okuma Sıfırdan Uzmanlığa: WordPress Tema Geliştirme Kapsamlı Rehberi ve Pratik Eğitim Kursu。

İşlev dosyaları aracılığıyla özellikler ve stiller ekleyin.

Her ne kadar blok temaları büyük ölçüde…theme.jsonVe HTML şablonları, ancak…functions.phpDosyalar hâlâ genişletilebilir tema özelliklerinin çekirdeğidir. Fonksiyon eklemek, stil betiklerini kaydetmek, tema desteğini tanımlamak gibi işlemler için kullanılan ve herhangi bir dönüş değeri olmayan bir PHP dosyasıdır.

Temel bir işlem, temaların stil şemalarını ve betiklerini kaydetmek ve sıraya koymaktır. Stilin çoğunlukla…theme.jsonYönetim, muhtemelen ek özel CSS’ye ihtiyacınız olacak.

InterServer Paylaşımlı Barındırma

Paylaşımlı hosting aylık $2.50 USD, ilk ay $0.1 USD promosyon kodu tryinterserver, 461 bulut uygulaması komut dosyası, tek tıklamayla yükleme.

Sayfaya erişin.

function my_modern_theme_setup() {
    // 添加对特定功能的支持，例如自定义标志
    add_theme_support('custom-logo');
    // 通过区块编辑器添加主题样式
    add_theme_support('wp-block-styles');
    // 添加对全站编辑器的支持
    add_theme_support('editor-styles');
}
add_action('after_setup_theme', 'my_modern_theme_setup');

function my_modern_theme_scripts() {
    // 排队主题的主样式表
    wp_enqueue_style(
        'my-modern-theme-style',
        get_stylesheet_uri(),
        array(),
        wp_get_theme()->get('Version')
    );
    // 排队编辑器样式
    add_editor_style('style-editor.css');
}
add_action('wp_enqueue_scripts', 'my_modern_theme_scripts');

functions.phpAyrıca, özel ve işlevsel özellikler eklemek için mükemmel bir yerdir. Örneğin, şunları kullanabilirsiniz:register_block_styleBu fonksiyon, mevcut temel blokların (örneğin paragrafların) özel bir görsel varyasyonunu kaydeder ve bu varyasyon, kullanıcıların seçim yapabilmesi için editörün “Stil” panelinde görünür.

// 为段落块注册一个“特别提示”样式
register_block_style(
    'core/paragraph',
    array(
        'name'         => 'notice',
        'label'        => __( '特别提示', 'my-modern-theme' ),
        'inline_style' => '.is-style-notice { padding: 1em; border-left: 4px solid #00a0d2; background-color: #f0f8ff; }',
    )
);

Ayrıca, kurallar veya işlemler arasında bağlantı kurmak için “kancalar” (hooks) da kullanabilirsiniz.wp_head、wp_footerÖzel kod ekleyin veya bunu şu yolla yapın:add_filterVarsayılan sorgu davranışlarını, çıktı içeriğini vb. değiştirebilirsiniz. Karmaşık özelleştirme ihtiyaçları için, daha modüler bir çözüm olarak küçük bir eklenti (plugin) oluşturmayı düşünebilirsiniz.

Test ve Hata Ayıklama Konuları

Geliştirme işlemi tamamlandıktan sonra, temanın kapsamlı bir şekilde test edilmesi çok önemlidir. Öncelikle, temayı yerel ortamda veya geçici bir ortamda aktive ederek ön yüz sayfalarının temel düzeninin, duyarlı tasarımının ve tüm temel bileşenlerin (başlıklar, paragraflar, resimler, galeriler, butonlar vb.) stilinin doğru bir şekilde görüntülendiğini kontrol etmelisiniz. Ayrıca, navigasyon menüsünün ve bağlantıların düzgün çalışıp çalışmadığını da kontrol etmelisiniz.

İkincisi, Gutenberg editörünü derinlemesine test etmek gerekiyor. Yeni sayfalar ve makaleler oluşturun, çeşitli blokları kullanarak karmaşık düzenler oluşturmayı deneyin; blokların araç çubuklarının ve ayar panellerinin düzgün çalışıp çalışmadığını kontrol edin, ayrıca özel stiller oluşturun (örneğin:theme.jsonTanımlanan palet veya yazı tipi boyutlarının bloklara doğru bir şekilde uygulandığından emin olun. Özellikle tüm siteyi düzenleyen aracı (“Görünüm” -> “Düzenleyici”) kullanarak, başlık, alt bilgi, ana sayfa şablonları gibi bölümleri değiştirin ve yapılan değişikliklerin kaydedildikten sonra ön tarafta doğru bir şekilde yansıtıldığından emin olun.

Hata ayıklama, modern geliştirmenin temel bir parçasıdır. Tarayıcınızın geliştirici araçlarını (F12) açın ve JavaScript hataları veya CSS çakışmaları olup olmadığını kontrol edin.wp-config.phpAyarlar bölümünde…define('WP_DEBUG', true);PHP uyarılarını ve hatalarını sayfada gösterebilirsiniz; bu da kod sorunlarını hızlı bir şekilde tespit etmenize yardımcı olur. Aynı zamanda, temanın WordPress’in kodlama standartlarına uyduğundan emin olun ve kontrol panelindeki W3C doğrulayıcısında herhangi bir HTML yapı hatası olup olmadığını kontrol edin.

Son olarak, farklı tarayıcılarda (Chrome, Firefox, Safari, Edge) ve cihazlarda (masaüstü, tablet, telefon) platformlar arası uyumluluk testleri yaparak tüm kullanıcıların tutarlı bir deneyim yaşamasını sağlayın.

Özetle.

Modern WordPress tema geliştirme, bir fikir devrimidir; süreç odaklı PHP şablonlarının yazımından, daha modern ve kullanıcı dostu yaklaşımlara doğru bir geçişi temsil etmektedir.theme.jsonBlok etiketleri ve tüm siteyi düzenleyebilme özelliklerine dayanan, deklaratif (belirtilen kurallara göre çalışan) geliştirme yaklaşımı. Geliştiricilerin bu konularda ustalaşmaları gerekmektedir.theme.jsonKüresel stilin tanımlanması için yapılandırmalar kullanılır, sayfa yapısının oluşturulması için HTML blok şablonları kullanılır ve bunlar aracılığıyla…functions.phpİşlevsellik geliştirmeleri yapılmaktadır. Bu yaklaşım, özelleştirilmiş düzenlemelerin önündeki engelleri büyük ölçüde azaltmakta, içerik üreticilerine geniş bir tasarım özgürlüğü sunmakta; ancak aynı zamanda geliştiricilerden blok düzenleyici sistemini derinlemesine anlamalarını da beklemektedir. Yukarıda belirtilen temel beceri yollarını izleyerek, esnek, güçlü ve geleceğe yönelik WordPress temaları oluşturabileceksiniz.

Sıkça Sorulan Sorular.

### geliştirme bloğu teması için hala PHP bilgisine ihtiyaç var mı?
Evet, hala gerekiyor. Sayfanın ana yapısı HTML şablonları tarafından tanımlanmasına rağmen…functions.phpDosyalar, tema özelliklerinin eklenmesi, stil betiklerinin kaydedilmesi, kancaların ve filtrelerin kullanılarak derinlemesine özelleştirme yapılması açısından hala gereklidir. Ayrıca, dinamik ve özelleştirilmiş sorgulara dayalı şablon bileşenlerinin oluşturulması veya karmaşık iş mantığının işlenmesi sırasında PHP bilgisi hayati öneme sahiptir.

Blok temaları ve geleneksel temalar bir arada var olabilir mi?

Tabii ki. WordPress, tema türünü otomatik olarak belirler. Eğer temanızın kök dizini belirli dosyalar içeriyorsa…theme.jsonDosyalar ve…templates/partsWordPress, klasör içindeki blok şablonlarını blok temaları olarak tanır ve tüm sitenin düzenlenebilmesini sağlar. Ancak bu dosyalar mevcut olsa bile, geleneksel temanın PHP şablon sistemini yedek olarak korur. Eğer bir isteğe karşılık gelen blok şablonu mevcut değilse, sistem otomatik olarak ilgili PHP şablonunu kullanmaya devam eder.single.php）。

Blok temamıma özel CSS nasıl eklerim?

Esas olarak üç yöntem vardır. En tavsiye edilen yöntem şudur:theme.jsonDosyalarınstylesBazı CSS öğeleri, hem genel olarak hem de belirli bloklar üzerinde etki göstermek üzere eklenir. Ayrıca, temanın içinde de bu değişiklikler yapılabilir.style.cssDosyaya ekstra stil kuralları ekleyin. Daha dinamik veya belirli sayfalar için stiller de aynı şekilde oluşturulabilir.functions.phpÇince'de kullanılır.wp_add_inline_styleFonksiyonlara içeriden özel stiller ekleyin veya bloklar için doğrudan özelleştirilmiş stiller tanımlayın.

Tüm siteyi düzenleme modu, mevcut web siteleri için risk taşır mı?

Mevcut içeriğe sahip bir web sitesinde, tamamen yeni bir tema kullanmaya geçerken dikkatli olmak gerekir. Önerimiz, temanın kapsamlı bir şekilde test edilmesi için önce bir test ortamında (örneğin yerel geliştirme ortamında veya geçici bir sitede) çalışmaları yapmaktır. Bu sayede, yeni temada tüm mevcut içeriklerin doğru bir şekilde görüntülendiğinden ve düzenin bozulmadığından emin olabilirsiniz. Dönüşüm öncesinde, tüm web sitesinin (dosyalar ve veritabanı dahil) yedeklenmesi şarttır. Site genelindeki düzenleme araçları oldukça güçlüdür; ancak bu araçlar doğrudan şablonları değiştirir ve yanlış kullanımlar, bu şablonu kullanan tüm sayfaları etkileyebilir.