Kako editovati theme.json fajl u WordPress blok temi
Da li ste prilikom korišćenja blok teme u WordPress-u primetili theme.json fajl?
Možda ste se već pitali koja je namena ovog fajla i da li smete da ga editujete.
Ukoliko niste znali theme.json fajl je važna karika full-site editovanja u WordPress-u. S obzirom da blok teme postaju sve zastupljenije, važno je da znate čemu služi theme.json fajl i kako da ga pravilno editujete.
Zato ćemo u ovom testu objasniti šta je theme.json fajl i kako možete da ga koristite da biste prilagodili svoj WordPress web sajt.
Šta je WordPress theme.json fajl?
Theme.json fajl je poseban fajl koji je prvi put prestavljen u WordPress verziji 5.8. Kako smo već naveli, ovaj fajl igra ključnu ulogu u full site editing (FSE) iskustvu, koje vam omogućava da vizuelno prilagodite svaki aspekt svoje WordPress blok teme.
U suštini, theme.json fajl se ponaša kao šema koja kontroliše stilizovanje i funkcionalnost vaše blok teme. On sadrži kod koji govori WordPress-u kako različiti elementi, poput boja, tipografije, layout-ova i template-ova treba da izgledaju i kako da se ponašaju.
Zašto je WordPress blok temi potreban theme.json fajl?
Editovanje blok teme u WordPress-u je drugačije od editovanja klasične teme.
Klasična tema koristi functions.php fajl da omogući funkcionalnosti poput prilagođenih menija ili izdvojenih slika (featured image) preko add_theme_support() funkcije. Zatim možete stilizovati te funkcionalnosti pomoću CSS koda u CSS stylesheet (style.css) fajlu.
U blok temama theme.json fajl se ponaša kao centralno mesto za sve što se odnosi na izgled vaše blok teme. On vam omogućava da definišete boje, fontove i rasporede elemenata na stranici, eleminišući potrebu za add_theme_support() u functions.php fajlu. Iz tog razloga je functions.php fajl u blok temama često manji nego u ekvivalentnim klasičnim temama.
Tako, theme.json fajl radi zajedno sa WordPress full site editorom. To vam omogućava da lako prilagodite stilove i podešavanja vaše teme direktno unutar editora, bez potrebe da menjate nešto u kodu.
Pored toga, theme.json fajl ima zadatak da kreira podjednako iskustvo kako za developere tako i za korisnike.
Nekim korisnicima je zaista problem kada treba da menjaju teme, jer to zahteva da nauče nove layout-e i opcije za stilizovanje za tu konkretnu temu. Sa theme.json fajlom menjanje tema postaje jednostavno, jer je sve organizovano na veoma sličan način.
Sa druge strane, developerima, ali ujedno i korisnicima je sada sigurnije da se posvete novom načinu rada sa theme.json fajlom, jer WordPress definitivno nastavlja da unapređuje svoj full-site editing model, pa je za obe strane to znak da će još dugo raditi sa theme.json fajlom.
Gde se nalazi WordPress theme.json fajl?
Theme.json fajl se nalazi u direktorijumu vaše teme na web serveru. Uobičajena putanja je public_html → wp-content → themes → naziv vaše teme → theme.json.
Da biste mu pristupili prvo morate da se ulogujete preko svog cPanel naloga ili se povežete pomoću svog FTP klijenta.
Mi ćemo se za potrebe ovog teksta ulogovati preko našeg cPanel naloga.
Nakon logovanja pronađite sekciju pod nazivom Files, a zatim u okviru te sekcije kliknite na ikonicu pod nazivom File manager.
Otvoriće vam se stablo direktorijuma gde možete pronaći theme.json fajl, prema putanji koju smo malopre naveli. Imajte u vidu da kod specifičnih instalacija, ili ukoliko ste sami instalirali WordPress u neki drugi root folder, ova putanja kod vas može biti drugačija.
Sada potražite direktorijum sa vašom WordPress temom. Theme.json fajl će se nalaziti na toj lokaciji, zajedno sa drugim fajlovima vaše teme.
Kada ste ga pronašli, sada možete da ga otvorite pomoću bilo kod code editora.
Kako izgleda theme.json fajl?
Theme.json fajl ima specifičnu strukturu koja sadrži sva globalna podešavanja za vašu WordPress blok temu.
U zavisnosti od toga koliko je vaša tema kompleksna, theme.json fajl možete biti veoma dugačak ili veoma kratak. Da bismo vam olakšali snalaženje unutar ovog fajla, podelili smo ga u sedam osnovnih celina.
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 2,
"settings": {},
"styles": {},
"customTemplates": {},
"templateParts": {},
"patterns": []
}Šema (Scheme)
Ovaj deo je zapravo opcionalan u blok temama, tako da ga možete, ali i ne morate videti u vašoj temi.
Svojstvo šema povezuje URL sa WordPress JSON šemom, koja definiše globalna podešavanja, stilove i druge konfiguracije za vašu temu.
Verzija (Version)
Ovaj deo određuje koja se API verzija formata theme.json koristi u fajlu i osigurava da prati ispravnu strukturu.
U trenutku pisanja ovog članka, API je na verziji 2.
Podešavanja (Settings)
Ovo svojstvo definiše opcije i kontrole dostupne korisnicima za prilagođavanje njihove teme. To uključuje unapred postavljene vrednosti za paletu boja teme, tipografiju, razmak, gradijente, senke, ivice i tako dalje.
Evo jednostavnog primea kako izgleda svojstvo Podešavanja (Settings):
{
"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"
}
}
}
}
}Ukoliko pogledate ovaj kod, jezik koji se koristi je prilično jednostavan za razumevanje. Možete da primetite da podešavanja određuju boje, vrstu fonta, veličinu fonta i razmake koji se koriste u temi.
Ukoliko u vašoj temi postoje neka svojstva koja ne razumete, uvek možete pogledati WordPress Setting Reference web sajt.
Neki elementi poput boja i vrste fonta imaju slug-ove kao ove:
{
"settings": {
"color": {
"palette": [
{
"slug": "base",
"color": "#ffffff",
"name": "White"
},Oni mogu biti zgodni za dodatno stilizovanje koje ćemo objasnti u sledećoj sekciji.
Stilovi (Styles)
Dok sekcija Podešavanja definiše podrazumevane opcije za podešavanje teme, sekcija Stilovi (Styles) primenjuje ove opcije na temu.
Ovde možete primeniti podešavanja na ceo web sajt ili na nivou bloka pomoću predefinisanih opcija.
Pogledajmo primer ispod:
{
"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"
}
}
}
}Kao što vidite, postoji linija koda koja se uvek iznova pojavljuje u ovom snippet-u. U pitanju je var(--wp--preset--xxx).
U pitanju su predefinisane opcije (presets) koje su prečice u okviru sekcije Stilovi koje referenciraju na vrednosti koje su definisane u sekciji Podešavanja.
Uzmimo na primer {"slug": "base", "color": "#ffffff", "name": "White"}.
Iz ove sekcije ovde je "base" slug, a pridruženi preset za ovu boju je var(--wp--preset--color--base).
Tako, kod "color": {"background": "var(--wp--preset--color--base)" unutar sekcije Stilovi određuje da je pozadinska boja za ovu temu bela.
Prilagođeni template-i (Cutom templates)
Developeri blok tema mogu za korisnike da kreiraju predefinisane layout-e za prilagođene stranice, postove ili tipove postova.
Na primer, Twenty Twenty-Four tema ima nekoliko prilagođenih template-a definisanih u theme.json fajlu: Page No Title, Page with Sidebar, Page with wide image i Single with Sidebar.
Možete koristiti bilo koji od njih da biste kreirali sadržaj na svom sajtu.
],
"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"
}
]Važno je samo da imate u vidu da theme.json samo referencija template po imenu i obezbeđuje meta podatak o njemu, kao što je naslov i post type za koji je namenjen.
Ipak, odrešeni izgled i funkcionalnost prilagođenog template-a je definisan u odvojenim template fajlovima u direktorijumu teme.
Da biste ih videli, idite na public_html → wp-content → themes → naziv vaše teme → templates.
Delovi template-a (Tempate Parts)
Delovi template-a su delovi koje možete iznova koristiti unutar vaših prilagodnjivih template-a. To su elementi poput header-a, footer-a, sidebar-a i tako dalje.
Evo kako oni oni izgedaju u theme.json fajlu:
"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"
}
]Kao i prilagođeni template-i, theme.json fajl samo referencira template-ove.
Njihov stvarni izgled je definisan u njihovim template part fajlovima u Parts direktorijumu.
Patterns
Patterns su zapravo predefinisana kolekcija blokova koji vam omogućavaju da kreirate layote prilagođenog sadržaja na svojim stranicama, postovima ili na bilo kojoj drugoj lokaciji u vašoj temi.
Kada otvorite full-site editor, primetićete Patterns meni. Ovde možete pronaći sve dostupne šeme za svoje Gutenberg blok teme.
Sa theme.json fajlom developeri mogu da referenciraju pattern-e iz javnog Pattern direktorijuma. To je odličan način da se ponudi više opcija za prilagođavanje bez potrebe da se ti blokovi iznova dizajniraju.
Na primer, Twenty Twenty-Four tema referencira dva pattern-a iz zvaničnog direktorijuma: three columns of services i clients section:
"patterns": [
"three-columns-of-services",
"clients-section"
]Ovo znamo jer se ovi pattern-i nalaze u Patterns meniju unutar full-site editora.
Ipak, oni nisu u Patterns direktorijumu unutar direktorijuma teme.
Napomena: Možda ste primetili da templates, parts i patterns direktorijumi unutar direktorijima vaše teme sadrže fajlove koji nisu navedeni u theme.json fajlu, ali su i dalje vidljivi u full-site editoru.
Ovo je zbog toga što je WordPress dizajniran da automatski prepoznaje i koristi te diektorijume na osnovu njihovog naziva i lokacije unutar direktorijuma vaše teme.
Šta treba da uradite pre editovanja theme.json fajla?
S obzirom da je theme.json fajl zapravo core fajl vaše WordPress teme, njegovo editovanje direktno na sajtu može da bude rizično za vaš web sajt. U slučaju greške, možete da potpuno oborite svoj web ajt.
Sigurniji pristup je umesto glavne teme koristite child temu.
Kao što verovatno već znate, child tema nasleđuje stilove i funkcionalnosti vaše parent teme (blok teme koje koristite), ali vam dozvoljava da prilagodite određene stvari, bez da modifikujete parent temu. Na taj način, kada se parent tema ažurira, to neće pregaziti vaša prethodna podešavanja. Dakle, ukoliko već niste to uradili, obavezno prvo kreirajte child temu za parent temu vašeg web sajta.
Takođe, naša preporuka je da pre editovanja prvo uradite backup svog web sajta, kako biste u slučaju da nešto krene po zlu, lako mogli da sve vratite na staro.
Kako da editujete WordPress theme.json fajl?
Theme.json fajl možete editovati na dva načina. jedan je da koristite full-site editor, a drugi je da koristite kod.
Prvi način je mnogo lakši, pogotovo ukoliko nemate dovoljno iskustva u kodiranju. Sa druge strane, drugi način vam nudi više fleksibilnost, ali je potrebno da dobro poznajete kodiranje, pogotovo u domenu WordPress-a.
Editovanje theme.json fajla pomoću full-site editora
Da biste editovali svoj theme.json fajl pomoću full-site editora, možete da koristite plugin pod nazivom Create Block Theme. Ovaj plugin je objavljen od strane zvaničnog WordPress.org tima kako bi omogućio korisnicima da kreiraju, edituju i sačuvaju različite varijante stilova svoje blok teme.
Instalirajte plugin, a zatim u vašem admin dashboard-u idite na opciju Appearance → Editor.
Sada ćete videti nekoliko menija za editovanje vaše teme.
Za početak odaberite opciju Styles.
Sada kliknite na ikonicu olovke pod nazivom Edit styles.
To će vas odvesti do blok editora gde možete editovati globalne stilove svog web sajta.
Sada možete da izmenite stilove svoje teme.
Hajde da na jednom primeru kreiramo prilagođenu kolor paletu.
Kolorna šema ili paleta je set podrazumevanih boja za elemente poput teksta, pozadine i dugmadi. Time vaš sajt dobija na konzistentnosti boja koje možete lakše podesiti za vaš sajt.
Elementi koji koriste iste predefinisane boje će se uvek slagati bolje na nekom sajtu, nego elementi koji ne koriste boje iz nekog predefinisanog seta. Na taj način će vaš sajt izgledati lepše i profesionalnije.
Da biste editovali paletu, izaberite opciju Colors iz Styles settings sidebar-a.
Na sledećem ekranu videćete neka podešavanja za prilagođavanje boja vaše teme.
Kliknite na boje unutar sekcije Palette.
Na ovom primeru Twenty Twenty-Four tema već ima definisanih boja u paleti, ali možete promeniti bilo koju od njih da biste kreirali neku novu.
Da biste to uradili kliknite na jednu od boja pod opcijom Theme. Zatim izaberite bilo koju boju u color picker alatu.
Sada možete da vidite izmene na svom sajtu u realnom vremenu (live prevew). Određeni blok koji ste malopre izmenili, sada ima novu boju koju ste upravo izabrali u svojoj paleti.
Sada možete da ponovite iste korake za svaku boju. Nakon toga kliknite na dugme Save.
Nakon što ste sačuvali svoje izmene, kliknite na dugme pod nazivom Create Block Theme (ikonica sa francuskim ključem).
Na sledećm ekranu skrolujte na dole.
Nakon toga kliknite na Save Changes da biste sačuvali izmene koje ste upravo napravili. U stvari te izmene će biti sačuvane u vašem theme.json file.
Kada ste to uradili, blok editor će se ponovo učitati.
Sada kliknite ponovo na dugme Create Block Theme i izaberite opciju pod nazivom View theme.json.
Da biste videli kod za vašu prilagođenu color paletu, potražite pallete koja se nalazi unutar color i settings, kao na primeru ispod:
"settings": {
// Some code...
"color": {
// Some code...
"palette":
}
}Iapod toga bi trebalo da vidite nove hex kodove boja unutar vaše nove palete.
Editovanje theme.json fajla pomoću koda
Ovaj način se preporučuje ukoliko poznajete pisanje koda, odnosno ako već imate neko iskustvo u kodiranju.
Prvo otvorite theme.json fajl unutar WordPress direktorijuma vašeg web sajta. Možete da koristite ili kod editor File manager-a na vašem cPanel nalogu, ili da preuzeme ovaj fajl na vaš računar, zatim ga editujete i na kraju upload-ujete nazad na hosting.
U ovom primeru ćemo koristiti Twenty Twent-Four themu koju ćemo editovati pomoću File manager editora.
Hajde da probamo neki jednostavn primer editovanja theme.json fajla, tako što ćemo kreirati prilagođene veličine fontova.
Da podsetimo, svojstvo Settings definiše podrazumevane stilove vaše teme, dok ih svojstvo Styles primenjuje. Iz tog razloga mi ćemo u theme.json fajlu editovati upravo svojstvo Settings.
Ukoliko koristite child temu, onda samo jednostavno kopirajte i zalepite sledeći kod u vaš theme.json fajl i promenite veličine fontova u pikselima:
{
"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"
}
]
}
}
}Napomena: Ukoliko editujete theme.json fajl unutar direktorijuma parent teme, onda je prethodno potrebno da pronađete kod u kojem piše fontSizes.
Trebalo bi da se nalaziu okviru typography i settings, kao na primeru ispod:
{
"settings": {
// Some code...
"typography": {
// Some code...
"fontSizes": [
// Font size definitions here
]
}
}
}Nakon toga zamenite prethodno pomenute linije koda ovim kodom iznad. Samo obratite pažnju da ovaj kod ne sadrži neke sintaksne greške.
Kada ste završili sačuvajte fajl da biste videli upravo napravljene izmene.
Ukoliko dalje želite da uditujete theme.json fajl na vašem sajtu, preporučujemo da se dobro informišete o strukturi ovog fajla, kao što smo već pominjali ranije u tekstu.
Takođe, preporučujemo da pročitate WordPress Setting Reference, koji uključuje celu listu dostupnih podešavanja za svojstvo Settings i instrukcije kako da ih koristite da biste pravilo editovali podešavanja na svom web sajtu.
Nenad Mihajlović