Bu seride klasik bir WordPress temasını küçük adımlarla kuruyoruz. İlk derste tema klasörünü, style.css kimlik bilgisini ve temel dosya yapısını hazırlayacağız. Eski HTML şablonunu olduğu gibi taşımak yerine WordPress’in şablon ve kaynak yükleme mantığını baştan kurmak sonraki dersleri kolaylaştırır.

Klasik tema ile blok tema farkı

Bu ders PHP şablonları kullanan klasik tema içindir. Blok temada templates içindeki HTML şablonları ve theme.json önemli rol oynar. İki yaklaşımın dosyalarını rastgele karıştırmayın. Buradaki amaç temel mantığı öğrenmek; mevcut sitenizin aktif temasını doğrudan yeniden yazmak değildir.

İlk dosyaları hazırlayın

wp-content/themes içinde ders-temasi adlı bir klasör açın. En küçük klasik tema için style.css ve index.php gerekir. Daha düzenli bir başlangıçta functions.php, header.php ve footer.php de oluşturulur. HTML tasarımın CSS ve JavaScript dosyalarını assets altında tutabilirsiniz.

CSS başlığını style.css dosyasına; PHP bölümünü functions.php açılış etiketinden sonra ekleyin.

/* style.css dosyasının başına */
/*
Theme Name: Ders Teması
Version: 1.0.0
Text Domain: ders-temasi
*/

// functions.php içindeki PHP kodu:
add_action('wp_enqueue_scripts', function () {
    wp_enqueue_style('ders-temasi', get_stylesheet_uri(), [], '1.0.0');
});

Tema kimliği ve kaynak yükleme

style.css başındaki açıklama WordPress’in temayı tanımasını sağlar. CSS dosyasını header.php içine sabit bir adresle yazmak yerine wp_enqueue_style ile yükleyin. Böylece sürüm bilgisi ve diğer kaynaklarla ilişki yönetilebilir. Aşağıdaki iki kodu belirtilen ayrı dosyalara koyun.

İlk deneme

Görünüm → Temalar ekranında temanın listelendiğini kontrol edin. Deneme sitenizde etkinleştirin; boş bir index.php içerik göstermez, bu beklenen durumdur. Sonraki derste döngü ve yerleşimi kuracağız. Var olan temaya geçmeden önce yedeğinizi alın ve dosya adlarının küçük harfle doğru yazıldığını kontrol edin.

Önceki uygulamadan ekran görüntüleri

Bu görseller ilk anlatımdaki gerçek uygulama örnekleridir. Dosya bağlantıları korunmuştur; güncel arayüz ve ayarlar farklı görünebilir.

wodpress-tema-yapimi Örnek yerleştirme görünümü..

Kaynak ve devam

Güncel işlev ve seçenekler için resmî kaynağı inceleyin. Kodlar örnek uygulamalardır; temanızda veya eklentinizde aynı işlevin zaten bulunup bulunmadığını kontrol edin.

İlgili okumalar