Kako da iskoristite theme.json fajl za kreiranje modernih WordPress sajtova

Od kada se sa verzijom WordPress-a 5.8 pojavila Full site editing (FSE) funkcionalnost, korisnici WordPress-a imaju mnogo više kontrole nad sadržajem i načinom na koji se on uređuje na sajtu. 

Takođe, ukoliko ste WordPress developer, sa full site editing funkcionalnošću imate mogućnost da preko theme.json fajla detaljno uređujete WordPress temu, bez potrebe da pišete kod.

U ovom tekstu ćemo objasniti šta je theme.json fajl, kako i u kakvom je on odnosu sa full site editing funkcionalnošću. Isto tako ćemo objasniti kako da iskoristite theme.json fajl za kreiranje modernih i brzih web sajtova.

Ujedno, ukoliko želite da saznate više o tome šta je full-site-editing, predlažemo da pročitate naš Kompletan vodič za WordPress full-site editing (FSE).

Šta je theme.json fajl?

Theme.json fajl je konfiguracioni fajl koji definiše podešavanja i stilove vaše WordPress teme. Ovaj fajl daje temama mogućnost da kontrolišu boje, tipografiju, razmake, i druge vizuelne elemente, kako u blok-editoru, tako i na frontend-u. 

Theme.json fajl vam omogućava uključivanje ili isključivanje određenih funkcionalnosti blokova, čime se smanjuje potreba za ručnim pisanjem CSS-a. Kao što iz njegovog naziva možete i sami da zaključite, ovaj fajl koristi JSON format za definisanje pravila, čime olakšava prilagođavanje izgleda sajta i blokova.

Funkcionalnosti theme.json fajla

Theme.json fajl ima zaista puno korisnih funkcionalnosti. Hajde da krenemo redom i detaljnije se upoznamo sa svakom od njih.

Centralizovano upravljanje stilovima

Jedna od glavnih funkcionalnosti theme.json fajla je da definiše globalne stilove na jednom mestu. Umesto da stilovi budu smešteni u različite CSS datoteke i PHP funkcije, theme.json omogućava da se svi ključni elementi dizajna definišu na jednom mestu. Ovo uključuje:

• Boje (definicija paleta boja)
• Tipografija (fontovi, veličine fonta)
• Layout (margine, padding, širina sadržaja)

Ova struktura olakšava održavanje i prilagođavanje stilova jer su svi parametri grupisani na jednom mestu i lako dostupni.

Podrška za globalne stilove

WordPress je sa uvođenjem theme.json fajla omogućio korišćenje globalnih stilova, čime se dodatno olakšava doslednost dizajna na celom sajtu. Ova funkcionalnost omogućava da definišete globalne postavke za sve elemente sajta, kao što su:

• Globalne boje za tekst i pozadine
• Stilovi za sve blokove (npr. naslovne, tekstualne i slike)

Ove postavke se automatski primenjuju na sve relevantne delove sajta, bez potrebe za pisanjem posebnog koda za svaki blok ili stranicu.

Prilagođavanje blokova (Block Editor Settings)

Još jedna ključna funkcionalnost theme.json fajla je kontrola nad blokovima u WordPress Gutenberg editoru. Korišćenjem ovog fajla, možete precizno definisati koje opcije blokova će biti dostupne korisnicima, a koje neće. Ovo uključuje:

• Aktiviranje ili deaktiviranje specifičnih blokova
• Kontrola nad stilovima unutar svakog bloka
• Definisanje specifičnih postavki za uređivanje, kao što su boje, margine, fontovi

Na ovaj način, možete ograničiti ili proširiti funkcionalnosti određenih blokova u skladu sa potrebama dizajna i korisničkog iskustva.

Podrška za prilagođene postavke korisnika

Jedna od prednosti theme.json fajla je i mogućnost da sami prilagođavate konkretnu WordPress temu. Ova funkcionalnost vam omogućava da, bez obzira na vaše tehničko znanje, menjate boje, fontove ili druge postavke direktno iz WordPress Customizer-a ili blok editora, a sve to bez potrebe da pišete ili ispravljate kod unutar teme.

• Control panel za boje i tipografiju: Možete birati između unapred definisanih opcija iz theme.json fajla, bez narušavanja dizajna sajta.
• Personalizacija blokova: Blokovi se mogu prilagoditi specifičnim potrebama, pritom zadržavajući usklađenost sa globalnim stilovima.

Fleksibilnost i proširivost

Theme.json vam pruža zaista veliku fleksibilnost u razvoju tema, jer omogućava prilagođavanje na različitim nivoima – od osnovnog dizajna do specifičnih blokova. Takođe, omogućava lako proširenje funkcionalnosti bez potrebe za većim promenama u strukturi koda. Zahvaljujući JSON formatu, ukoliko ste developer možete jednostavno dodavati nove opcije, a WordPress će ih automatski prepoznati.

Optimizacija performansi

Koristeći theme.json, možete smanjiti broj CSS datoteka i stilova koji se učitavaju na stranici, jer sve te stilove možete definisati centralno u jednom fajlu. Ovo za rezultat ima bolju optimizaciju sajta, smanjenje HTTP zahteva i brže vreme učitavanja web sajta, što je ključno za korisničko iskustvo i SEO skor vašeg sajta.

Gde se nalazi theme.json fajl?

Za početak važno je da znate da theme.json fajl nećete podrazumevano pronaći u svim WordPress temama. On se nalazi isključivo u blok temama, a možete ga po potrebi i sami kreirati. Preduslov za to je da koristite WordPress 5.8 ili neku kasniju verziju.

Uobičajena lokacija theme.json fajla je unutar foldera wp-content/themes/naziv-vaše-teme. Ukoliko se fajl ne nalazi na ovoj lokaciji, možete po potrebi otvoriti svoj kod editor i kreirati svoj theme.json fajl. 

U nastavku ćemo korak po korak objasniti kako da kreirate svoj theme.json fajl.

Šta će vam sve biti potrebno za rad sa theme.json fajlom?

Za rad sa theme.json fajlom biće potrebno da imate neko osnovno znanje o kreiranju i podešavanju WordPress teme. Pre svega tu mislimo na:

• Osnovno poznavanje JSON formata. Verujemo da ovo možete brzo naučiti, ali je svakako važno da se pre svega upoznate sa JSON sintaksom i strukturom.
• Osnovno poznavanje CSS-a. Tokom rada sa theme.json fajlom, primetićete da njegovi objekti i svojstva sadrže CSS kod. Iz tog razloga je poznavanje CSS-a neophodno da biste mogli pravilno da koristite theme.json fajl.
• Osnovno poznavanje WordPress blok editor-a. Ukoliko želite da podešavate opcije za uređivanje blokova, važno je da pre toga dobro razumete kako rade blokovi u WordPress-u i na koji način možete da ih uređujete.

Iako nije neophodno, dobro bi bilo da razumete i bar neke osnovne koncepte vezano za full site editing funkcionalnost. To će vam pomoći da iskoristite theme.json fajl na efikasniji način.

Takođe, osnovno poznavanje HTML-a i JavaScript-a može pomoći da u nekim slučajevima uredite kod tako da odgovara onome što ste želeli da postignete sa temom koju uređujete.

Sa svim navedenim biće vam lakše da krenete u prilagođavanje svoje WordPress teme pomoću theme.json fajla.

Struktura i hijerarhija theme.json fajla

Kako smo već pomenuli, theme.json fajl ima određenu strukturu koju je potrebno da razumete kako biste mogli da radite sa njim. Takođe, ovaj fajl poseduje i određenu hijerarhiju, kao i neke jedinstvene elemente koje ćemo u nastavku detaljnije objasniti.

Hajde da krenemo od strukture, a zatim ćemo preći i na ostale elemente theme.json fajla.

Osnovna struktura

Imajući u vidu da theme.json fajl prati strukturu JSON fajla, možda vam je već i poznata ova struktura. Ukoliko nije, ne brinite, u nastavku ćemo vam predstaviti osnovni koncept JSON fajla. 

Ceo objekat JSON fajla je ograničen vitičastim zagradama, a isto važi i za neke druge objekte unutar fajla. Svaki objekat se sastoji od tzv ključ-vrednost para (key-value pair). Ključevi se nalaze između jednostrukih ili dvostrukih znakova navoda, a na kraju linije sa ključem nalaze se dve tačke koje označavaju kraj ključa.

Osnovno što theme.json fajl mora da sadrži su objekti version, settings i styles.

{
    "version": 2,
    "settings": {
      // Ovde ubacite globalna podešavanja
    },
    "styles": {
      // Ovde ubacite globalne stilove
    }
}

Objekti settings i styles su prilično jasni, ali objekat version zahteva malo više objašnjenja.

Ova vrednost treba da bude integer (broj) koji odgovara verziji API-ja koju koristite da čitate vaš fajl. Trenutna verzija ovog API-ja je 3, iako je često prisutna i verzija 2, a možete i da migrirate sa starijih verzija.

Većina struktura theme.json fajla uključuje i schema. Ona vam u suštini omogućava da radite sa auto-completion funkcionalnošću unutar vašeg code editor-a. i obezbeđuje validaciju fajla.

Ovo možete dodati na vrh svog theme.json fajla:

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

Odavde sada možete dodavati različita svojstva i objekte u settings i styles, kako biste izgradili svoj fajl.

Hijerarhija

Theme.json fajl prati hijerarhijsku strukturu i samo je jedan nivo celokupne strukture za settings i styles na vašem sajtu. Ukoliko imate osnovno znanje iz CSS-a, onda će vam sigurno biti lakše da ga razumete, jer je ovaj fajl po svojoj složenosti vrlo sličan CSS-u.

Ukratko, prilagođavanja koja pravite unutar theme.json fajla možda se neće uvek prikazati na frontend-u vašeg sajta (ono što vide posetioci vašeg web sajta). Podešavanja koje radi korisnik imaju prioritet nad ostalim. To znači da koje god izmene da korisnik uradi preko Appearance → Editor, će se pojaviti na frontend-u.

Ukoliko koristite child temu i uključite theme.json fajl, to će pregaziti sve izmene osim onih koje su napravljene putem Site Editor-a. Isto tako, sve što definišete unutar konfiguracionog fajla vaše parent teme, će pregaziti WordPress-ova podrazumevana podešavanja i stilove. 

Ukoliko niste sigurni kako da kreirate i koristite WordPress child temu, pročitajte Kako napraviti WordPress child temu.

Iako to nije tema ovog teksta, ove vrednosti možete pregaziti i korišćenjem WordPress udica i filtera. Ovi dinamički filteri vam omogućavaju da kreirate plugine i teme koje takođe menjaju podešavanja i stilove teme.

Block grammar

Ukoliko otvorite WordPress Block ili Site Editor i idete na post ili stranicu, a zatim uključite Code Editor, primetićete u sadržaju dosta toga što liči na HTML komentare.

Ovo je zato što umesto da koristi PHP fajlove, blok tema koristi HTML fajlove zajedno sa komentarima i Block označavanjima da bi kreirala vaš web sajt. Kombinacija ovih elemenata za rezultat ima Block grammar koji vam je potreban da biste napravili svoj theme.json fajl.

Za blokove koji imaju sadržaj, kao što je na primer Paragraph blok, treba da obuhvatite taj sadržaj:

<!-- wp:paragraph -->
    <p>Ovde ide vaš sadržaj</p>
<!-- /wp:paragraph -->

U ostalim slučajevima, potrebni su vam samo single-line komentari ili oni koji se sami zatvaraju. Sa nekim blokovima, možete da kombinujete tipove i kreirate svoj layout i dizajn. Takođe, možete da ubacite i ove komentare:

<!-- wp:columns -->
<div class="wp-block-columns">
    <!-- wp:column -->
        <div class="wp-block-column"></div>
    <!-- /wp:column -->
    

    <!-- wp:column -->
        <div class="wp-block-column"></div>
    <!-- /wp:column -->
</div>
<!-- /wp:columns -->

Ovde smo kreirali kolona blok pomoću wrapper komentara. Unutar ovog bloka možemo da dodamo HTML da bismo dizajnirali te kolone i uključili zasebne wrapper-e. Ovo bi bilo jednostavno na frontend-u, imajući u vidu da ćete često smeštati ove blokove jedan u drugi.

Da biste pronašli oznaku za konkretan blok, preporučujemo da pogledate Block Editor Handbook. U ovom dokumentu ćete lako pronaći sve što vam je potrebno.

Najjednostavniji način je da jednostavno dodate blok u WordPress, otvorite svoj omiljeni code editor i kopirate oznaku odatle.

Kako da kombinujete theme.json i WordPress full site editing funkcionalnost

Iz prethodne sekcije u kojoj smo opisali hijerarhiju theme.json fajla, mogli ste da vidite da theme.json fajl ima značajnu ulogu u FSE-u (full-site-editing). Oni rade zajedno i kao takvi daju jedno zaokruženo rešenje za prilagođavanje teme u WordPress-u. Na primer, interfejs pod nazivom Global Styles je u stvari vizuelna predstava vašeg theme.json fajla.

Možete da menjate podešavanja u Global Styles panelu ili u konfiguracionom fajlu, a WordPress će primeniti te izmenjene vrednosti. Iako podešavanja u Site Editor-u imaju prednost nad ostalima, theme.json fajl predstavlja temelj svih naknadno izmenjenih stilova vaše teme.

Global Styles omogućava krajnjem korisniku da zameni vaša podrazumevana podešavanja svojim, bez potrebe da edituje ili dodaje kod u theme.json fajl.

Dodatno, prilagođena CSS svojstva koja definišete u theme.json fajlu postaće dostupna i u Global Styles interfejsu. Ovo omgućava korisnicima da iskoriste ta svojstva za mnogo usklađeniji stil na celom sajtu.

Ovo ide do toga da možete definisati specifične blok stilove i podešavanja, koje dalje možete podešavati iz WordPress admin dashboard-a.

Da zaokružimo, theme.json obezbeđuje mnogo veću kontrolu nad podešavanjima i stilovima. U pitanju je alat prvenstveno namenjen developerima, koji nudi mnogo jednostavnije i konkretnije rešenje u odnosu na tradicionalni način (pisanje ili uređivanje koda). 

Sa druge strane, Global Styles interfejs daje svakom korisniku mogućnost da prilagodi temu prema svom ukusu. Kako budete naknadno razvijali WordPress teme, videćete kako oni najbolje rade u paru, tako da vam pomognu da kreirate nove layout-e i dizajne za te teme.

Kako da radite sa svojstvima theme.json fajla

Sada kada razumete osnove, možete da počnete da radite sa objektima i svojstvima unutar theme.json fajla. Naravno, nećemo moći da pokrijemo svaku moguću primenu, ali ćete svakako do kraja ovog teksta moći da i sami napravite teme koje nude sve funkcionalnosti, a ujedno i lepo izgledaju na frontend-u.

Settings

Settings svojstvo vam omogućava da kontrolišete koje funkcionalnosti nudite u Site Editor-u i kako će one raditi. U pitanju je svojstvo navišeg nivoa, a unutar njega ćete uglavnom naći nekoliko ugneždenih elemenata.

Sada kada smo videli stilove i njihove varijacije, možemo da primetimo da postoji određeno preplitanje između ove dve opcije. Ipak, obe imaju svoje konkretne uloge u kreiranju vaše teme.

Imate određeni broj dostupnih svojstava:

{
    "version": 3,
    "settings": {
        "appearanceTools": false,
        "blocks": {},
        "border": {},
        "color": {},
        "custom": {},
        "dimensions": {},
        "layout": {},
        "position": {},
        "shadow": {},
        "spacing": {},
        "typography": {},
        "useRootPaddingAwareAlignments": false
    }
}

Zvanični WordPress Theme Developer Handbook sadrži i reference za sva ova podešavanja (i stilove).

Ovde ćemo predstaviti samo one najvažnije, za koje smatramo da je potrebno dodatno ih pojasniti:

appearanceTools

appearanceTools je nova opcija u theme.json fajlu koja omogućava ili onemogućava postavljanje alata za prilagođavanje izgleda blokova unutar Gutenberg editora (od WordPress 6.2). Ova funkcionalnost olakšava korisnicima da prilagode stilove bez pisanja CSS-a, direktno unutar editora. Na primer, opcije poput promene boja, margina, padding-a i slično možete kontrolisati ovde.

Primer:

{
  "settings": {
    "appearanceTools": true
  }
}

• Kada je postavljeno na true, korisnici mogu da pristupe različitim alatima za prilagođavanje dizajna kroz blok editor.
• Kada je postavljeno na false, ovi alati neće biti prikazani.

blocks

Ovaj deo konfiguracije omogućava prilagođavanje postavki za specifične blokove u WordPress editoru. Unutar blocks svojstva možte definisati postavke za svaki blok pojedinačno, uključujući stilove i podešavanja specifična za taj blok.

Primer:

{
  "settings": {
    "blocks": {
      "core/paragraph": {
        "typography": {
          "fontSize": "large"
        }
      },
      "core/heading": {
        "color": {
          "text": "#333"
        }
      }
    }
  }
}

U ovom primeru:

• Blok core/paragraph koristi tipografsku postavku sa velikom veličinom fonta.
• Blok core/heading koristi tamnosivu boju teksta.

Možete konfigurisati bilo koji podržani blok na ovaj način, uključujući prilagođene blokove koje kreirate.

custom

Svojstvo custom se koristi za omogućavanje ili onemogućavanje prilagođenih stilova (kao što su customColors, customSpacing, itd.). U suštini, to kontroliše koliko slobode korisnici imaju u editovanju sadržaja. Kada je ova opcija onemogućena, korisnici ne mogu koristiti prilagođene stilove van onih koje je definisao autor teme.

Primer:

{
  "settings": {
    "custom": {
      "customSpacing": true,
      "customColors": false
    }
  }
}

U ovom primeru:

• Prilagođeno podešavanje razmaka (customSpacing) je omogućeno, što znači da korisnici mogu prilagođavati razmake između elemenata.
• Prilagođeno podešavanje boja (customColors) je onemogućeno, što znači da korisnici ne mogu slobodno birati boje van onih koje tema definiše.

useRootPaddingAwareAlignments

Ovo svojstvo se koristi za omogućavanje ili onemogućavanje prilagođavanja poravnanja blokova u zavisnosti od padding vrednosti definisane na nivou korena (root). Ono je korisno kada želite da blokovi registruju padding roditeljskog kontejnera i ponašaju se u skladu s tim, posebno pri poravnavanju (npr. alignwide, alignfull).

Primer:

{
  "settings": {
    "useRootPaddingAwareAlignments": true
  }
}

• Kada je postavljeno na true, blokovi sa širim ili punim poravnanjem (wide, full) uzimaće u obzir padding koji je definisan na root nivou.
• Kada je postavljeno na false, blokovi neće biti svesni tog padding-a i možda neće ispravno prikazivati šire poravnanje u odnosu na sadržaj.

Ova opcija pruža fleksibilnost prilikom definisanja kako se blokovi prikazuju unutar različitih kontejnera sa padding-om, omogućavajući precizniju kontrolu nad izgledom stranice.

Kako da definišete podešavanja unutar theme.json fajla

Kada je potrebno definisati podešavanja, svako svojstvo ima određeni broj pod-svojstava ključ-vrednost para. Na primer, na sledeći način možete da kreirate palete boja:

{
    "version": 3,
    "settings": {
        "color": {
          "palette": [
            {
              "color": "#0073aa",
              "name": "Primary",
              "slug": "primary"
            },
            {
              "color": "#23282d",
              "name": "Secondary",
              "slug": "secondary"
            }
          ],
…

Druga svojstva imaju jednostavne Bulove vrednosti, koje mogu uključiti ili isključiti određene funkcionalnosti unutar Site Editor-a:

{
    "version": 3,
    "settings": {
        "color": {
            "background": true,
            "defaultPalette": true,
            "link": true,
            "text": true
        }
    }
}

Stilovi i varijacije stilova

Dok settings svojstvo definiše pristup određenim opcijama za stilizovanje, styles svojstvo definiše globalne stilove za vašu temu. U pitanju je svojstvo najvišeg prioriteta, koje može da sadrži višestruklo ugnježdene elemente. Možete da ciljate određene elemente, blokove ili čak da koristite prilagođena CSS svojstva.

Važno je da ovde definišete stilove teme, tako da kasnije možete da im pristupite preko Site Editor-a i dodatno ih prilagodite. Ovde možete da koristite sledeće elemente:

{
    "version": 3,
    "styles": {
        "border": {},
        "color": {},
        "dimensions": {},
        "filter": {},
        "shadow": {},
        "spacing": {},
        "typography": {},
        "css": {}
    }
}

Ipak, nećete često koristiti većinu ovih svojstava. Umesto toga, neka će uglavnom raditi sa blokovima elemenata. Na primer:

…
"styles": {
    "blocks": {
        "core/group": {
            "color": {
                "text": "#000000",
                "background": "#ffffff",
                "link": "#777777"
            }
…

Za globalne stilove biće potrebno da radite u root-u, što je u korelaciji sa <body> tagom vaše stranice.  Za određene elemente, možete da pratite strukturu sličnu blokovima, samo ovaj put koristeći elements svojstvo:

…
"styles": {
    "elements": {
        "button": {
            "color": {
                "text": "#ffffff",
                "background": "#aa3f33"
            }
…

Ukoliko pogledate u bilo koju izmenu koju radite u Site Editor-u, trebalo bi da ih sve vidite ovde. Ova oznaka će takođe generisati CSS za bilo koji stil koji ste kreirali:

Imajte u vidu da takođe možete da stilizujete pseudo-klase za elemente, kao što su hover i focus.

…
"elements": {
    "button": {
        "color": {
            "text": "#ffffff",
            "background": "#aa3f33"
        },
        ":hover": {
            "color": {
                "background": "#822f27"
            }
…

Varijacije stilova

Pre nego što nastavimo dalje sa stilovima, verovatno ćete želeti da znate nešto više o varijacijama stilova. Unutar FSE interfejsa možete da vidite različite palete boja i tipografske stilove:

Ipak, to nije nešto što ste kodirali u theme.json fajlu. Unesto toga, napravićete alternativne verzije fajla, dati im jedinstvena imena i sačuvati ih unutar styles foldera vaše WordPress teme.

Imajte u vidu da je naslov unutar oznaka jedinstven za svaki alternativni JSON fajl. To je opciono polje, ali ipak preporučujemo da ga koristite kako biste imali jasno definisane fajlove.

Custom Templates i Template Parts u WordPress-u

Custom templates i template parts su ključni koncepti WordPress teme kada je u pitanju prilagođavanje izgleda i funkcionalnosti stranica. Koristeći theme.json fajl, WordPress omogućava definisanje i prilagođavanje šablona (templates) i delova šablona (template parts) na standardizovan i strukturiran način.

Custom Templates

Custom templates su unapred definisani šabloni koji se koriste za prikazivanje različitih vrsta sadržaja u WordPress-u. Na primer, različiti šabloni mogu biti korišćeni za stranice, postove, ili prilagođene tipove sadržaja (custom post types). Ovi šabloni omogućavaju specifične rasporede elemenata, stilove i strukture za određene tipove stranica.

U theme.json, prilagođeni šabloni se definišu pomoću svojstva customTemplates. Evo osnovnih svojstava koja se koriste:

• customTemplates: Definiše listu šablona koja će biti dostupna za korišćenje u temi.
• name: Jedinstveno ime koje identifikuje šablon unutar teme.
• title: Naslov koji se prikazuje korisnicima unutar WordPress administracije prilikom odabira šablona.
• postTypes: Tipovi postova (post types) na koje se ovaj šablon odnosi, kao što su post, page, ili prilagođeni tipovi sadržaja.

Primer strukture u theme.json:

{
  "customTemplates": [
    {
      "name": "custom-homepage",
      "title": "Custom Homepage",
      "postTypes": ["page"]
    },
    {
      "name": "custom-single-post",
      "title": "Custom Single Post",
      "postTypes": ["post"]
    }
  ]
}

U ovom primeru:

• custom-homepage je šablon prilagođen za page tip posta, odnosno statične stranice. Naziv koji će biti prikazan korisnicima unutar administracije je Custom Homepage.
• custom-single-post je šablon koji se koristi za post tip posta, odnosno za pojedinačne blog postove, sa prikazanim naslovom Custom Single Post u admin panelu.

Prilagođeni šabloni su korisni jer omogućavaju jednostavno prilagođavanje različitih tipova stranica bez potrebe za ručnim kreiranjem prilagođenih PHP fajlova.

Template Parts

Template parts (delovi šablona) omogućavaju modularno kreiranje delova stranice. Oni predstavljaju manje, višekratno korišćene delove šablona, kao što su zaglavlje (header), podnožje (footer), bočna traka (sidebar) ili bilo koji drugi deo stranice koji se ponavlja na više različitih šablona. Ovi delovi se koriste kako bi olakšali organizaciju i održavanje šablona.

Template parts se mogu koristiti unutar glavnog šablona pomoću blokova ili direktno u kodu teme.

Svojstva template parts uključuju:

• name: Jedinstveno ime template part-a.
• title: Naziv koji se prikazuje u editoru prilikom odabira dela šablona.
• area: Definiše gde će se template part koristiti na stranici, najčešće su dostupne sledeće vrednosti:
  • header: Zaglavlje stranice.
  • footer: Podnožje stranice.
  • sidebar: Bočna traka.
  • general: Opšti deo šablona koji može biti bilo gde na stranici.

Primer definisanja template parts unutar theme.json:

{
  "templateParts": [
    {
      "name": "header",
      "title": "Site Header",
      "area": "header"
    },
    {
      "name": "footer",
      "title": "Site Footer",
      "area": "footer"
    },
    {
      "name": "sidebar",
      "title": "Sidebar",
      "area": "sidebar"
    }
  ]
}

U ovom primeru:

• header je template part koji se odnosi na zaglavlje stranice, prikazano u editoru pod nazivom Site Header.
• footer je deo šablona koji se koristi za podnožje stranice, prikazan pod imenom Site Footer.
• sidebar je bočna traka koja je postavljena u sekciju sidebar.

Integracija Custom Templates i Template Parts

Unutar glavnih šablona (templates), možete učitati template parts koristeći blok strukturu u blok editoru, kao i definisanje specifičnih struktura za određene stranice ili postove. Na primer, možete kreirati šablon za stranicu koja koristi prilagođeno zaglavlje i podnožje, ali različite rasporede sadržaja.

Primer strukture šablona u WordPress-u koristeći template parts:

<!-- wp:template-part {"slug":"header"} /-->
<!-- wp:paragraph -->
<p>Ovo je sadržaj stranice.</p>
<!-- /wp:paragraph -->
<!-- wp:template-part {"slug":"footer"} /-->

U ovom primeru koristite blokove kako biste uključili zaglavlje i podnožje iz template parts, dok između njih prikazujete glavni sadržaj stranice.

Kada da koristite theme.json fajl, a kada WordPress Full Site Editing funkcionalnost

kao što ste iz do sada prezentovanog videli, theme.json fajl i WordPress Full Site Editing (FSE) su dve ključne komponente koje omogućavaju prilagođavanje tema i upravljanje stilovima u WordPress-u. Oba pristupa su deo novog blok editora, ali služe različitim potrebama i scenarijima. Evo nekih predloga kada je najbolje koristiti jedan ili drugi.

Kada koristiti theme.json fajl?

theme.json je alat za developere koji omogućava preciznu kontrolu nad stilovima i postavkama teme. Koristi se za definisanje globalnih stilova i funkcionalnosti koje će biti usklađene u svim delovima nekog web sajta. Evo nekih situacija kada je najbolje koristiti theme.json:

• Globalna kontrola stila: Ako želite da postavite globalne stilove kao što su tipografija, boje, spacing (razmaci), raspored i poravnanje za ceo sajt, theme.json fajl vam omogućava da sve to konfigurišete na jednom mestu. Ovo je odličan način da održite doslednost dizajna na svim stranicama i postovima.
• Centralizovano upravljanje opcijama: theme.json fajl omogućava centralizovano upravljanje alatima za prilagođavanje koje će korisnici imati u blok editoru, kao što su appearanceTools, prilagođeni razmaci, ili onemogućavanje nekih opcija korisnicima, kao što su prilagođene boje ili fontovi. Ovo je idealno kada želite da ograničite slobodu korisnika i zadržite vizuelni identitet sajta pod kontrolom.
• Prilagođene postavke blokova: Možete postaviti specifične stilove za određene blokove koristeći svojstvo blocks. Ovo omogućava precizno kontrolisanje izgleda i ponašanja blokova u okviru različitih sekcija sajta.
• Kreiranje tematskih stilova bez koda: Kada želite da izbegnete pisanje mnogo CSS-a, theme.json fajl omogućava stilizovanje elemenata kroz JSON strukturu, čime se ubrzava razvoj teme. Na primer, postavljanje boja, fontova i spacing-a bez pisanja klasičnog CSS-a.

Kada koristiti Full Site Editing funkcionalnost?

Full Site Editing (FSE) je alat za korisnike koji omogućava uređivanje celokupnog sajta direktno iz WordPress admin panela, koristeći blok editor. Omogućava kreiranje i uređivanje različitih delova sajta (kao što su zaglavlje, podnožje, arhive, pojedinačni postovi) bez direktnog uplitanja u kod. FSE omogućava korisnicima da kreiraju vizuelno složene rasporede koristeći blokove, bez potrebe za tradicionalnim PHP šablonima.

• Brzo prilagođavanje bez pisanja koda: FSE je najbolji za korisnike koji nemaju tehničko znanje, ali žele da sami prilagođavaju izgled svog sajta. Korisnici mogu uređivati svaki deo sajta koristeći blokove u okviru poznatog blok editora, bez potrebe da ulaze u backend kod.
• Kreiranje i prilagođavanje šablona vizuelno: Umesto ručnog pisanja šablona u PHP-u, korisnici mogu kreirati prilagođene šablone (templates) za različite tipove postova, stranice ili arhive direktno u editoru. FSE omogućava jednostavno povlačenje i postavljanje blokova kako bi se napravio željeni raspored i izgled.
• Upravljanje Template Parts-ima (delovima šablona): Full Site Editing omogućava jednostavno upravljanje i modifikovanje delova šablona kao što su zaglavlja, podnožja ili bočne trake, bez potrebe za pisanjem PHP ili HTML fajlova. Ova funkcionalnost je posebno korisna za korisnike koji žele fleksibilnost u kreiranju različitih rasporeda bez tehničkog znanja.
• Uređivanje specifičnih stranica: Ako želite da brzo izmenite izgled određene stranice (npr. početnu stranicu, kontakt stranicu ili arhivske stranice), FSE omogućava momentalne izmene bez potrebe za intervencijom developera. Možete koristiti ugrađene šablone i prilagođavati ih po potrebi.

Kombinacija oba pristupa

theme.json fajl i Full Site Editing nisu međusobno isključivi — možete ih kombinovati kako biste postigli maksimalnu fleksibilnost i kontrolu:

• Developeri mogu koristiti theme.json kako bi postavili osnovne stilove i opcije, dok krajnji korisnici koriste FSE za uređivanje specifičnih stranica i delova sajta na vizuelan način.
• theme.json fajl može definisati osnovne stilove, dok Full Site Editing omogućava korisnicima da kreiraju specifične šablone i template parts na način koji najbolje odgovara njihovim potrebama.

Da sumiramo:

• Koristite theme.json fajl kada želite centralizovanu kontrolu nad stilovima i funkcionalnostima teme, ili kada kreirate temu za široku upotrebu.
• Koristite Full Site Editing kada želite fleksibilnost i vizuelnu slobodu u prilagođavanju sajta, bez potrebe za dubljim tehničkim znanjem.
• Kombinujte oba pristupa za najbolje od oba sveta — preciznu kontrolu preko theme.json fajla i vizuelnu prilagodljivost pomoću FSE alata.

Na ovaj način, možete kreirati moćne i prilagodljive WordPress teme koje nude jednostavno korišćenje i za developere i za krajnje korisnike.

Nenad Mihajlović