Tema Özelleştirme

Görünüm → Özelleştir sabit bir ekran değil; her açılışta üretilir. jekcms önce aktif temanın theme.json dosyasını okur. Üstüne, her temanın istesin istemesin aldığı bir kontrol kümesini ekler. Sonucu da yanında canlı önizlemesi olan sekmeli bir panel olarak çizer.

Burada değiştirdiğiniz hiçbir şey tema dosyasına dokunmaz. Değerler veritabanına, tema kısa adına göre yazılır; bu yüzden bir tema güncellemesi emeğinizi silmez ve temadan çıkıp geri döndüğünüzde ayarlarınız sizinle gelir.

Özelleştirici lisansa bağlı bir özelliktir. Ücretsiz kurulumda ekran açılmaz.

Panel nereden geliyor

Bir tema, sekmelerini ve alanlarını theme.json içindeki customizer.tabs altında bildirir:

{
    "customizer": {
        "tabs": {
            "branding": {
                "label": { "tr": "Marka", "en": "Branding" },
                "icon": "palette",
                "fields": {
                    "accent": {
                        "type": "color",
                        "label": "Vurgu rengi",
                        "default": "#2563eb",
                        "css_var": "--color-accent"
                    }
                }
            }
        }
    }
}

Her sekmede bir label (düz metin ya da {tr, en} çifti), isteğe bağlı bir icon ve description, bir de fields haritası bulunur. jekcms ile gelen her temanın kendi kümesi vardır; tipik olarak branding, appearance, menu, homepage, single, footer ve advanced.

Hiç sekme bildirmeyen bir tema evrensel varsayılan şemaya düşer - marka, tipografi, düzen ve gelişmiş - yani özelleştirici hiçbir zaman boş kalmaz.

Alan türleri

| Tür | Nasıl çizilir | |---|---| | color | Onaltılık kutusu olan renk seçici; otomatik olarak koyu mod ikizi kazanır | | font | Her seçeneğin kendi yazı tipiyle gösterildiği açılır liste | | range (ya da number) | min, max, step ve unit değerlerine saygı duyan, değeri anlık gösteren kaydırıcı | | toggle (ya da checkbox) | Açma/kapama anahtarı | | select | Liste ya da anahtar→etiket haritasından açılır liste | | choice_cards | Her seçeneğin küçük bir CSS maketini taşıyan radyo kartları | | textarea | Çok satırlı metin kutusu | | code | Tek aralıklı kutu; language türü belirler | | image | Önizlemesi ve medya kütüphanesine bağlantısı olan metin alanı | | url, text | Tek satırlık girdiler |

Tanınmayan bir type hata vermez, düz metin kutusu olarak çizilir; yani theme.json içindeki bir yazım hatası size bir kontrole mal olur, ekranın tamamına değil.

Bir alan type, label ve default dışında şunları da taşıyabilir. help metni ve placeholder doğrudan arayüze yazılır. depends_on, alanı yalnız başka bir alan belirli bir değeri aldığında gösterir. optional, alanı bir "Özelleştir" kutusunun arkasına alır. emit_saved_only ise kullanıcı bir şey kaydedene kadar sayfaya hiçbir şey yazmaz.

Şablonda değeri okumak

<?php $layout = theme_option('menu.layout', 'classic'); ?>

Anahtar sekme.alan biçimindedir; ikinci argüman sizin yedeğinizdir. Kaydedilmemiş ya da boş metin olarak kaydedilmiş bir alan o yedeği döndürür - özelleştiricinin her yerinde gördüğünüz "Tema varsayılanı" seçeneğinin arkasındaki mekanizma budur: boş, karışma demektir.

Bunun için theme_option() dışında bir fonksiyona ihtiyacınız yok. O, her temanın kendi functions.php dosyasında tanımladığı ve theme.json içindeki durağan settings bloğunu okuyan theme_setting() ile karıştırılmamalı - theme_setting() temaya gömülü varsayılanları verir, kullanıcının düzenleyebildiği bir şeyi değil.

Kaydedilen değerden CSS değişkenine

Çoğu zaman değerleri PHP'de hiç okumazsınız. css_var bildiren bir alan otomatik olarak özel özellik olarak basılır ve stil dosyanız onu tüketir.

<head>
    …
    <?php output_theme_customization_css(); ?>
</head>

Gelen her tema bunu üst bilgi şablonunda zaten çağırıyor. Fonksiyon şemayı baştan sona tarar ve css_var taşıyan her alanı alır. Değeri türüne göre biçimlendirir: renkler onaltılık kalıba karşı doğrulanır, kaydırıcılara unit eklenir, yazı tipleri tam bir aile yığınına dönüşür. Sonunda tek bir <style id="theme-customization"> bloğu basar:

<style id="theme-customization">
:root {
    --color-accent: #dc2626;
    --font-heading: 'Fraunces', Georgia, serif;
    --container-max: 1200px;
}
</style>

Stil dosyanız da onları kullanır:

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

css_var bir ad dizisi de olabilir; o zaman hepsi yazılır. Aynı fikri farklı adlandırmış temaları tek bir kontrolün sürmesi böyle sağlanır. Fonksiyon ayrıca vurgu zeminleri için okunabilir metin rengini kendisi türetir: --color-accent değeri, kimse tanımlamadan eşlik eden bir --color-accent-ink üretir.

Aynı blok, evrensel stüdyoların ürettiği stilleri ve en sonda sizin Özel CSS'inizi de taşır - yani orada yazdığınız bir kural üstündeki her şeyi yener.

Aynı işi iki kez yapmadan koyu mod

Bir tema koyu mod seçicisi bildiriyorsa - varsayılanı [data-theme="dark"] - css_var taşıyan her renk alanı sessizce bir koyu eş kazanır. Özelleştirici ikisini yan yana gösterir; açık değer :root bloğuna, koyu değer temanın koyu seçicisi altındaki bloğa yazılır ve bu blok temanın kendi koyu kurallarından sonra basıldığı için eşit özgüllükte kazanır.

Koyu değeri boş bırakırsanız hiçbir şey yazılmaz: temanın kendi koyu paleti işini yapmaya devam eder. Bir tema "dark_selector": "media" diyerek prefers-color-scheme üzerinden çalışabilir ya da false diyerek bu mekanizmanın tamamının dışında kalabilir.

Her temanın aldığı kontroller

Tema ne bildirirse bildirsin, çekirdek kendi kontrollerini ekler. Bunlar temanın alanlarıyla çakışmaz: bir kontrol ancak tema aynı iş için kendi alanını tanımlamamışsa eklenir. Kontrol "Tema varsayılanı" derken ya da boş bırakıldığında da sayfaya hiçbir şey yazmaz.

Renkler, temanın kendisinin sunmadığı sekiz renk rolünü tamamlar - birincil, ikincil, metin, soluk metin, zemin, yüzey, çerçeve, bağlantı - her biri koyu ikiziyle. Tipografi, kırk civarı Google yazı tipinden oluşan küratörlü bir kütüphaneden başlık ve gövde yazı tipi, başlık kalınlığı, harf biçimi, harf aralığı ve yazı metni sütun genişliği ekler. Marka, üst bilgi ve alt bilgi için ayrı logo yüksekliği kaydırıcıları kazanır.

Bunların üstünde stüdyolar var: üst çubuk ve duyuru şeridi, ana menü tasarımı, butonlar, üst ve alt bilgi renkleri, kart tasarımı, paylaşım çubuğu, yorum bölümü tasarımları, kenar çubuğu, yazı sayfası ve arşiv. Her biri, alanlarını ilgili sekmeye enjekte eden bir çekirdek modülüdür; her temada aynı davranmalarının sebebi budur.

Bölümler, sıra ve cihaz görünürlüğü

Temalar sayfalarını sırası değiştirilebilir bölüm kartları olarak bildirir - manşet, son yazılar, kategori şeritleri - ve bunlar özelleştiricinin sayfa sekmelerinde durur. Kartı sürükleyip taşıyın, kapatın, bir varyant seçin ya da dişlisini açıp bölüme özel ayarlara girin.

Her dişli panelindeki ilk ayar cihaz görünürlüğü: tüm cihazlar, yalnız masaüstü ya da yalnız mobil. CSS ortam sorgularıyla uygulanır; yani bir bölümü telefonda gizlemek, göründüğü cihazlardaki düzeni bozmaz.

Canlı önizleme

Her bölüm grubunun yanındaki önizleme düğmesi, gerçek sitenizi kaydedilmemiş değişiklikleriniz uygulanmış hâlde açar. Taslağı yalnız sizin yönetim oturumunuz görür; siz Kaydet'e basana kadar ziyaretçiler kayıtlı düzeni görmeye devam eder. Masaüstü, tablet ve mobil genişlik düğmeleri, bir cihaz görünürlüğü kuralını kesinleştirmeden önce her iki tarafı da kontrol etmenizi sağlar.

Özel CSS ve özel HTML

Gelen her temanın Gelişmiş sekmesinde üç kod alanı bulunur.

Özel CSS, özelleştirme stil bloğunun en sonuna eklenir; bu da onu bir sonraki tema güncellemesinde kaybetmek istemediğiniz tek seferlik ezmeler için doğru yer yapar. Ek <head> HTML'i tam </head> etiketinden önce basılır - doğrulama meta etiketleri, analitik kodları, kendiniz yüklediğiniz bir yazı tipi. Ek alt bilgi HTML'i ise </body> öncesine gider; sohbet bileşenleri ve geç yüklenen betikler için.

İki HTML alanı da yazdığınız gibi basılır. Hiçbiri temizlenmez, hiçbiri doğrulanmaz; yani yalnız anladığınız kodu yapıştırın ve burada bırakılan bozuk bir etiketin sitedeki her sayfayı bozacağını unutmayın.