Kako napraviti WordPress temu?

Custom WordPress tema pisana “u kodu” je najkontroliraniji način izrade web stranice u WordPressu, kada je važna brzina, dugoročna održivost i uredničko iskustvo koje odgovara vašem poslovanju (a ne generičkim opcijama gotove teme). U praksi to znači: dizajn i funkcionalnosti gradite prema stvarnom sadržajnom modelu, a WordPressove službene mehanizme (template hijerarhija, hookovi, theme.json, enqueue sustav) koristite da isporučite samo ono što je potrebno.

Zato je to način na koji izrađujemo web stranice za firme.

U ovom članku nećemo navesti WordPress verziju, pa sve što se tiče block tema i verzija theme.json treba provjeriti prema ciljanoj verziji projekta. Block teme su dostupne od WordPressa 5.9+, a “living” specifikacija theme.json v3 cilja WordPress 6.6+ (i najnoviji Gutenberg plugin).

Ukratko: radite u lokalnom okruženju, scaffoldate temu, napravite obavezne datoteke (classic ili block), povežete predloške s hijerarhijom predložaka, pravilno enqueueate resurse, dodate theme.json (koristan i u classic temama), zatim testirate/debugate (WP_DEBUG + alati) i isporučite kroz Git workflow.

Zašto je custom tema najbolji pristup?

Vizualni builderi poput Elementor mogu ubrzati razvoj prototipa, ali dio fleksibilnosti postižu dodavanjem wrapper elemenata. Elementorova developerska dokumentacija sama navodi da su dobivali feedback kako su mnogi wrapperi nepotrebni te da povećavaju veličinu stranica i štete performansama, zato su ih uveli u proces uklanjanja radi boljeg outputa i brzine. Zašto je to važno? Jer Googleovi performance vodiči objašnjavaju da veliki DOM usporava interakcije i utječe na metrike (npr. INP), a Lighthouse posebno upozorava na “excessive DOM size”.

Gotove teme mogu biti odlične, ali često “pokrivaju sve” pa dolaze s viškom opcija, layouta i asseta. Custom kod (uz WordPressov enqueue sustav i hookove) omogućuje da isporučite samo ono što treba i da resurse učitate kompatibilno i predvidljivo.

Zašto custom WordPress? WordPress već donosi zrelo administracijsko sučelje i velik ekosustav; službeni direktorij navodi 62,000+ dodataka, a tema ima na tisuće.

Mi izrađujemo web stranice “po mjeri” za svakog klijenta, bez univerzalnih predložaka. Cilj je stranica koja odgovara vašem sadržaju i ciljevima konverzije, ostaje brza i održiva godinama. To je i jasna prodajna poruka: ulažete u sustav koji je vaš i koji se može razvijati, a ne u krhke builder layoute.

WordPress danas ima dvije glavne paradigme tema

Block teme (dostupne od WordPressa 5.9+) građene su uglavnom od HTML predložaka i konfiguracijske datoteke teme te omogućuju uređivanje svih dijelova weba u Site Editoru

Classic teme bazirane su na PHP predlošcima i nemaju verzijska ograničenja; oslanjaju se na WordPress funkcije, hookove i filtere u PHP-u.

theme.json je konfiguracijska datoteka za globalne postavke i stilove, radi i s block i s classic temama. theme.json je temelj block teme i u praksi ćete ga trebati za svaki ozbiljniji projekt

Template hijerarhija je mehanizam kojim WordPress odlučuje koji predložak učitati za dani URL. Dokumentacija naglašava modularnost predložaka i objašnjava kako template loader koristi kontekst upita da izabere najbolji predložak uz fallbackove.

Mi ćemo se u ovom vodiču fokusirati na razvoj klasične WordPress teme, uz neke napomene i za razvoj block teme.

Kako napraviti osnovnu temu

U nastavku je minimalan, ali ispravan pristup za klasične teme: tema se aktivira, prikazuje sadržaj, koristi hookove kako treba i ne kvari rad plugina jer ne izostavlja ključne template tagove.

Napomena: zahtjevi nisu isti ako radite temu samo za vlastiti projekt ili je planirate slati u WordPress direktorij tema. Npr. classic tema za direktorij traži comments.php i screenshot, dok block tema za direktorij traži theme.json, readme.txt i sl.

Preporučena struktura datoteka:

To se slaže s idejom da teme obično koriste direktorij /assets za CSS/JS/media, dok je functions.php središte za značajke teme i povezivanje s WordPressom.

style.css (obavezno zaglavlje + minimalni CSS)

(WordPress koristi zaglavlje style.css-a za prepoznavanje i prikaz metapodataka teme.)

functions.php (postavka teme + dodavanje elemenata u red čekanja)

Koristite functions.php za dodavanje značajki teme i modularne funkcionalnosti putem hookova.
Stavite frontend resurse u zadan redosljed egzekucije, pomoću wp_enqueue_scripts hooka (namijenjen je za skripte i stilove).

header.php (mora sadržavati wp_head + wp_body_open)

language_attributes() ispisuje atribute jezika/smjera za oznaku.

bloginfo(‘charset’) čita skup znakova web-mjesta (uvijek UTF-8 u modernim WP zadanim postavkama).

wp_head() aktivira wp_head hook koji koriste dodaci/teme za ispis skripti/podataka u <head>.

wp_body_open() postoji od WordPressa 5.2 i odmah pokreće akciju nakon otvaranja (često se koristi za upravitelje oznaka/pristupačnost).

footer.php (mora sadržavati wp_footer)

wp_footer() pokreće akciju wp_footer; njeno izostavljanje je čest uzrok kvara plugina i nedostajućih skripti.

index.php (rezervni predložak + petlja)

index.php je glavni rezervni predložak u hijerarhiji; petlja je zadani mehanizam za ispis objava/sadržaja.

get_header() / get_footer() učitava predloške zaglavlja i podnožja.

post_class() ispisuje semantičke klase za omotač posta i ispravno izbjegava njegov izlaz.

Profesionalno lokalno okruženje

Profesionalan workflow počinje s pravilom: ne razvijati u produkciji. Preporučuje se odvojeno razvojno okruženje kako biste testirali bez rizika da srušite live stranicu.

Lokalne opcije (praktični izbor):

• wp-env (@wordpress/env) podiže lokalni WordPress za razvoj tema/dodataka “bez dodatne konfiguracije”, uz Docker + Node/NPM.
• WordPress Playground se može koristiti kao “zero-setup” okruženje; službeni docsi pokrivaju razvoj i ograničenja.
• Za block teme gdje se promjene iz Site Editora spremaju u bazu, WordPress Developer Blog opisuje workflow: Playground + Create Block Theme + GitHub, gdje “Save Changes to Theme” zapisuje promjene iz baze u theme datoteke za version control.

WP‑CLI + scaffold (brzina i konzistentnost):
WP‑CLI je naredbeni alat za WordPress i služi za upravljanje temama/dodacima (instalacije, updateovi, itd.).
Za temu vam scaffold štedi vrijeme:

• wp scaffold _s mytheme --theme_name="My Theme" generira temu na temelju _s.
• wp scaffold child-theme ... generira child temu s ispravnim headerima.

Git + build alati (čist izvor, optimizirani build):
Theme Handbook objašnjava build proces kao pretvaranje izvornog koda u produkcijsku verziju (često minifikacija/kompilacija CSS/JS).
Također prikazuje strukture tema gdje su .gitignore i package.json česti, što je tipično za Git + Node build setup.

Problemi kod developmenta

Većina problema “tema mi ne radi” svodi se na: WordPress ne prepoznaje temu, pogrešan enqueue, izostavljeni hookovi ili loša sigurnosna higijena.

Tema se ne prepoznaje / ne može se aktivirati

• Za block temu potrebno je imati style.css i templates/index.html kao minimalnu bazu.
• Za classic temu ključni su style.css i index.php, ali za Theme Directory vrijede i zahtjevi poput comments.php i screenshota.

CSS/JS se ne učitava (ili se učitava svugdje)

• Frontend enqueue ide na wp_enqueue_scripts (unatoč nazivu, služi i za CSS i za JS).
• WordPress upozorava da pozivanje wp_enqueue_script() izvan action hooka može stvarati probleme.
• Kod page-specific asseta preferirajte uvjetne enqueueove (po predlošku ili conditional tagovima) kako bi output ostao “lean”. (Ovo je praktična preporuka izvedena iz WordPressovog enqueue/dependency dizajna.)

Dodaci ne rade kako treba (npr. SEO, analytics)

• Templatei moraju okidati wp_head() i wp_footer(); dokumentacija ih tretira kao ključne i široko podržane hookove.

Block tema promjene “nestanu” u Gitu

• Promjene iz Site Editora spremaju se u bazu kao user-level prilagodbe; Create Block Theme plugin ima funkciju “Save Changes to Theme” koja te promjene zapisuje u theme.json i HTML template datoteke, posebno korisno u Playground + version control workflowu.

Debugging stack koji stvarno štedi vrijeme

• Uključite WP_DEBUG i logirajte error-e (bez prikazivanja posjetiteljima); WordPressova dokumentacija objašnjava da WP_DEBUG prikazuje PHP error-e/notices i kako ih logirati.
• Koristite Query Monitor: prikazuje DB queryje, PHP error-e, hookove, enqueued assete, HTTP pozive, block editor podatke i još mnogo toga.

Sigurnosne osnove u temi (nema pregovora)

• WordPress sigurnosne smjernice: ne vjerujte podacima; validirajte/sanitizirajte input; escapeajte output; oslonite se na WordPress API; održavajte kod ažurnim.
• Themes Team (review handbook) izričito traži validaciju/sanitizaciju nepouzdanih podataka i escaping outputa.

Beneficije Custom WordPress teme

Ako prodajete custom razvoj, klijente ne zanimaju datoteke nego rezultat: brzina, stabilnost, mogućnost uređivanja i dugoročna vrijednost.

Izrađujemo web stranice u Puli, Istri, po mjeri za svakog klijenta,, što znači da je tema dizajnirana prema vašem brendu, sadržaju i ciljevima konverzije, a ne prema generičkom demo-u gotove teme. Najveće koristi za klijente:

• Brzina koja ostaje ekstremno brza kako rastete: Lean markup i kontrolirani asseti smanjuju rizik; poznato je da veliki DOM usporava interakcije, a builderi s puno wrappera mogu povećati taj rizik.
• SEO temelj koji kontrolirate: Google u page experience signalima koristi Core Web Vitals; performanse su dio tehničkog SEO-a (nije garancija, ali je mjerljiva prednost).
• Sigurnost i stabilnost: Tema treba pratiti WordPress smjernice (validacija/sanitizacija/escaping, oslanjanje na WP API); manje nepotrebnih dodataka znači manje trećih strana koje treba auditirati i redovno ažurirati.
• Održavanje + lakša predaja: Tema građena na službenim konceptima (template hijerarhija, functions.php, ključni hookovi, opcionalno theme.json) lakše se čita i sigurnije nadograđuje.
• Uredničko iskustvo prilagođeno timu: theme.json i block alati omogućuju definiran dizajn sustav (boje/tipografija/razmaci) i “guardrails” za urednike sadržaja.