Un ghid cuprinzător pentru fișierul WordPress theme.json

A face modificări stilistice personalizate site-ului dvs. WordPress înseamnă, în general, editarea manuală a mai multor fișiere. În plus, dacă schimbați teme, va trebui să reconfigurați toate aceste setări de la zero. Acesta poate fi un proces consumator de timp.

Din fericire, când WordPress a lansat versiunea 5.8, a introdus un nou fișier theme.json . Acesta este un spațiu dedicat pentru stilizarea editorului de blocuri (și a blocurilor individuale) pe partea din față și din spate. Drept urmare, este mult mai ușor să gestionați stilurile pentru site-ul dvs.

În această postare, vom arunca o privire mai atentă la fișierul theme.json . Apoi, vom analiza câteva considerații cheie înainte de a vă arăta cum să editați fișierul theme.json .

Ce este theme.json în WordPress?

Fișierul theme.json este un mecanism care vă permite să configurați Editorul de blocuri cu un control mai mare. Este util pentru a face modificări stilistice la nivelul întregului site, deoarece puteți atribui stiluri implicite tuturor (sau unora) blocuri.

În esență, theme.json este o soluție care îmbunătățește capacitățile API-ului Block Editor. De exemplu, cu theme.json , veți dobândi capacitatea de a controla editorul în mod programatic. În plus, puteți integra un sistem de tip bloc. Acest lucru facilitează modul în care gestionați preferințele utilizatorului, temei și de bază.

Fișierul theme.json a fost introdus în același timp cu Editorul site-ului. Împreună, theme.json este unul dintre primii pași majori în gestionarea stilurilor pentru viitoarele versiuni WordPress. Este o modalitate excelentă de a obține mai mult control asupra temei (și site-ului), astfel încât să puteți face modificări meniurilor, antetelor și subsolurilor.

Pe scurt, Editorul de site vă permite să faceți o mulțime de modificări stilistice globale, în timp ce theme.json este mecanismul care vă permite să configurați opțiuni personalizate pentru blocurile dvs.

De exemplu, puteți redefini setările Editorului de blocuri pentru a ascunde sau afișa opțiuni de personalizare pentru anumiți utilizatori. În plus, puteți defini culorile și dimensiunile fonturilor implicite pentru blocurile dvs. în timp ce configurați o nouă lățime sau aliniere pentru editor.

Unde se află fișierul theme.json?

Puteți găsi fișierul dvs. theme.json în rădăcina directorului dvs. de teme. Dacă utilizați Editorul de site și ați activat o temă bazată pe blocuri, cum ar fi Twenty Twenty-Three , atunci cu siguranță veți avea acces la un fișier theme.json .

Dar, dacă tema aleasă de dvs. nu vine cu un fișier theme.json , puteți fie să schimbați temele, fie să vă creați propriul fișier. Este important să rețineți că unele teme vin cu CSS sau blocuri de stil foarte specifice, care ar putea fi incompatibile cu modificările pe care le faceți în theme.json. De exemplu, modul întunecat din Twenty Twenty-One nu poate fi înlocuit de modificările stilistice adăugate în theme.json.

Ce trebuie să faceți înainte de a edita fișierul theme.json

Acum că știți puțin mai multe despre fișierul theme.json , să aruncăm o privire la câțiva factori importanți de care trebuie să luați în considerare înainte de a face modificări.

1. Faceți o copie de rezervă a site-ului dvs

Înainte de a face orice modificare semnificativă, este important să faceți o copie de rezervă a site-ului dvs. În acest fel, dacă ceva nu merge bine, vă puteți recupera site-ul web și puteți începe din nou.

Folosirea pluginului Jetpack VaultPress Backup este una dintre cele mai ușoare modalități de a face backup pentru site-ul dvs.

Acest instrument Jetpack creează copii de rezervă în timp real, bazate pe cloud și le stochează în rețeaua securizată de servere WordPress.com. În plus, procesul de restaurare este rapid și simplu.

Puteți profita de restaurările cu un singur clic din aplicația mobilă, chiar dacă site-ul dvs. este complet oprit.

2. Luați în considerare utilizarea unui site de organizare

Un site de pregătire este o modalitate excelentă de a testa modificările pe care doriți să le faceți fără a vă afecta site-ul live. În esență, un site de pregătire este o copie a site-ului dvs. care nu este pusă la dispoziția publicului larg. Prin urmare, veți câștiga confidențialitate pentru a testa noi funcții sau pentru a vă actualiza site-ul.

În acest fel, nu va trebui să vă faceți griji că lucrurile merg prost atunci când editați fișierul theme.json . În plus, dacă există o problemă, veți putea în continuare să accesați site-ul dvs. live. Înseamnă, de asemenea, că atunci când în sfârșit împingeți orice modificări ale site-ului dvs. live, puteți fi siguri că acestea nu vor afecta funcționalitatea paginilor dvs.

Există o varietate de moduri prin care puteți configura un site de organizare. Puteți să vă întrebați gazda web, să configurați manual diferite subdomenii pentru site-ul dvs. sau să instalați un plugin. Dar poate fi mai ușor să optezi pentru un instrument de dezvoltare WordPress local.

Cum să editați fișierul theme.json

În acest moment, sunteți gata să accesați și să editați fișierul theme.json ! În această secțiune, vă vom arăta câteva modalități utile de a edita theme.json , cum ar fi crearea unei palete de culori și înlocuirea dimensiunii implicite a fontului pentru blocurile dvs.

Pentru a începe, va trebui să ajungeți la directorul rădăcină al site-ului dvs. web. Puteți face acest lucru utilizând un client SFTP precum FileZilla sau vizitând Managerul de fișiere. Apoi, mergeți pur și simplu la directorul public_html . În cadrul acestuia, localizați folderul wp-content .

Apoi, accesați teme și selectați tema activă pentru site-ul dvs. Aici veți găsi theme.json dacă tema dvs. are unul.

1. Creați o paletă de culori implicită

Poate doriți să stabiliți o paletă de culori setată pentru Editor. În acest fel, vă puteți accesa rapid culorile și vă puteți asigura un brand vizual consistent în paginile dvs.

În plus, poate fi util dacă aveți alți utilizatori care creează postări și pagini pe site-ul dvs., deoarece aceștia vor putea accesa doar culorile pe care le includeți în depozitul dvs. de culori. În plus, nu vor avea capacitatea de a-și crea propriile nuanțe și gradienți.

Pentru a începe, localizați theme.json urmând pașii pe care i-am descris mai devreme. Există trei factori de luat în considerare pentru a activa această setare:

1. Va trebui să dezactivați gradienții personalizați
2. Va trebui să dezactivați opțiunile de culoare personalizate
3. Va trebui să adăugați o paletă personalizată cu culorile mărcii dvs

După ce v-ați conectat la fișierele cu tema folosind SFTP sau Managerul de fișiere, va trebui să copiați următorul cod și să-l salvați în directorul rădăcină al temei:

 { “version”: 1, “settings”: { “color”: { “custom”: false, “customGradient”: false, “gradients”:[], “link”: false, “palette”:[ { “slug”: “vivadcyanblue”, “color”: “#0693E3” }, { “slug”: “vividgreencyan”, “color”: “#00D084”, }, { “slug”: “white”, “color”: “#ffffff” } ] }

Rețineți că va trebui să modificați codul de mai sus pentru a reflecta preferințele dvs. Aici, am dezactivat opțiunile de gradient personalizat și de culoare personalizată.

În plus, am stabilit o paletă de culori setată de trei nuanțe diferite. Prin urmare, atunci când utilizatorii creează postări și pagini pe site, vor putea accesa doar aceste nuanțe.

Ceea ce este grozav în a crea o paletă personalizată în theme.json este că WordPress va rescrie și toate CSS-urile necesare. În acest fel, orice modificări de culoare făcute în Editorul de blocuri se vor reflecta și pe front-end.

2. Configurați dimensiuni de font personalizate

De asemenea, poate fi util să configurați anumite dimensiuni de font pentru blocul Paragraf. Desigur, blocul oferă un set de dimensiuni implicite de font, dar puteți utiliza theme.json pentru a-l înlocui cu preferințele dvs.

Din nou, va trebui să găsiți directorul rădăcină al temei dvs. vizitând folderul teme din wp-content . Apoi, localizați theme.json. Dimensiunile fonturilor sunt adăugate la theme.json în setări → tipografie → mărimi font.

Apoi, va trebui să introduceți valorile. Veți folosi dimensiunea pentru a adăuga o valoare validă pentru dimensiunea fontului CSS. Între timp, slug este identificatorul pe care WordPress îl folosește în proprietatea personalizată CSS. De asemenea, puteți adăuga un nume , dar acesta este doar pentru uzul dvs., deoarece este ceea ce veți vedea în editor.

În WordPress, dimensiunea implicită a fontului „mică” are valoarea 13px, așa că vă puteți baza valorile în jurul acesteia. Una peste alta, fișierul dvs. theme.json va arăta cam așa după ce ați adăugat acest cod la fișier:

 add_theme_support( 'editor-font-sizes', array(    array(        'name' => esc_attr__( 'Small', 'themeLangDomain' ),        'size' => 12,        'slug' => 'small'    ),    array(        'name' => esc_attr__( 'Regular', 'themeLangDomain' ),        'size' => 16,        'slug' => 'regular'    ),    array(        'name' => esc_attr__( 'Large', 'themeLangDomain' ),        'size' => 36,        'slug' => 'large'    ),    array(        'name' => esc_attr__( 'Huge', 'themeLangDomain' ),        'size' => 50,        'slug' => 'huge'    ) ) );

Pur și simplu salvați modificările pentru a vă actualiza setările de blocare WordPress.

3. Creați șabloane personalizate și părți de șablon

O altă modalitate de a edita theme.json este de a crea șabloane personalizate și părți de șablon. Deoarece temele pot enumera șabloanele personalizate care sunt prezente în folderul de șabloane , puteți declara tipurile de postări care le pot folosi și titlul pe care îl afișați utilizatorilor dvs.

Pentru a începe, deschide theme.json. Va trebui să vă gândiți la un nume, titlu și tip de postare, deși ultima setare este opțională. Apoi, adăugați următorul cod la fișier:

 { “version”: 1, “customTemplates”: [ { “name”: “custom-template-example”, “title”: “The Custom Template Title”, “postTypes”: [ “page”, “post”, “my-cpt” ] } ] }

În acest moment, ați creat un șablon pentru paginile, postările și tipurile de postări personalizate. Puteți face un pas mai departe și puteți crea părți șablon pentru tema dvs.

În acest fel, puteți configura theme.json să declare termenul de zonă pentru o parte a șablonului, cum ar fi un antet sau un bloc de subsol. Prin definirea acestui lucru în theme.json , vă puteți asigura că setarea este aplicată în toate utilizările acelei entități de parte șablon și nu doar într-un singur bloc.

Înainte de a începe, va trebui să luați în considerare numele, titlul și zona părții șablonului. Este important să rețineți că, dacă nu specificați o zonă, aceasta va fi setată la „necategorizat” și nu va declanșa nicio variație de bloc.

Pentru a crea o parte șablon pentru tema dvs., adăugați următorul cod la theme.json :

 { “version”: 1, “templateParts”: [ { “name: “my-template-part”, “title”: “Footer”, “area”: “footer” } ] }

Apoi, asigurați-vă că salvați modificările înainte de a părăsi theme.json.

Întrebări frecvente despre theme.json în WordPress

Acum știți cum să editați theme.json, dar este posibil să aveți încă câteva îndoieli cu privire la acesta. De aceea, am răspuns la unele dintre cele mai frecvente întrebări theme.json de mai jos!

Când a fost introdus pentru prima dată theme.json în WordPress?

Fișierul theme.json a fost introdus pentru prima dată odată cu lansarea WordPress 5.8. Acesta este momentul în care a fost lansată Full Site Editing (FSE), împreună cu posibilitatea de a folosi teme bazate pe blocuri.

Această versiune a indicat o schimbare uriașă pentru platformă, deoarece utilizatorii au câștigat capacitatea de a face modificări la nivelul întregului site și au obținut mai mult control asupra setărilor stilistice. Mai târziu, cu WordPress 5.9, theme.json a evoluat la o a doua versiune.

Ce poți face cu fișierul theme.json?

Pe scurt, theme.json vă permite să modificați și să aplicați noi setări legate de stil tuturor blocurilor dvs. WordPress. Prin urmare, obțineți un nivel mai fin de control asupra schimbărilor stilistice. În plus, înseamnă că puteți evita necesitatea de a configura aceste modificări individual la nivel de bloc.

De exemplu, puteți edita theme.json pentru a dezactiva/activa funcții cum ar fi căptușeala, umplutura, marginea și înălțimea liniei personalizată. În plus, puteți adăuga mai multe palete de culori, duotonuri și degrade pentru a face mai rapidă aplicarea culorilor mărcii dvs. la elementele de pe pagină.

În plus, puteți specifica dimensiunile exacte ale fontului și puteți aplica acest lucru pe site-ul dvs. Sau adăugați lățimi implicite pentru conținutul dvs. și atribuiți părți șablon zonelor părților șablonului.

Care sunt condițiile preliminare pentru utilizarea fișierului theme.json?

Editarea theme.json este o modalitate ușoară de a face modificări stilistice la nivelul întregului site. Dar, din păcate, nu este o opțiune pentru toți utilizatorii.

În primul rând, va trebui să utilizați Editorul de blocuri. Dacă preferați să utilizați generatorii de pagini, nu veți putea profita de această funcționalitate. În plus, va trebui să înțelegeți ceva CSS și să vă simțiți confortabil să editați fișierele site-ului.

În cele din urmă, va trebui să puteți accesa theme.json. După cum am discutat mai devreme, nu fiecare temă are un fișier theme.json . În plus, setările unor teme vor înlocui orice modificări pe care le faci în theme.json .

Dacă tema dvs. are theme.json , îl veți putea găsi în directorul rădăcină al site-ului dvs. Puteți găsi acest lucru folosind SFTP sau vizitând Managerul de fișiere. Apoi, găsiți folderul teme din wp-content . Aici se află theme.json . Dacă tema dvs. nu are theme.json, puteți fie să comutați temele, fie să creați singur un fișier theme.json .

Utilizați fișierul WordPress theme.json pentru un design web eficient

Efectuarea de modificări personalizate la nivelul întregului site înseamnă adesea editarea a numeroase fișiere sau finalizarea multor sarcini manuale. Dar, cu theme.json, veți obține un spațiu dedicat pentru controlul și gestionarea tuturor setărilor stilistice pentru site-ul dvs.

Fișierul theme.json se află în directorul rădăcină al site-ului dvs. începând cu WordPress 5.8. Puteți edita fișierul pentru a face modificări radicale, cum ar fi să aplicați o paletă de culori personalizată site-ului dvs. și să înlocuiți dimensiunile implicite ale fonturilor WordPress.

Înainte de a edita fișierul theme.json , este important să faceți o copie de rezervă a site-ului dvs. Jetpack VaultPress Backup este un plugin ușor de utilizat care vă permite să vă restaurați site-ul chiar și atunci când sunteți offline. În plus, face backup pentru toate fișierele, datele WooCommerce și baza de date!