WordPress theme.json İzahı: settings, styles və Kaskad

theme.json blok temanın kök qovluğunda yerləşən tək bir konfiqurasiya faylıdır və iki ayrı iş görür: settings blok redaktorun istifadəçiyə nə təklif edəcəyini, styles isə saytın standart olaraq necə görünəcəyini müəyyən edir. WordPress faylı oxuyur, onu öz standartları və Sayt Redaktorunda yadda saxlanan hər şeylə birləşdirir, nəticəni isə hər səhifədə CSS custom property-lər plus daxili stil faylı şəklində çıxarır.

Bu iki işi bir-birinə qarışdırmaq — theme.json redaktələrinin əksəriyyətinin heç bir nəticə verməməsinin əsas səbəbidir. settings altında rəng elan etmək həmin rəngi heç yerə tətbiq etmir. Sadəcə bir dəyişən və redaktor yan panelində bir rəng nümunəsi yaradır.

Yuxarı səviyyə açarlar

Minimal fayl belə görünür:

{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 3,
  "settings": {},
  "styles": {},
  "templateParts": [],
  "customTemplates": []
}

Açar	Nə işə yarayır
$schema	Yalnız kod redaktorunda avtotamamlama və yoxlama üçündür. WordPress onu nəzərə almır.
version	WordPress-ə faylı hansı sxem quruluşu ilə oxuyacağını bildirir. Tema versiyanız deyil.
settings	CSS dəyişənləri yaradır və redaktorun nə göstərəcəyini müəyyən edir.
styles	Real standart stilləri tətbiq edir.
templateParts	parts/ qovluğundakı hissələri və hansı sahəyə aid olduqlarını elan edir.
customTemplates	templates/ qovluğundakı səhifə şablonlarını yazı redaktoru üçün qeydiyyata alır.

version insanları çaşdırır, çünki tema versiya nömrəsinə oxşayır. Amma deyil. O, oxuma rejimini seçir və köhnə WordPress buraxılışları tanımadıqları sxem quruluşundan gələn açarları səssizcə buraxır. Köhnə quraşdırmaları dəstəkləyirsinizsə, yeni açarların özünü düzgün aparacağını güman etmək əvəzinə həmin quraşdırmaların başa düşdüyü versiyanı hədəfləyin. Yazıldığı vaxt versiya 3 aktualdır; versiya 2 hələ də geniş yayılıb və hələ də oxunur.

$schema WordPress tərəfindən yerləşdirilən sxem ünvanına işarə edir. Onu trunk üzərinə bağlamaq kod redaktorunuzda ən yeni ipucularını verir; bilərəkdən köhnə sxemdə qalırsınızsa, versiyaya bağlı ünvan daha təhlükəsizdir.

settings: redaktorun nə təklif etdiyi

settings altındakı hər şey bir CSS custom property, əksər hallarda isə həm də redaktorda bir kontrol yaradır. settings altında heç nə heç bir şeyi stilləşdirmir.

{
  "settings": {
    "color": {
      "palette": [
        { "slug": "brand", "color": "#1f4ed8", "name": "Brand" },
        { "slug": "ink", "color": "#111827", "name": "Ink" }
      ],
      "custom": false
    },
    "typography": {
      "fontSizes": [
        { "slug": "small", "size": "0.875rem", "name": "Small" },
        { "slug": "large", "size": "1.5rem", "name": "Large" }
      ]
    },
    "layout": {
      "contentSize": "680px",
      "wideSize": "1200px"
    }
  }
}

Bu, preset yolu və slug əsasında adlandırılmış dəyişənlər yaradır:

--wp--preset--color--brand
--wp--preset--color--ink
--wp--preset--font-size--small
--wp--preset--font-size--large

Həmçinin .has-brand-color və .has-brand-background-color kimi köməkçi siniflər də yaranır — redaktor seçilmiş rəngi bloka məhz bunlarla tətbiq edir.

"custom": false sətri settings bölməsinin digər yarısıdır: seçimləri söndürmək. Onu qoyan kimi sərbəst rəng seçici yox olur və istifadəçiyə yalnız sizin palitranız qalır. Eyni yanaşma hər yerdə işləyir — settings.typography.customFontSize, settings.spacing.customSpacingSize, settings.border və s. settings altında heç nə bəzək üçün deyil; hər açar ya dəyişən əlavə edir, ya kontrol əlavə edir, ya da kontrol silir.

settings.custom isə öz dəyişənləriniz üçün sərbəst formatlı bir bölmədir:

{
  "settings": {
    "custom": {
      "lineHeight": { "body": 1.6 },
      "shadow": { "card": "0 1px 3px rgba(0,0,0,0.12)" }
    }
  }
}

Bunlar --wp--custom--line-height--body və --wp--custom--shadow--card şəklinə düşür. Çevrilməyə diqqət edin: camelCase açarlar kebab-case-ə bölünür, iç-içə quruluş isə ikiqat tire ilə birləşdirilir. Dəyişən adını səhv yazmaq dəyərin səssizcə geri düşməsinin ən çox rast gəlinən səbəbidir.

Parametrləri blok üzrə məhdudlaşdıra bilərsiniz — düymələrdə rəng seçicisinə icazə verib abzaslarda qadağan etmək məhz belə edilir:

{
  "settings": {
    "blocks": {
      "core/paragraph": {
        "color": { "custom": false, "customGradient": false }
      }
    }
  }
}

styles: əslində nəyin göstərildiyi

Dəyərlər styles bölməsində tətbiq olunur. Quruluşu redaktorun quruluşunu təkrarlayır: kök səviyyə, sonra elements, sonra blocks.

{
  "styles": {
    "color": {
      "background": "var(--wp--preset--color--base)",
      "text": "var(--wp--preset--color--ink)"
    },
    "typography": {
      "lineHeight": "var(--wp--custom--line-height--body)"
    },
    "elements": {
      "link": {
        "color": { "text": "var(--wp--preset--color--brand)" },
        ":hover": { "typography": { "textDecoration": "none" } }
      }
    },
    "blocks": {
      "core/quote": {
        "typography": { "fontStyle": "italic" },
        "spacing": { "padding": { "left": "var(--wp--preset--spacing--40)" } }
      }
    }
  }
}

Kök səviyyədəki styles gövdəyə düşür. elements blok olmayan HTML primitivlərini əhatə edir — keçid, düymə, başlıqlar, şəkilaltı yazı. blocks isə konkret blok növünü adı ilə hədəfləyir.

Dürüst məhdudiyyət: styles CSS-in ifadə edə bildiyi hər şeyi ifadə edə bilmir. Öz media query-lərinizi yazmaq mümkün deyil, mürəkkəb selektorlar yoxdur, animasiya yoxdur, dəstəklənən psevdo-sinif vəziyyətləri isə çox azdır. Axıcı tipoqrafiya və layout əsaslı ölçülər insanların breakpoint üçün istifadə etdiyi işlərin böyük hissəsini əvəz edir, amma hamısını yox. İstehsalata çıxan blok temaların əksəriyyəti theme.json ilə yanaşı kiçik bir stil faylı da daşıyır və bu, uğursuzluq deyil, normal nəticədir.

settings ilə styles tələsi

Ən çox verilən dəstək sualı bu cümlənin bu və ya digər variantıdır: “brend rəngimi əlavə etdim, heç nə dəyişmədi.”

Düzdür. Onu settings.color.palette bölməsinə əlavə etməklə --wp--preset--color--brand dəyişənini və bir rəng nümunəsi yaratdınız. Heç nə tətbiq olunmadı. Onu standart keçid rəngi etmək üçün styles altında da yazmalısınız:

{
  "settings": {
    "color": {
      "palette": [{ "slug": "brand", "color": "#1f4ed8", "name": "Brand" }]
    }
  },
  "styles": {
    "elements": {
      "link": { "color": { "text": "var(--wp--preset--color--brand)" } }
    }
  }
}

Belə oxuyun: settings istifadəçiyə uzatdığınız boya qutusudur, styles isə o gəlməmişdən əvvəl özünüzün vurduğunuz astardır.

Kaskad, ən aşağıdan ən yuxarıya

Saytın tema faylını “saymaması” məhz bu hissə ilə izah olunur. WordPress CSS çıxarmadan əvvəl bir neçə qatı birləşdirir:

1. WordPress nüvə standartları — nüvə öz theme.json faylı ilə gəlir: baza palitra, şrift ölçüləri və boşluq şkalası.
2. Valideyn temanın theme.json faylı
3. Child temanın theme.json faylı — valideynin üzərinə bütöv fayl kimi deyil, açar-açar birləşdirilir.
4. Verilənlər bazasında saxlanan Global Styles — Sayt Redaktorunun Styles panelinin yazdığı şey.
5. Ayrı-ayrı bloklardakı blok stilləri — yazı məzmununda saxlanan atributlar, sətiriçi stil və ya sinif kimi göstərilir.

Saytları sıradan çıxaran 4-cü qatdır. Kimsə Styles panelini açıb yadda saxlayan andan WordPress bir Global Styles qeydi saxlayır və həmin qeyd özündə saxladığı hər xüsusiyyət üçün sizin faylınızı üstələyir. Bundan sonra theme.json faylını redaktə etmək həmin xüsusiyyətlər üçün gözlə görünən heç nəyi dəyişmir — sayt yerləşdirmədən sonra da eyni qalır, halbuki diskdəki fayl açıq-aydın fərqlidir.

Həll yolu !important ilə vəziyyəti gərginləşdirmək deyil, saxlanmış qeydi təmizləməkdir. Sayt Redaktorunu açın, Styles bölməsinə keçin, düzəlişlər panelini açın və temanın standartlarına sıfırlayın. Əvvəlcə müştəri və ya sayt sahibi ilə razılaşdırın — sıfırlama onların fərdiləşdirmələrini silir, bu isə pulsuz əməliyyat deyil, real itkidir.

İkinci şübhəli keşdir. WordPress hər sorğuda faylı yenidən oxumaq əvəzinə emal olunmuş theme.json məlumatlarını keşləyir; bu, istehsalatda tam istədiyiniz, işləyərkən isə heç istəmədiyiniz davranışdır. WP_DEBUG aktivləşdirilməsi, yaxud yeni buraxılışlardakı tema hazırlama rejimi parametri WordPress-i faylı hər dəfə yenidən oxumağa məcbur edir. Redaktələriniz yalnız yerləşdirmədən və ya keş təmizləməsindən sonra görünürsə, məsələ elə budur.

templateParts və customTemplates

Hər ikisi temanızda artıq mövcud olan faylları təsvir edən massivlərdir.

{
  "templateParts": [
    { "name": "header", "title": "Header", "area": "header" },
    { "name": "footer", "title": "Footer", "area": "footer" }
  ],
  "customTemplates": [
    { "name": "page-wide", "title": "Wide Page", "postTypes": ["page"] }
  ]
}

name faylın uzantısız adına uyğun gəlir — parts/header.html, templates/page-wide.html. area dəyəri vacibdir: hissənin header və ya footer landmark elementinə bükülüb-bükülməyəcəyini və redaktorun onu necə qruplaşdıracağını müəyyən edir. Onu yazmasanız, hissə kateqoriyasız sayılır.

customTemplates isə şablonun yazı redaktorundakı şablon siyahısında görünməsini təmin edir. Bu qeyd olmadan fayl mövcuddur, amma heç kim onu seçə bilmir.

Sürətli diaqnostika ardıcıllığı

Blok tema faylda yazıldığı kimi stilləşmirsə, heç nəyə toxunmadan əvvəl bu ardıcıllıqla gedin:

1. Səhifənin mənbə koduna baxın və yaradılmış global stil blokunu axtarın. Dəyişəniniz orada yoxdursa, problem settings bölməsində və ya slug səhvindədir.
2. Dəyişən var, amma istifadə olunmursa, problem əskik styles qeydidir.
3. Hər ikisi var, amma nəsə onları üstələyirsə, saxlanmış Global Styles qeydini yoxlayın.
4. Yalnız bundan sonra öz stil faylınıza, plaginlərə və ya kaskadda daha gec CSS yeridən səhifə qurucusuna baxın.