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 vă permite să personalizați vizual fiecare aspect al temei dvs. de blocuri 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.

Temele 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 aceste funcționalități cu reguli CSS în fișierul foii de stil CSS (style.css).

În temele de blocuri, theme.json acționează ca un hub central pentru tot ceea ce definește aspectul și senzația temei dvs. de blocuri. Vă permite să definiți lucruri precum fonturi, culori și opțiuni de aspect într-un singur loc, înlocuind necesitatea 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.

În primul rând, theme.json funcționează în colaborare cu editorul complet de site-uri WordPress. Acest lucru vă permite să vă personalizați stilurile și setările temei cu ușurință 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 consideră frustrant atunci când trebuie să schimbe temele, deoarece trebuie să învețe complet noi aspecte și opțiuni de stil.

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?

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

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

Dacă folosiți Bluehost, atunci vă puteți conecta și puteți trece la fila „Websites”. Apoi, faceți clic pe butonul „Settings” de sub site-ul dvs. web.

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ă:

Schemă

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 API a formatului theme.json este utilizată de fișier și asigură că 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 utilizatori pentru a-și personaliza tema. Acestea includ presetări pentru paleta de culori a temei, tipografie, spațiere, gradienți, umbre, margini ș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ă vă uitați la cod, limbajul folosit este destul de ușor de înțeles. Puteți vedea că setările definesc culorile, fonturile, 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 aspecte 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 pre-făcute de blocuri care vă permit să creați layout-uri de conținut personalizate pe paginile, postările sau oriunde altundeva în tema dvs.

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 modele din directorul de modele public. Este o modalitate excelentă de a oferi mai multe opțiuni de personalizare fără a proiecta dvs. 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 sa 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 utilizarea unei teme 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 lucruri 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ă creați o temă copil în WordPress pentru mai multe informații. Acest articol arată o metodă ușoară cu pluginul Create Block Theme, care va genera automat un fișier theme.json doar pentru tema dvs. copil.

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

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

Este, de asemenea, recomandat să lucrați într-un mediu de dezvoltare WordPress local sau pe un site de staging. Acesta creează o replică a site-ului dvs. live unde puteți testa modificări î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ă solicitați ajutor de la echipa de suport a dezvoltatorului temei sau de la forumurile de suport WordPress.org dacă întâmpinați probleme. Consultați ghidul nostru despre cum să solicitați 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ă bloc personalizată, să o editeze și/sau să salveze variațiile de stil ale temei lor bloc.

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.

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 complet de editare a site-ului WordPress pentru mai multe informații.

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

Schema culorilor sau paleta este un set de culori implicite pentru elemente precum text, fundaluri și butoane. 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 web, veți vedea că blocurile sau elementele specifice care foloseau 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 de teme WordPress aspirant 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 scop demonstrativ. Dacă sunteți un utilizator Bluehost și folosiți managerul de fișiere, atunci puteți pur și simplu să faceți clic dreapta pe fișierul theme.json și să faceți clic pe „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ă folosiți o temă copil, atunci puteți pur și simplu să copiați și să lipiți următorul cod în fișierul dvs. theme.json și să modificați dimensiunile fonturilor în pixeli, după cum considerați necesar:

{
  "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ări 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 dvs. Acest lucru reduce semnificativ riscul de a vă defecta 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ă despre 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 web WordPress și selecția noastră expertă a celor mai bune constructori de pagini drag-and-drop pentru WordPress.

Dacă v-a plăcut acest articol, atunci vă rugăm să vă abonați la Canalul nostru de YouTube pentru tutoriale video despre WordPress. Ne puteți găsi, de asemenea, pe Twitter și Facebook.