WordPress Tema Geliştirme Başlangıç Kılavuzu: Sıfırdan Özel Temalar Oluşturmak

WordPress Tema Geliştirme Temel Kavramları

Kod yazmaya başlamadan önce, bir WordPress temasının temel yapısını anlamak son derece önemlidir. Bir WordPress teması, esasen `wp-content/themes/` dizininde bulunan bir klasördür ve bu klasörde, web sitesinin görünümünü ve işlevlerini belirleyen bir dizi özel isimli dosya bulunur. WordPress çekirdek sistemi bu dosyaları okur ve veritabanındaki içerikleri (makaleler, sayfalar vb.) temasın stil ve yapısıyla birleştirerek kullanıcıların gördüğü web sayfalarını oluşturur.

En temel bir tema en az iki dosyaya ihtiyaç duyar: `index.php` ve `style.css`. `index.php`, temanın ana şablon dosyasıdır; `style.css` ise yalnızca CSS stillerini içermekle kalmaz, aynı zamanda dosyanın baş kısmındaki yorumlar temanın meta bilgilerini (tema adı, yazar, açıklama vb.) de barındırır. WordPress’in bir temayı tanımasının tek yolu budur.

Temel dosyaların yanı sıra, tema geliştirme aynı zamanda bir dizi şablon dosyasını da içerir ve bu şablon dosyaları “şablon hiyerarşisi” sistemine göre düzenlenmiştir. Bu, WordPress’in mevcut sayfa türüne (örneğin ana sayfa, tek bir makale, arşiv sayfası) göre sayfayı renderlemek için en uygun şablon dosyasını otomatik olarak seçeceği anlamına gelir. Örneğin, tek bir makaleye erişildiğinde, WordPress sırasıyla `single-post-{slug}.php`, `single-post-{id}.php`, `single-post.php` dosyalarını arar ve son olarak genel kullanılan `singular.php` veya `index.php` dosyasını kullanır. Bu mekanizmayı anlamak ve kullanmak, esnek ve güçlü temalar oluşturmanın anahtarıdır.

İlk tema yapınızı oluşturun.

En basit temayı oluşturarak başlayalım; böylece temel dosyaları ve klasör yapısını daha iyi öğrenebiliriz.

Öncelikle, yerel WordPress kurulum dizininizin `wp-content/themes/` klasöründe `my-first-theme` adında yeni bir klasör oluşturun. Daha sonra bu klasörün içinde `style.css` adında bir dosya oluşturun ve dosyanın başına aşağıdaki gerekli yorum bilgilerini ekleyin:

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.

css
/*
Tema adı: İlk temam.
Tema URI’si: https://example.com/my-first-theme
Yazar: İsiminiz
Yazar URI’si: https://example.com
Açıklama: Bu, WordPress tema geliştirme işlemlerini öğrenmek için kullanılan basit bir temadır.
Sürüm: 1.0
License: GNU General Public License v2 or later
Metin Alanı: my-first-theme
*/
```

Ardından, `index.php` dosyasını oluşturun. Bu, tüm sayfalar için varsayılan geri dönüş (default return) şablonudur. İçine çok temel bir HTML yapısı yazabiliriz:

Tavsiye edilen okuma WordPress Tema Geliştirme Başlangıç Kursu: Sıfırdan İlk Özel Temanızı Oluşturun。

php
<!DOCTYPE html>
<html no numeric noise key 1000>
<head>
<meta charset="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php wp_head(); ?>
</head>
<body no numeric noise key 1000>

<?php
if ( have_posts() ) :
while ( have_posts() ) :
`the_post();`;
?>

<?php
`endwhile;`;
else :
`echo '`'<p>Henüz içerik yok.</p>';
Eğer böyleyse;
?>

<?php wp_footer(); ?>
</body>
\n
```

Bu iki dosyayı tamamladıktan sonra, WordPress arayüzünün “Görünüm” -> “Temalar” sayfasına gidin. Orada “İlk Temam” adlı temayı görmelisiniz. Bu temayı etkinleştirin; böylece web siteniz kendi oluşturduğunuz temayla çalışmaya başlayacaktır.

Temel şablon etiketlerini anlamak.

Yukarıdaki `index.php` kodunda, WordPress’in çekirdek “şablon etiketlerinden” bazılarını kullandık. Bunlar, dinamik içerikleri görüntülemek için kullanılan PHP fonksiyonlarıdır. Örneğin:
`bloginfo('name')`: “Ayarlar” -> “Genel” bölümünde ayarlanan web sitesi başlığını döndürür.
`the_title()`: Döngü içindeki mevcut makale veya sayfanın başlığını görüntüler.
`the_content()`: Döngü içindeki mevcut makale veya sayfanın tam içeriğini çıktı verir.
`have_posts()` / `the_post()`: Ana döngüyü kontrol etmek, gezmek ve mevcut makale verilerini ayarlamak için kullanılır.
`wp_head()` ve `wp_footer()`: WordPress çekirdeğinin, eklentilerin ve diğer komut dosyalarının sayfanın bölümüne ve altbilgisine kod enjekte etmesine izin veren çok önemli kancalardır.

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.

Genişletilmiş Tema Özellikleri ve Şablonları

Temel temalar yalnızca tüm sayfalarda aynı düzenle görüntülenebilir. Daha profesyonel bir web sitesi oluşturmak için, şablon hiyerarşisini kullanarak belirli sayfalar için şablonlar oluşturmamız ve ortak bölümleri modüler dosyalara ayırmamız gerekmektedir.

Başlık ve alt bilgi (footer) bileşenleri oluşturun.

`header` ve `footer` bölümlerini ayrı dosyalara ayırmak standart bir uygulamadır ve bu da kodun sürdürülebilirliğini artırır. `header.php` ve `footer.php` adlarında iki dosya oluşturun.

`index.php` dosyasındaki içerik…<body>`Etiketin` öncesindeki tüm kodları `header.php` dosyasına taşıyın.</body>Ve\n`Etiketin önündeki tüm kod (genellikle ``dan itibaren)`<footer>Başlangıç noktasından `footer.php` dosyasına gidin.

Tavsiye edilen okuma WordPress Tema Geliştirme Kılavuzu: Başlangıçtan Uzmanlığa。

Daha sonra, `index.php` dosyasını değiştirin ve `get_header()` ve `get_footer()` fonksiyonlarını kullanarak bu içerikleri sayfaya dahil edin:

php
<?php get_header(); ?>

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.

<?php
if ( have_posts() ) :
while ( have_posts() ) :
`the_post();`;
?>

<?php
`endwhile;`;
else :
`echo '`'<p>Henüz içerik yok.</p>';
Eğer böyleyse;
?>

<?php get_footer(); ?>
```

Diğer sayfa şablonları oluşturun.

Şimdi, farklı sayfa türleri için şablonlar oluşturabilirsiniz. Örneğin, tek bir makaleyi göstermek için `single.php` adında bir şablon oluşturabilirsiniz. Bu şablon `index.php`’dan kopyalanabilir; ancak kategoriler, etiketler, yazar bilgileri ve yorumlar gibi ek özellikler eklenerek daha ayrıntılı hale getirilebilir.

Tavsiye edilen okuma WordPress主题开发指南：从零开始构建自定义主题。

Statik bir sayfa göstermek için başka bir `page.php` dosyası oluşturun. Yaygın bir ihtiyaç, özelleştirilmiş bir ana sayfa oluşturmaktır; bunun için `front-page.php` adında bir dosya oluşturabilirsiniz. WordPress, bu dosyayı `home.php` veya `index.php` yerine web sitesinin ana sayfası olarak öncelikli olarak kullanacaktır.

Stil ve betikleri içe aktarma

正确的样式和脚本引入方式是通过`functions.php`文件，使用`wp_enqueue_style()`和`wp_enqueue_script()`函数。这确保了依赖关系管理，并避免了重复加载。

Konu dizininin kök klasöründe `functions.php` adlı bir dosya oluşturun ve ana stil şemasını içe aktarmak için aşağıdaki kodu ekleyin:

php
<?php
function my_first_theme_scripts() {
// Temanın ana stil şemasını içe aktar
wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), '1.0' );
// Google Fonts’u dahil edebilirsiniz.
wp_enqueue_style( 'my-first-theme-fonts', 'https://fonts.googleapis.com/css2?family=Open+Sans&display=swap', array(), null );
// Özel JavaScript dosyasını içe aktarın
wp_enqueue_script( 'my-first-theme-script', get_template_directory_uri() . '/js/main.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );
```

Aynı zamanda, bu dosyaya tema desteği özelliği de ekleyebilirsiniz; örneğin:
php
// Makale özel görsellerini destekler
`add_theme_support('post-thumbnails');`;
// Özelleştirilmiş bir Logo desteği vardır.
`add_theme_support('custom-logo');`;
// HTML5 işaretlerini destekler
`add_theme_support('html5', array('comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script'));`;
```

Konunun özelleştirilmesi ve optimizasyonu

Mükemmel bir tema sadece eksiksiz özelliklere sahip olmakla kalmamalı, aynı zamanda kullanıcılar tarafından kolayca özelleştirilebilmeli ve iyi bir performans göstermelidir.

WordPress Özelleştiricileri ile Entegrasyon

WordPress’ın Özelleştirici (Customizer) aracı, kullanıcıların temanın görünümünü gerçek zamanlı olarak önizlemesine ve değiştirmesine olanak tanır. `functions.php` dosyası aracılığıyla ayar seçeneklerini kolayca ekleyebilirsiniz. Örneğin, bir sayfa altı telif hakkı metni seçeneği ekleyebilirsiniz:

php
function my_first_theme_customize_register( $wp_customize ) {
// “Sayfa Altı Ayarları” bölümü ekleyin
$wp_customize->add_section( 'my_footer_section', array(
'title' => __( '页脚设置', 'my-first-theme' ),
'priority' => 160,
) );

// Bölüm içine bir ayar öğesi ekleyin.
$wp_customize->add_setting( 'footer_copyright_text', array(
'default' => '© 2026 我的网站。保留所有权利。',
'sanitize_callback' => 'sanitize_text_field',
'transport' => 'postMessage', // 支持实时预览
) );

// Ayar öğesine bir kontrol (giriş kutusu) ekleyin.
$wp_customize->add_control( 'footer_copyright_text', array(
'label' => __( '页脚版权文本', 'my-first-theme' ),
'section' => 'my_footer_section',
'type' => 'text',
) );
}
add_action( 'customize_register', 'my_first_theme_customize_register' );
```

Daha sonra, `footer.php` dosyasında `get_theme_mod()` fonksiyonunu kullanarak bu değeri ekrana yazdırın:
php

```

Yanıt verilebilirliği ve performansı garanti altına alın.

Modern temaların responsive (uyumlu) olması gerekmektedir. Bu, esas olarak CSS medya sorguları aracılığıyla sağlanır. `style.css` dosyanızdaki düzenlemelerin, cep telefonundan masaüstüne kadar çeşitli ekran boyutlarına uyum sağlayabilmesine dikkat edin.

Performans optimizasyonu için, CSS/JS ve resimleri sıkıştırmanın yanı sıra, tema geliştirme sürecinde aşağıdakilere dikkat edilmelidir:
1. Seçici Yükleme: Belirli JS dosyaları yalnızca ihtiyaç duyulan sayfalarda yüklenir (örneğin, yorum sayfasında `comment-reply.js` dosyası yüklenir).
2. Resim Optimizasyonu: `the_post_thumbnail()` ve ilgili fonksiyonları kullanırken, uygun resim boyutlarının oluşturulduğundan emin olun.
3. Veritabanı sorgularını azaltın: Transients API’sini kullanarak zaman alıcı sorguları önbelleğe alın ve şablonlarda gereksiz `WP_Query` işlemlerinden kaçının.

Özetle.

`style.css` ve `index.php` dosyalarını içeren temel bir klasör oluşturarak başlayarak, şablon hiyerarşisini anlamaya, şablon bileşenlerini ayırmaya, `functions.php` dosyası aracılığıyla işlevler ve stiller eklemeye ve son olarak kullanıcı seçenekleri sunmak için özelleştiriciler kullanmaya kadar, özelleştirilmiş bir WordPress teması oluşturma sürecinin tüm adımlarını tamamladınız. Tema geliştirmenin özü, WordPress’in verileri şablonlarla nasıl birleştirdiğini anlamak ve geniş fonksiyon kütüphanesi ile hook sistemini kullanarak esnek ve verimli web siteleri oluşturmaktır. Bu temelleri öğrendikten sonra, özel makale türleri oluşturma, araç çubuğu alanları geliştirme veya Gutenberg Blok Düzenleyicisi’ni destekleyen temalar oluşturma gibi daha ileri seviye temaları keşfedebilirsiniz. Pratik, öğrenmenin en iyi yoludur; sürekli deneyimleyerek ve değişiklikler yaparak kendinize özgü bir WordPress teması oluşturabilirsiniz.

Sıkça Sorulan Sorular.

WordPress teması geliştirmek için hangi ön bilgi gereklidir?

HTML ve CSS temellerine sahip olmanız gerekiyor; bunlar web sayfalarının yapısını ve görünümünü oluşturmanın temelidir. Ayrıca, WordPress tema dosyalarının çoğunlukla PHP kodundan oluştuğu ve verilerin dinamik olarak alınıp gösterilmesi için PHP’nin temel sözdizimini bilmek önemlidir. JavaScript hakkında temel bilgilere sahip olmak, etkileşimli özellikler eklemenize yardımcı olacaktır; ancak bu, başlamak için zorunlu değildir.

Yerel olarak temalar geliştirebilir miyim? Hangi ortama ihtiyacım var?

Temalı geliştirmelerin yerel olarak yapılması şiddetle tavsiye edilir. Bunun için bir yerel sunucu ortamı kurmanız gerekmektedir. En basit yöntem, XAMPP, MAMP (Mac) veya Local by Flywheel gibi entegre yazılım paketlerini kullanmaktır. Bu paketler, Apache/Nginx sunucularını, PHP’yi ve MySQL veritabanını tek seferde kurar; ardından sadece WordPress’i yükleyerek yerel geliştirmelere başlayabilirsiniz. İnternet bağlantısına ihtiyaç duymazsınız, bu da işlemlerin daha hızlı ve daha güvenli olmasını sağlar.

Temanın `functions.php` dosyası ve eklentiler arasında ne fark var?

`functions.php` dosyası genellikle, mevcut temanın görünümü ve işlevleriyle yakından ilgili özelliklerin eklenmesi veya değiştirilmesi için kullanılır. Tema değiştirildiğinde bu özellikler genellikle devre dışı kalır. Eklentiler ise, temadan bağımsız genel işlevlerin (örneğin iletişim formları, SEO optimizasyonu gibi) eklenmesi için kullanılır. Eğer bir özellik gelecekte tema değiştirildiğinde de korunması gerekiyorsa, bu özellik bir eklenti olarak geliştirilmelidir. Pratikte, büyük temaların `functions.php` dosyaları oldukça karmaşık ve geniş olabilir.

Nasıl temamı çok dilli (uluslararasılaştırılmış) hale getirebilirim?

你需要使用WordPress的国际化（i18n）功能。在代码中，所有需要翻译的文本字符串都应使用特定的函数进行包装，例如`__('文本', 'my-text-domain')`或`_e('文本', 'my-text-domain')`。然后在`functions.php`中使用`load_theme_textdomain()`函数来设置翻译文件的加载路径。最后，使用如Poedit这样的工具创建`.pot`模板文件，并让翻译人员生成不同语言的`.po`和`.mo`文件。

Bir sonraki adım, bundan sonra ne yapmalıyım?

Eğer bir WordPress web sitesi oluşturuyorsanız veya optimize ediyorsanız, performans optimizasyonu, eklenti yapılandırması ve tema özelleştirmesi ile ilgili konuları okumaya devam etmeniz önerilir.

Daha fazla okuma ve pratik bilgiler.

Aşağıdaki içerikler bu makalenin konusuyla ilgilidir ve daha fazla okumak için uygundur. Öncelikle mevcut sorununuza en yakın makaleden başlayın, sonra çevresel konulara doğru ilerleyin, genellikle daha iyi sonuçlar alırsınız.

WordPress Tema Geliştirme Başlangıç Kılavuzu: Sıfırdan Kendi Özel Temanızı Oluşturun

WordPress Tema Geliştirme Temel Kavramları