Wordpress hijerarhija predložaka

Prilikom izrade prilagođene WordPress teme, jedan od prvih pojmova s kojim ćete se susresti je hijerarhija predložaka.

Hijerarhija predložaka je sustav koji WordPress koristi kako bi odlučio koju datoteku predloška (PHP datoteku) upotrijebiti za prikaz svake stranice na vašoj web stranici. Razumijevanje hijerarhije predložaka ključno je za prilagodbu izgleda različitih vrsta sadržaja na vašoj stranici.

U ovom vodiču objasnit ćemo što je hijerarhija predložaka, pregledati osnovne datoteke predložaka kao što su index.php, page.php, single.php, archive.php i 404.php, te pokazati primjere kako WordPress odabire predložak za različite tipove sadržaja.

Također ćemo ukratko objasniti kako možete nadjačati zadane predloške za određene stranice, objave ili kategorije kako biste po potrebi stvorili jedinstven izgled.

Što je WordPress hijerarhija predložaka?

Hijerarhija predložaka WordPressa je skup pravila prema kojima WordPress određuje koju datoteku predloška u vašoj temi treba koristiti za prikaz tražene stranice.

WordPress teme sastoje se od datoteka predložaka (poput header.php, footer.php, index.php, itd.), a svaka od tih datoteka ima svoju ulogu.

Hijerarhija određuje redoslijed kojim će WordPress tražiti te datoteke. WordPress uvijek najprije pokuša pronaći najkonkretniji (najspecifičniji) predložak, a ako ga ne nađe, poseže za sljedećim u nizu. Tako nastavlja sve dok ne pronađe odgovarajući predložak.

Ako nijedan specifičniji predložak ne postoji, WordPress će na kraju upotrijebiti opći predložak (obično index.php) kako bi prikazao sadržaj.

Primjer: Ako posjetitelj pregleda pojedinačnu blog objavu, WordPress će najprije potražiti predložak specifičan za tu objavu ili njen tip, a ako ga ne pronađe, posegnut će za općenitijim predloškom. Na taj način WordPress osigurava da uvijek postoji neki predložak koji se može iskoristiti (pod uvjetom da u temi postoji barem datoteka index.php, koja je obavezna za sve WordPress teme).

Osnovne datoteke predložaka i njihova namjena

WordPress ima niz osnovnih datoteka predložaka koje predstavljaju temelj za temu vaše stranice. U nastavku su neke od najvažnijih za izradu jednostavne prilagođene teme:

• index.php – Glavni, rezervni predložak. WordPress koristi ovu datoteku ako ne pronađe niti jedan drugi, konkretniji predložak. Svaka tema mora imati index.php jer on služi kao univerzalni predložak za sve upite.
• front-page.php – Predložak za početnu stranicu web mjesta. Ako ste u postavkama odabrali statičnu stranicu kao početnu ili ako koristite zadani prikaz najnovijih objava na početnoj stranici, WordPress će prvo potražiti ovu datoteku.
• home.php – Predložak za indeks blog objava (listu najnovijih objava). Ako je početna stranica postavljena da prikazuje najnovije objave, home.php će se koristiti za taj prikaz. Ako koristite statičnu početnu stranicu, tada će home.php biti korišten za stranicu koja je u postavkama označena kao “Stranica s objavama” (odnosno stranica bloga). Ako home.php ne postoji, WordPress će za prikaz liste objava koristiti index.php.
• single.php – Predložak za pojedinačne objave (postove) standardnog tipa. Ova datoteka služi za prikaz pojedinačne blog objave. Također može poslužiti i kao rezervni predložak za pojedinačne prikaze prilagođenih vrsta objava (više o prilagođenim tipovima objava u nastavku).
• page.php – Predložak za pojedinačne statične stranice. Koristi se za WordPress Stranice (eng. Pages, npr. stranice “O nama” ili “Kontakt”).
• archive.php – Opći predložak za arhivske stranice (liste objava). Pokriva arhive datuma, kategorija, oznaka, autora ili bilo koje druge vrste arhive, ako specifičniji predlošci (poput category.php ili author.php) nisu definirani.
• category.php, tag.php, author.php, taxonomy.php – Specijalizirani predlošci arhive za određene vrste arhiva. Na primjer, category.php se koristi za stranice arhive kategorija, tag.php za arhive oznaka, author.php za arhive autora, a taxonomy.php za arhive prilagođenih taksonomija. Ako ovi specifični predlošci nedostaju, WordPress će se vratiti na archive.php.
• 404.php – Predložak za 404 stranicu (stranica nije pronađena). Ako neki sadržaj ne postoji na zadanoj adresi, ovaj predložak će se upotrijebiti kako bi prikazao korisniku poruku o grešci (npr. “Stranica nije pronađena”).
• search.php – Predložak za stranicu rezultata pretraživanja (stranica koja prikazuje rezultate kada korisnik koristi funkciju pretraživanja).

Navedene datoteke nalaze se u direktoriju vaše teme. Evo primjera strukture datoteka jedne jednostavne teme:

Ne brinite ako vaša tema nema sve ove datoteke. WordPress ne zahtijeva svaku od njih; koristi samo one koje postoje, a za ostalo se oslanja na hijerarhiju kada nešto nedostaje. Međutim, dodavanje ovih specifičnih predložaka omogućuje vam odvojenu kontrolu izgleda za svaku vrstu stranice.

Kako WordPress odabire predložak (primjeri)

Kako bismo bolje razumjeli hijerarhiju predložaka, prođimo kroz nekoliko uobičajenih scenarija. Vidjet ćemo kako WordPress korak po korak bira datoteku predloška za svaku vrstu sadržaja.

U svakom slučaju, WordPress će koristiti prvi predložak koji pronađe u vašoj temi s popisa, a ostale će ignorirati. Ako ne pronađe nijedan, vraća se na index.php kao krajnju opciju.

1. Prikaz početne stranice

Početna stranica web mjesta može se konfigurirati na dva načina: kao statična stranica ili kao lista najnovijih objava bloga. WordPress za svaki slučaj koristi malo drugačiju logiku:

• Statična početna stranica: Ako ste odredili određenu Stranicu (u administraciji pod Postavke > Čitanje) da bude početna stranica weba, WordPress će prvo potražiti front-page.php. Ako ta datoteka postoji, koristit će je za početnu stranicu. Ako ne, tražit će odgovarajući predložak za stranicu:
  1. front-page.php
  2. Ako ga nema, a početna je postavljena kao statična stranica, sljedeće provjerava page-{slug}.php ili page-{ID}.php za tu određenu stranicu.
  3. Ako ni ti predlošci nisu pronađeni, koristi page.php (zadani predložak za stranice).
  4. Ako ni page.php ne postoji, WordPress se vraća na index.php.
• Početna s najnovijim objavama: Ako je vaša početna stranica podešena da prikazuje najnovije objave (zadano ponašanje, odnosno ako u postavkama stoji “Vaše najnovije objave”), WordPress će potražiti predložak home.php:
  1. front-page.php (da, WordPress i u ovom slučaju prvo provjerava front-page.php; ako ova datoteka postoji, ima prednost za početnu stranicu bez obzira na to prikazuje li statični sadržaj ili objave).
  2. Ako front-page.php nije pronađen, zatim home.php (predložak za prikaz blog liste).
  3. Ako ne postoji ni home.php, WordPress pada natrag na index.php.

Primjer: Ako želite prilagođeni dizajn početne stranice, možete napraviti front-page.php. Ako želite prilagođeni dizajn samo za prikaz blog objava (ali da statične stranice nisu pogođene), napravite home.php.

2. Prikaz pojedinačne blog objave

Kada posjetitelj gleda pojedinačnu blog objavu (standardni post tipa “Objava”), WordPress prolazi kroz sljedeći redoslijed kako bi odabrao predložak:

1. single-post.php – predložak specifičan za post type ‘post’ (standardne blog objave). Budući da standardne objave koriste post type “post”, WordPress će prvo provjeriti postoji li single-post.php.
2. Ako ta datoteka ne postoji, traži općeniti predložak za objave: single.php.
3. Ako ni single.php nije dostupan, (opcionalno provjerava singular.php ako ga tema ima, što je generički predložak za bilo koju pojedinačnu objavu ili stranicu).
4. Na kraju, ako nijedan od navedenih predložaka za pojedinačni prikaz nije pronađen, WordPress koristi index.php.

Napomena: Ako imate prilagođene vrste objava (npr. post type nazvan “movie/film”), WordPress bi prvo tražio single-movie.php za pojedinačni prikaz te vrste. Ako ne pronađe takav predložak, koristit će single.php.

3. Prikaz statične stranice (Page)

Za prikaz statične Stranice (npr. stranice “O nama” ili “Kontakt”), WordPress koristi sličan pristup, ali s predlošcima za stranice:

1. Ako stranica ima jedinstveni slug (kratko ime, npr. “o-nama”), WordPress traži page-o-nama.php.
2. Ako ga ne nađe, zatim provjerava predložak s ID-jem stranice, npr. page-42.php (ako je ID te stranice 42).
3. Ako ne postoji ni predložak za slug ni za ID, WordPress koristi zadani predložak page.php.
4. Ako page.php nije dostupan, tada se vraća na index.php.

Primjer: Recimo da želite da vaša stranica “Kontakt” (slug “kontakt”) ima poseban raspored. Možete stvoriti datoteku nazvanu page-kontakt.php unutar svoje teme. WordPress će automatski koristiti tu datoteku za prikaz stranice “Kontakt” umjesto generičkog page.php.

(Usput: WordPress omogućuje i izradu prilagođenih predložaka stranica (Page Template) s posebnim komentarom na vrhu datoteke, koje zatim možete ručno dodijeliti stranicama kroz administracijsko sučelje. To je alternativni način za nadjačavanje izgleda određene stranice, ali malo je drugačiji mehanizam od automatske hijerarhije koju ovdje opisujemo. U ovom vodiču fokusiramo se na automatska pravila hijerarhije.)

4. Prikaz kategorije i ostalih arhiva

Arhivske stranice uključuju stranice kategorija, oznaka (tagova), prilagođenih taksonomija, datumske arhive, arhive autora – ukratko, bilo koju stranicu koja prikazuje listu objava po nekom kriteriju.

Pogledajmo primjer arhive kategorije. Pretpostavimo da imamo kategoriju pod nazivom “Novosti” (slug “novosti”, ID 7). Kada netko pogleda stranicu te kategorije, WordPress traži sljedeće:

1. category-novosti.php – predložak za kategoriju sa slugom “novosti”.
2. Ako ne postoji, category-7.php – predložak za kategoriju s ID-em 7.
3. Ako ni to nije pronađeno, WordPress će koristiti opći predložak category.php za sve kategorije.
4. Ako category.php ne postoji, vraća se na univerzalni arhivski predložak: archive.php.
5. Ako ni archive.php nije pronađen, konačna rezerva je index.php.

Za arhivu oznaka (tag), obrazac je sličan:

1. tag-{slug}.php (npr. tag-wordpress.php za oznaku “wordpress”),
2. zatim tag-{ID}.php,
3. zatim tag.php,
4. zatim archive.php,
5. na kraju index.php.

Za arhivu autora (objave određenog autora):

1. author-{user_nicename}.php (predložak za određenog autora prema korisničkom imenu),
2. zatim author-{ID}.php,
3. zatim author.php,
4. zatim archive.php,
5. na kraju index.php.

Za arhive po datumu (npr. arhiva po godini, mjesecu ili danu):

• WordPress će tražiti datoteku date.php za bilo koju arhivu po datumu (ne postoje posebne datoteke za godinu ili mjesec – koristi se ista datoteka ako postoji).
• Ako date.php nije prisutan, koristi archive.php,
• zatim index.php.

Ukratko, arhive imaju hijerarhiju gdje prvo pokušavaju najkonkretniji predložak (poput category-{slug}.php ili author-{ime}.php), zatim opći predložak za tu taksonomiju (category.php, author.php itd.), zatim generički archive.php, pa index.php.

5. Rezultati pretraživanja

Kada korisnik pretražuje na vašoj stranici i dođe na stranicu s rezultatima pretraživanja, WordPress nastoji upotrijebiti:

1. search.php – namjenski predložak za prikaz rezultata pretraživanja.
2. Ako search.php ne postoji, vraća se na index.php za prikaz rezultata.

Većina tema uključuje search.php kako bi se izgled rezultata pretraživanja mogao prilagoditi odvojeno od uobičajenih arhiva.

6. 404 stranica (stranica nije pronađena)

Ako neka stranica nije pronađena (korisnik je posjetio nepostojeći URL ili je došlo do pogreške u upisu), WordPress prikazuje 404 stranicu. Hijerarhija za to je jednostavna:

1. 404.php – predložak za “Stranica nije pronađena” grešku.
2. Ako 404.php ne postoji, WordPress će jednostavno koristiti index.php i preko njega prikazati osnovnu poruku o grešci (ovisno o kodu u index.php petlji).

Posjedovanje 404.php datoteke omogućuje vam dizajn korisnički prijazne stranice za grešku 404 (možda s trakom za pretraživanje ili poveznicama na popularan sadržaj).

Nadjačavanje predložaka za određeni sadržaj

Jedna od najkorisnijih značajki hijerarhije predložaka je ta što lako možete nadjačati zadane predloške za određeni sadržaj i time stvoriti prilagođene dizajne. Evo kako to možete učiniti:

• Posebni predlošci za određene stranice (prema slug-u ili ID-u): Kao što je spomenuto, ako želite da određena statična stranica ima vlastiti dizajn, izradite datoteku predloška nazvanu prema njenom slug-u ili ID-u. Na primjer:
  • page-kontakt.php za stranicu “Kontakt”, ili
  • page-42.php za stranicu s ID-em 42. WordPress će koristiti te datoteke za te stranice umjesto općeg page.php.
• Posebni predlošci za kategorije ili oznake: Slično, možete ciljano prilagoditi određenu kategoriju ili oznaku:
  • category-novosti.php za kategoriju “Novosti”,
  • tag-wordpress.php za oznaku “wordpress”. Na taj način, ta arhivska stranica može imati jedinstven izgled ili stil, različit od ostalih.
• Predlošci za prilagođene vrste objava: Ako vaša stranica koristi prilagođene vrste objava (custom post types, npr. knjige, portfolio itd.), možete izraditi predloške poput single-knjige.php ili archive-portfolio.php kako biste kontrolirali kako se prikazuju te vrste sadržaja. WordPress će ih automatski koristiti za pripadajuće prikaze te vrste sadržaja.
• Nadjačavanje u child temi: Ako prilagođavate postojeću temu putem child teme (pod-teme), možete nadjačati bilo koji predložak iz parent teme tako da u child temi uključite datoteku istog imena. Na primjer, ako želite nadjačati archive.php nadređene teme, dovoljno je da u child temu dodate vlastiti archive.php. WordPress će zbog hijerarhije uvijek uzeti datoteku iz child teme umjesto one iz parent teme.
• Korištenje uvjetnih tagova u predlošcima: Ako radije ne želite stvarati mnogo različitih datoteka, alternativno možete unutar jedne datoteke predloška (poput index.php ili archive.php) koristiti uvjetne provjere u PHP-u kako biste prilagodili izlaz za različite kontekste. Na primjer, možete koristiti funkcije poput is_category() unutar petlje kako biste detektirali da li je stranica kategorije i onda prikazali drugačiji sadržaj ili izgled. Ipak, korištenje zasebnih datoteka predložaka obično je čišće i lakše za održavanje.

Primjer: Zamislite da imate kategoriju “Tutorijali” za koju želite poseban banner na vrhu arhive. Možete stvoriti datoteku category-tutorijali.php i unutar nje započeti s <?php get_header(); ?>, zatim dodati prilagođeni banner koji će se prikazivati samo za kategoriju “Tutorijali”, potom standardnu petlju za ispis objava, i na kraju <?php get_footer(); ?>. Sve ostale kategorije i dalje bi koristile uobičajeni category.php ili archive.php, ali kategorija “Tutorijali” automatski će koristiti svoj vlastiti predložak.

Savjeti za početnike

Razumijevanje hijerarhije predložaka pomaže vam da isplanirate i organizirate datoteke svoje teme tijekom razvoja prilagođene WordPress stranice. Evo nekoliko završnih savjeta:

• Počnite jednostavno: Započnite s datotekom index.php (i naravno style.css koja sadrži osnovne podatke o temi) te po potrebi i s functions.php. Kako budete trebali specifičnije izglede za određene dijelove stranice, postupno dodajte druge predloške.
• Iskoristite hijerarhiju: Kad god vam zatreba drugačiji raspored za određenu vrstu sadržaja, sjetite se da možete stvoriti novu datoteku predloška s odgovarajućim imenom. WordPress će je automatski prepoznati i upotrijebiti zahvaljujući hijerarhiji.
• Referencirajte službenu shemu: WordPress ima službenu shemu (dijagram) hijerarhije predložaka (dostupnu u dokumentaciji za razvoj tema) koja vizualno prikazuje redoslijed korištenja predložaka. Držite je pri ruci kao brzi podsjetnik.
• Child teme: Ako prilagođavate tuđu (postojeću) temu, koristite child temu i iskoristite hijerarhiju kako biste sigurno nadjačali predloške bez izmjene originalne teme.
• Testirajte svoje predloške: Napravite nekoliko probnih objava, stranica, kategorija itd. i pregledajte ih kako biste provjerili koristi li WordPress predložak koji očekujete. Ako vidite dizajn koji ne odgovara vašim očekivanjima, možda trebate stvoriti ili ispraviti odgovarajuću datoteku predloška.

Korištenjem hijerarhije predložaka dobivate finu kontrolu nad time kako je svaki dio vaše WordPress stranice prikazan, i to bez potrebe da pišete kompleksan uvjetni kod za svaki slučaj. U početku hijerarhija može djelovati pomalo zbunjujuće, ali uz praksu postaje logičan i koristan alat pri razvoju tema. Sretno s izradom vaše teme!