Ce este fișierul theme.json în WordPress și cum să îl utilizați

Fișierul theme.json este o parte importantă a temelor bloc WordPress, controlând multe aspecte ale aspectului și funcționalității site-ului tău. Dacă ai trecut recent de la o temă clasică la una bloc, s-ar putea să te întrebi despre ce este vorba în acest fișier și dacă ar trebui să îl editezi.

Nu sunteți singur. Noi și mulți utilizatori WPBeginner ne-am întrebat același lucru. Așa că am decis să aprofundăm acest subiect pentru a oferi un ghid cuprinzător.

În acest articol, vom explica ce este un fișier theme.json, de ce este important și cum îl poți folosi pentru a-ți personaliza site-ul WordPress. 

Ce este fișierul WordPress theme.json?

Fișierul theme.json este un fișier special de temă introdus în WordPress 5.8. Acesta joacă un rol cheie în experiența de editare completă a site-ului (FSE), care îți permite să personalizezi vizual fiecare aspect al temei tale de bloc WordPress.

În esență, fișierul theme.json acționează ca un șablon care controlează stilizarea și funcționalitatea temei dvs. de blocuri. Acesta conține cod care spune WordPress cum ar trebui să arate și să se comporte diferite elemente precum culorile, tipografia, layout-urile și șabloanele.

De ce au nevoie temele de blocuri WordPress de un fișier theme.json?

Editarea unei teme de blocuri în WordPress este diferită de editarea unei teme clasice.

Teme clasice folosesc fișierul functions.php pentru a activa funcționalități precum meniuri personalizate sau imagini de prezentare cu funcția add_theme_support(). Apoi, puteți stiliza acele funcționalități cu reguli CSS în fișierul foaie de stil CSS (style.css).

În temele bloc, theme.json acționează ca un centru de comandă pentru tot ceea ce definește aspectul și senzația temei dvs. bloc. Vă permite să definiți lucruri precum fonturile, culorile și opțiunile de aspect într-un singur loc, înlocuind necesitatea utilizării funcției add_theme_support() în functions.php.

Acesta este motivul pentru care fișierul functions.php din temele bloc este adesea mai mic decât echivalentul său din temele clasice.

Având un fișier theme.json dedicat oferă câteva beneficii mari față de sistemul anterior de teme clasice.

Mai întâi, theme.json funcționează în strânsă legătură cu editorul complet de site-uri WordPress. Acest lucru vă permite să personalizați stilurile și setările temei direct din editor, fără a fi nevoie să atingeți codul.

Mai mult, theme.json își propune să creeze o experiență consecventă atât pentru dezvoltatori, cât și pentru utilizatori. Unii utilizatori găsesc foarte frustrant atunci când trebuie să schimbe temele, deoarece trebuie să învețe complet noi layout-uri și opțiuni de stilizare.

Cu theme.json, schimbarea temelor devine un proces mai fluid, deoarece totul este organizat într-un mod similar.

În cele din urmă, prin utilizarea theme.json, dezvoltatorii de teme și utilizatorii își pot proteja munca pentru viitor, pe măsură ce WordPress își extinde capacitățile de editare completă a site-ului.

Acum că am acoperit ce este un fișier theme.json, să aprofundăm subiectul. Puteți utiliza linkurile rapide de mai jos pentru a naviga prin acest ghid:

• Unde găsești fișierul theme.json din WordPress?
• Cum arată fișierul theme.json?
• Ce ar trebui să faceți înainte de a edita fișierul theme.json
• Cum să editezi fișierul theme.json din WordPress
• Sfat bonus: Utilizați WPCode pentru a adăuga cod personalizat la tema dvs.

Unde găsești fișierul theme.json din WordPress?

Fișierul theme.json se găsește în directorul temei de pe serverul dvs. web. Calea tipică a fișierului ar fi public_html » wp-content » themes » numele-temei-tale » theme.json.

Pentru a accesa, trebuie mai întâi să vă conectați la site-ul dvs. prin FTP sau managerul de fișiere al contului dvs. de găzduire.

Dacă folosești Bluehost, atunci te poți conecta și comuta la fila „Website-uri”. Apoi, dă clic pe butonul „Setări” de sub site-ul tău.

Acum, asigurați-vă că rămâneți pe fila „Prezentare generală”.

Apoi, derulați în jos pentru a face clic pe butonul „Manager fișiere”.

Când deschideți managerul de fișiere în acest mod, veți fi automat în folderul rădăcină al site-ului dvs. web.

Aici, căutați directorul „wp-content” și deschideți-l. Acolo, veți găsi folderul „themes” care conține toate temele WordPress instalate.

Deschideți folderul pentru tema bloc specifică pe care o utilizați. Fișierul theme.json va fi situat direct în interiorul acestui director de temă, alături de alte fișiere de temă.

Odată ce l-ați găsit, puteți vizualiza fișierul theme.json folosind un editor de cod.

Cum arată fișierul theme.json?

Fișierul theme.json are o structură specifică care organizează toate setările globale pentru tema dvs. bloc WordPress.

În funcție de cât de complexă sau simplă arată tema dvs., fișierul poate fi foarte scurt sau lung. Cu toate acestea, puteți descompune cu ușurință acest fișier în 7 secțiuni de nivel superior:

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

Iată o defalcare simplificată:

Schema

Această parte este, de fapt, opțională în temele bloc, așa că este posibil să o vedeți sau nu în tema dvs.

Proprietatea schema leagă URL-ul de schema JSON WordPress, care definește setările globale, stilurile și alte configurații pentru tema dvs.

Versiune

Această secțiune specifică ce versiune de API a formatului theme.json este utilizată de fișier și asigură că acesta respectă structura corectă.

La momentul scrierii acestui articol, API-ul este la versiunea 2.

Setări

Această proprietate definește opțiunile și controalele disponibile pentru ca utilizatorii să-și personalizeze tema. Acestea includ presetări pentru paleta de culori a temei, tipografia, spațierea, gradientele, umbrele, marginile și așa mai departe.

Iată un exemplu foarte simplu al modului în care arată proprietatea de setări:

{
  "settings": {
    "color": {
      "palette": [
        {
          "slug": "base",
          "color": "#ffffff",
          "name": "White"
        },
        {
          "slug": "contrast",
          "color": "#222222",
          "name": "Dark"
        },
        {
          "slug": "accent",
          "color": "#f08080",
          "name": "Pink"
        },
        {
          "slug": "accent-2",
          "color": "#90ee90",
          "name": "Light Green"
        },
        {
          "slug": "accent-3",
          "color": "#e0ffff",
          "name": "Light Blue"
        }
      ]
    },
    "typography": {
      "fontFamilies": [
        {
          "fontFamily": "Open Sans, sans-serif",
          "slug": "open-sans",
          "name": "Open Sans"
        },
        {
          "fontFamily": "Arial, sans-serif",
          "slug": "arial",
          "name": "Arial"
        },
        {
          "fontFamily": "Times New Roman, serif",
          "slug": "times-new-roman",
          "name": "Times New Roman"
        }
      ],
      "fontSizes": [
        {
          "name": "Extra Small",
          "slug": "xx-small",
          "size": "0.75rem"
        },
        {
          "name": "Small",
          "slug": "small",
          "size": "0.875rem"
        },
        {
          "name": "Medium",
          "slug": "medium",
          "size": "1rem"
        },
        {
          "name": "Large",
          "slug": "large",
          "size": "1.125rem"
        },
        {
          "name": "Extra Large",
          "slug": "x-large",
          "size": "1.25rem"
        },
        {
          "name": "XX-Large",
          "slug": "xx-large",
          "size": "1.5rem"
        }
      ],
      "spacing": {
        "units": ["rem"],
        "values": {
          "small": "1rem",
          "medium": "1.5rem",
          "large": "2rem"
        }
      }
    }
  }
}

Dacă priviți codul, limbajul folosit este destul de ușor de înțeles. Puteți spune că setările definesc culorile, familiile de fonturi, dimensiunile fonturilor și spațierea utilizate în temă.

Dacă există referințe aici sau în tema dvs. pe care nu le înțelegeți, puteți consulta Referința oficială WordPress pentru setări.

Unele elemente, cum ar fi culorile și familiile de fonturi, au slug-uri, ca acesta:

{
  "settings": {
    "color": {
      "palette": [
        {
          "slug": "base",
          "color": "#ffffff",
          "name": "White"
        },

Acestea vor fi utile pentru secțiunea de stiluri mai târziu, pentru a crea presetări, pe care le vom explica în partea următoare.

Stiluri

În timp ce secțiunea de setări definește opțiunile implicite de personalizare ale temei, secțiunea de stiluri le aplică temei.

Aici, puteți aplica setările de personalizare întregului site web sau la nivel de bloc folosind presetări.

Să analizăm exemplul de mai jos:

{
  "settings": {
    // Existing settings from the previous example
  },
  "styles": {
    "color": {
      "background": "var(--wp--preset--color--base)",
      "text": "var(--wp--preset--color--contrast)"
    },
    "elements": {
      "link": {
        "color": {
          "text": "var(--wp--preset--color--accent-2)"
        }
      },
      "h1": {
        "fontSize": "var(--wp--preset--font-size--xx-large)",
        "lineHeight": "1.2",
        "marginBottom": "1rem"
      },
      "h2": {
        "fontSize": "var(--wp--preset--font-size--x-large)",
        "lineHeight": "1.2",
        "marginBottom": "1rem"
      },
      "h3": {
        "fontSize": "var(--wp--preset--font-size--large)",
        "lineHeight": "1.2",
        "marginBottom": "1rem"
      }
    }
  }
}

După cum puteți vedea, există această linie de cod care apare pe tot parcursul acestui fragment: var(--wp--preset--xxx). Acestea sunt presetări, care sunt scurtături în secțiunea de stiluri care fac referire la valorile definite în secțiunea de setări.

De exemplu, luați în considerare {"slug": "base", "color": "#ffffff", "name": "White"} în secțiunea de setări. Aici, "base" este slug-ul, iar presetarea corespunzătoare pentru această culoare este var(--wp--preset--color--base).

Prin urmare, codul "color": {"background": "var(--wp--preset--color--base)" din stiluri spune că culoarea de fundal a acestei teme este albă.

Șabloane personalizate

În dezvoltarea temelor de blocuri WordPress, dezvoltatorii pot crea layout-uri predefinite pentru pagini personalizate, postări sau tipuri de postări personalizate pe care utilizatorii le pot folosi.

De exemplu, tema Twenty Twenty-Four are mai multe șabloane personalizate definite în fișierul theme.json: Fără titlu pagină, Pagină cu bară laterală, Pagină cu imagine lată și Unic cu bară laterală.

Puteți folosi oricare dintre acestea pentru a vă crea conținutul.

],
"customTemplates": [
  {
    "name": "page-no-title",
    "postTypes": ["page"],
    "title": "Page No Title"
  },
  {
    "name": "page-with-sidebar",
    "postTypes": ["page"],
    "title": "Page With Sidebar"
  },
  {
    "name": "page-wide",
    "postTypes": ["page"],
    "title": "Page with wide Image"
  },
  {
    "name": "single-with-sidebar",
    "postTypes": ["post"],
    "title": "Single with Sidebar"
  }
]

Un lucru de reținut este că fișierul theme.json face referire la șabloane doar după nume și oferă metadate despre acestea, cum ar fi titlul lor și tipurile de postări pentru care sunt destinate.

Cu toate acestea, aspectul și funcționalitatea reală a șabloanelor personalizate sunt definite în fișiere de șabloane separate, în interiorul folderului temei.

Pentru a le vedea, poți merge la public_html » wp-content » themes » numele-temei-tale » templates.

Părți de șablon

Părțile de șablon sunt zone reutilizabile pe care le puteți aplica în șabloanele dvs. personalizate. Acestea sunt elemente precum anteturi, subsoluri, bare laterale și așa mai departe.

Iată cum arată aceste părți de șablon înregistrate în theme.json:

"templateParts": [
  {
    "area": "header",
    "name": "header",
    "title": "Header"
  },
  {
    "area": "footer",
    "name": "footer",
    "title": "Footer"
  },
  {
    "area": "sidebar",  // Removed "uncategorized"
    "name": "sidebar",
    "title": "Sidebar"
  },
  {
    "area": "post-meta",  // Removed "uncategorized"
    "name": "post-meta",
    "title": "Post Meta"
  }
]

La fel ca șabloanele personalizate, fișierul theme.json face doar referire la șabloane.

Aspectul lor real este definit în propriile fișiere de parte de șablon din folderul parts.

Modele

Modelele sunt colecții predefinite de blocuri care îți permit să creezi layout-uri de conținut personalizate pe paginile tale, postări sau oriunde altundeva în tema ta.

Când deschideți editorul complet al site-ului, este posibil să observați meniul Modele. Aici puteți găsi toate modelele disponibile pentru tema dvs. de blocuri Gutenberg.

Cu theme.json, dezvoltatorii de teme pot face referire la șabloane din directorul public WordPress Pattern Directory. Este o modalitate excelentă de a oferi mai multe opțiuni de personalizare fără a proiecta singur aceste blocuri reutilizabile.

De exemplu, tema Twenty Twenty-Four face referire la două modele din directorul oficial: trei coloane de servicii și secțiunea clienți:

"patterns": [
  "three-columns-of-services",
  "clients-section"
]

Știm acest lucru deoarece aceste modele se află în meniul Modele din editorul complet al site-ului.

Cu toate acestea, ele nu se află în folderul patterns din directorul temei.

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

Deoarece theme.json este un fișier de temă de bază, editarea acestuia direct pe site-ul dvs. WordPress live implică anumite riscuri. Greșelile accidentale ar putea, potențial, să vă deterioreze tema sau site-ul.

O abordare mai sigură este să folosești o temă copil.

O temă copil moștenește toate variațiile de stil și funcționalitățile temei părinte (tema bloc pe care o utilizați), dar vă permite să personalizați lucrurile fără a modifica tema părinte în sine. Astfel, dacă tema părinte primește actualizări, personalizările dvs. nu vor fi suprascrise.

Puteți citi ghidul nostru despre cum să creezi o temă copil în WordPress pentru mai multe informații. Acest articol prezintă o metodă ușoară cu pluginul Create Block Theme, care va genera automat un nou fișier theme.json doar pentru tema ta copil.

Pentru a asigura o experiență de editare fluidă și pentru a evita orice întrerupere a funcționării site-ului, recomandăm, de asemenea, crearea unei noi copii de siguranță a site-ului dvs. WordPress. Astfel, dacă ceva nu merge bine, puteți restaura cu ușurință site-ul la starea sa anterioară.

Recomandăm utilizarea unui plugin precum Duplicator pentru o soluție de backup rapidă și fiabilă.

De asemenea, este recomandat să lucrați într-un mediu de dezvoltare WordPress local sau pe un site de staging. Acest lucru creează o replică a site-ului dvs. web live unde puteți testa modificările în siguranță, fără a afecta vizitatorii.

Iată câteva sfaturi suplimentare de reținut:

• Începe cu modificări minore în fișierul tău theme.json și testează-le temeinic înainte de a face schimbări mai complexe.
• Dacă nu sunteți sigur cu privire la o anumită proprietate sau setare din fișierul theme.json, consultați documentația oficială WordPress.
• Nu ezitați să cereți ajutor echipei de suport a dezvoltatorului temei sau forumurilor de suport WordPress.org dacă întâmpinați probleme. Consultați ghidul nostru despre cum să ceri corect suport WordPress pentru mai multe informații.

Cum să editezi fișierul theme.json din WordPress

Pe baza cercetărilor și testelor noastre, am descoperit două modalități de a edita un fișier theme.json WordPress: utilizând editorul complet de site sau utilizând codul. Prima opțiune este mult mai ușoară și mai sigură și vă permite să vedeți modificările din partea frontală a site-ului dvs.

Între timp, a doua opțiune este recomandată dacă sunteți confortabil cu dezvoltarea avansată WordPress.

Editați theme.json fără cod (pentru începători)

Pentru a edita fișierul theme.json fără a atinge direct codul, puteți utiliza pluginul Create Block Theme. Acest plugin a fost publicat de echipa oficială WordPress.org pentru a permite utilizatorilor să creeze o temă de blocuri personalizată, să o editeze și/sau să salveze variațiile de stil ale temei lor de blocuri.

Mai întâi, instalați pluginul WordPress în zona dvs. de administrare. Apoi, deschideți editorul complet al site-ului accesând Aspect » Editor.

Veți vedea acum mai multe meniuri pentru a edita tema.

Aici, selectați „Stiluri”.

Apoi, faceți clic pe pictograma creionului „Editați stilurile”.

Acest lucru vă va duce la editorul de blocuri pentru a edita setările și stilurile globale ale site-ului dvs. web.

Acum, puteți schimba stilul temei dvs. ca de obicei. Puteți citi secțiunea despre cum să editați stilurile globale ale temei dvs. în ghidul nostru despre editarea completă a site-ului WordPress pentru mai multe informații.

Să încercăm să creăm o paletă de culori personalizată ca exemplu.

Schema de culori sau paleta este un set de culori implicite pentru elemente precum textul, fundalurile și butoanele. Aceasta asigură un aspect coeziv pe întregul site web.

Elementele care utilizează aceeași presetare de culoare se vor potrivi întotdeauna, astfel încât designul site-ului dvs. web să arate rafinat și profesional.

Pentru a edita paleta, selectează „Culori” în bara laterală a setărilor de Stiluri.

Pe următorul ecran, veți vedea câteva setări pentru a personaliza culorile temei dvs.

Aici, faceți clic pe culorile din secțiunea „Paletă”.

În acest exemplu, tema Twenty Twenty-Four a definit deja 5 culori în paletă, dar le puteți schimba pe oricare dintre ele pentru a crea una personalizată de la zero.

Pentru a face acest lucru, faceți clic pe una dintre culorile de sub „Temă”. Apoi, selectați orice culoare din instrumentul de selecție a culorilor.

Acum, dacă previzualizați site-ul dvs., veți vedea că blocurile sau elementele specifice care au folosit culoarea anterioară au fost înlocuite cu culoarea pe care tocmai ați selectat-o în paleta dvs.

Puteți repeta aceiași pași pentru fiecare culoare. Apoi, faceți clic pe „Salvare”.

După ce ați salvat modificările, faceți clic pe butonul Creare temă bloc (pictograma cheie franceză).

Apoi, selectați „Salvează modificările temei”.

Pe ecranul următor, trebuie să derulați în jos.

După aceea, faceți clic pe „Salvați modificările”. Acest lucru va determina WordPress să stocheze toate modificările pe care le-ați făcut la tema dvs. în fișierul theme.json.

Odată ce faci acest lucru, editorul de blocuri se va reîmprospăta.

Acum, faceți clic din nou pe butonul Creare Temă de Blocuri și selectați „Vizualizați theme.json”.

Pentru a vedea codul pentru paleta dvs. de culori personalizată, căutați `palette` care este imbricat în `color` și `settings`, astfel:

"settings": {
  // Some code...
  "color": {
    // Some code...
    "palette":  
  }
}

Sub acesta, ar trebui să vedeți noile coduri hexazecimale ale paletei dvs. de culori personalizate.

Editați theme.json cu cod (Utilizatori avansați)

Această metodă este recomandată dacă sunteți un dezvoltator aspirant de teme WordPress sau aveți o oarecare experiență cu codul.

Mai întâi, deschideți fișierul theme.json al temei dvs. de blocuri din directorul WordPress. Puteți folosi fie editorul de cod din managerul de fișiere al gazdei dvs. web, fie descărcați fișierul, editați-l pe computer și încărcați-l înapoi pe serverul dvs.

Vom folosi tema Twenty Twenty-Four și managerul de fișiere al Bluehost în scopuri demonstrative. Dacă sunteți utilizator Bluehost și folosiți managerul de fișiere, atunci puteți pur și simplu să faceți clic dreapta pe fișierul dvs. theme.json și să selectați „Editare”.

Dacă folosiți FTP, atunci puteți citi ghidul nostru despre cum să folosiți FTP pentru a încărca fișiere pe WordPress.

Să încercăm un exemplu simplu de editare a fișierului theme.json: crearea de dimensiuni personalizate pentru fonturi.

Din nou, amintește-ți că proprietatea settings specifică stilurile implicite ale temei tale, în timp ce proprietatea styles le implementează. Din acest motiv, vom edita proprietatea settings în fișierul theme.json.

Dacă folosești o temă copil, atunci poți pur și simplu să copiezi și să lipești următorul cod în fișierul tău theme.json și să schimbi dimensiunile fonturilor în pixeli, după cum consideri de cuviință:

{
  "settings": {
    "typography": {
      "fluid": false,
      "fontSizes": [
        {
          "name": "Small",
          "slug": "small",
          "size": "16px"
        },
        {
          "name": "Medium",
          "slug": "medium",
          "size": "24px"
        },
        {
          "name": "Large",
          "slug": "large",
          "size": "40px"
        },
        {
          "name": "Extra Large",
          "slug": "x-lagrge",  // Typo fixed (large -> large)
          "size": "48px"
        }
      ]
    }
  }
}

Notă: Dacă editați direct fișierul temei părinte, atunci trebuie să găsiți codul care spune fontSizes.

Ar trebui să fie imbricat în interiorul `typography` și `settings`, astfel:

{
  "settings": {
    // Some code...
    "typography": {
      // Some code...
      "fontSizes": [
        // Font size definitions here
      ]
    }
  }
}

După aceea, înlocuiți acele linii de cod cu fragmentul de cod de mai sus. Doar asigurați-vă că nu există erori de sintaxă în el.

Odată terminat, salvați fișierul și previzualizați site-ul dvs. pentru a vedea modificările. Pentru utilizatorii Bluehost, puteți pur și simplu să faceți clic pe „Salvare modificări” în editorul de cod al managerului de fișiere.

Dacă doriți să editați în continuare fișierul theme.json, vă încurajăm cu tărie să vă familiarizați mai mult cu structura fișierului, așa cum este explicat în secțiunea anterioară.

De asemenea, sugerăm să citiți Referința oficială pentru setările WordPress, care include o listă completă a proprietăților de setări disponibile și instrucțiuni pentru utilizarea lor.

Sfat bonus: Utilizați WPCode pentru a adăuga cod personalizat la tema dvs.

În acest ghid, ai învățat despre theme.json și potențialul său pentru personalizarea temelor. Dar poate că încă ți se pare un pic copleșitor să editezi direct.

Din fericire, există o altă opțiune ușor de utilizat pentru adăugarea de cod personalizat și efectuarea de personalizări avansate: WPCode.

Cu WPCode, puteți introduce fragmente de cod personalizate fără a fi nevoie să atingeți fișierele temei. Acest lucru reduce semnificativ riscul de a vă strica site-ul web în timpul personalizării.

Dacă doriți să aflați mai multe despre acest plugin pentru fragmente de cod, consultați recenzia noastră completă WPCode.

De asemenea, iată câteva tutoriale utile pentru a vă ajuta să începeți cu WPCode:

• Snippet-uri de Cod Utile pentru WordPress pentru Începători (Ales de Experți)
• Cum să evidențiezi postările noi pentru vizitatorii care revin în WordPress
• Cum să evidențiezi textul în WordPress
• Cum să adăugați ușor umbre de casetă în WordPress

Sperăm că acest articol v-a ajutat să aflați despre fișierul theme.json în WordPress. De asemenea, ați putea dori să consultați ghidul nostru pentru începători despre cum să editați un site WordPress și selecția noastră expertă de cei mai buni constructori de pagini drag-and-drop pentru WordPress.

Dacă ți-a plăcut acest articol, te rugăm să te abonezi la canalul nostru de YouTube pentru tutoriale video WordPress. Ne poți găsi, de asemenea, pe Twitter și Facebook.