Tema Özelleştirme

Temaya renk, yazı tipi, logo, kenar çubuğu konumu gibi ayarlarla müdahale etmek istiyorsanız, dosyalara dokunmadan bunu yapabileceğiniz bir yer var: tema özelleştirici. Değişiklikleriniz veritabanına siteye özgü kaydedilir, tema dosyaları hiç değişmez. Bu yüzden temanın yeni bir sürümünü yüklediğinizde özelleştirmeleriniz silinmez.

Özelleştiriciyi açmak

Appearance → Customize ile paneli açarsınız (admin/theme-customize.php). Solda aktif temanın tanımladığı sekmeler, sağda canlı önizleme vardır. Bir değeri değiştirdiğinizde önizleme tazelenir.

Temanız sekme tanımlamamışsa bile yerleşik Custom CSS ve Custom HTML sekmelerini görürsünüz — bunlar her zaman vardır.

Sekmeler nereden geliyor?

Her tema kendi özelleştirici arayüzünü kendisi tasarlar. theme.json dosyasında şöyle bir blok vardır:

{
    "customizer": {
        "tabs": {
            "branding": {
                "label": "Branding",
                "icon": "palette",
                "fields": {
                    "accent": {
                        "type": "color",
                        "label": "Accent color",
                        "default": "#2563eb",
                        "css_var": "--color-accent"
                    },
                    "logo": {
                        "type": "url",
                        "label": "Logo URL",
                        "default": ""
                    }
                }
            }
        }
    }
}

Her sekmenin bir başlığı (label), opsiyonel ikonu (Lucide set'inden), opsiyonel açıklaması ve bir alan listesi var. Yani temanızda hangi seçeneklerin düzenlenebilir olduğunu siz belirliyorsunuz.

Alan tipleri

Desteklenen alan tipleri şunlar:

| Tip | Ne render eder | Nasıl saklanır | |---|---|---| | color | Hex girişli renk seçici | #rrggbb | | font | Google Fonts açılır menü + ağırlık | {"family": "...", "weight": "..."} | | range | Kaydırıcı (min, max, step, unit) | Sayı | | toggle | Aç-kapa anahtarı | Boolean | | select | options'tan açılır menü | Seçim anahtarı | | textarea | Çok satırlı metin girişi | Dize | | code | Sözdizimi vurgulamalı textarea | Dize | | url | Doğrulamalı URL girişi | Dize | | text | Tek satır metin girişi | Dize |

Şablonda değerleri kullanmak

Tema dosyalarınızın içinde kullanıcının seçtiği değere theme_option('tab.field') ile ulaşırsınız:

<?php $accent = theme_option('branding.accent'); ?>
<a href="..." style="color: <?= htmlspecialchars($accent) ?>">Link</a>

Anahtar biçimi {sekme_adı}.{alan_adı}. Kullanıcı bir değer seçmemişse theme.json'daki default değer dönüyor.

Otomatik CSS değişkenleri — en kolay yol

Çoğu durumda theme_option() fonksiyonuna bile ihtiyacınız yok. Alan tanımına css_var eklerseniz, jekcms o değeri otomatik olarak :root içinde bir CSS değişkeni olarak yayınlar.

<head> içinde bir kere şunu çağırın:

<head>
    <!-- ... -->
    <?php output_theme_customization_css(); ?>
</head>

Bu şuna benzer bir şey üretir:

<style id="theme-customization">
    :root {
        --color-accent: #2563eb;
        --font-body: 'Inter', sans-serif;
        --layout-max-width: 1200px;
    }
</style>

Sonra CSS dosyanızda sadece değişkene referans verirsiniz:

.btn-primary { background: var(--color-accent); }

Kullanıcı accent rengini değiştirdiğinde inline <style> bloğu güncellenir, butonun rengi anında değişir. Ne dosya düzenleme, ne derleme, ne önbellek temizleme.

Küçük bir senaryo

Siteyi ziyaret eden biri için olan şey şu:

Temanın theme.json dosyası branding.accent varsayılanını #2563eb yazmış
Admin Customize → Branding → Accent color açıp #dc2626 seçiyor
Değer veritabanına kaydediliyor
Sonraki sayfa render'ında output_theme_customization_css() --color-accent: #dc2626 yayınlıyor
var(--color-accent) kullanan her şey — butonlar, linkler, odak halkaları — kırmızıya dönüyor

Tema klasörüne el sürmeden.

Özel CSS

Tema sekmelerinin yanında yerleşik Advanced → Custom CSS sekmesi var. Temanın CSS'inden sonra yüklenen serbest bir alandır. "Şu butona özel bir kenar koymak istiyorum" gibi tek seferlik ince dokunuşlar için temanın kendisini kurcalamadan buraya yazarsınız:

/* Custom CSS tab */
.site-header { border-bottom: 2px solid var(--color-accent); }

Özel HTML — analitik ve takip kodları

Advanced → Custom HTML iki yer açar:

Head — </head>'den hemen önce eklenir. Google Analytics, site doğrulama meta etiketi, web font bağlantıları için.
Footer — </body>'den hemen önce eklenir. Sohbet widget'ları, geç yüklenen script'ler için.

Her ikisi de olduğu gibi render edilir — jekcms temizlemez, filtrelemez. Sadece güvendiğiniz kodları yapıştırın. Bilmediğiniz bir yerden kopyalanmış script'leri buraya koymak sitenizi açık hedef yapar.

Karanlık mod

Kullanıcı karanlık moda geçtiğinde jekcms HTML kökünde data-theme="dark" özelliğini aktif eder. Stil dosyanızda karanlık değerleri ayrıca yazarsınız:

:root { --color-bg: #ffffff; }
html[data-theme="dark"] { --color-bg: #0f172a; }

Özelleştiricinin kendisi karanlık mod için ayrı bir alan seti göstermez. Temalar genelde karanlık değerleri CSS içinde açık değerlerden hesaplar ya da iki farklı css_var tanımıyla ikisini de yayınlar — tasarım tercihi size kalmış.