WordPress theme development za početnike

Zašto praviti svoju WordPress temu

WordPress alat za kreiranje sajtova pokreće preko 40% svih sajtova na internetu i razumijevanje kako teme funkcioniraju otvara vrata ogromnom tržištu. Gotove teme su odlične za brzo pokretanje sajta, ali često dolaze sa nepotrebnim kodom, ograničenim mogućnostima prilagođavanja i sigurnosnim rizicima. Kreiranje vlastite teme daje vam potpunu kontrolu nad izgledom, performansama i funkcionalnošću sajta.

Theme development je jedna od najtraženijih WordPress veština na freelance tržištu. Za testiranje koristite WordPress hosting okruženje. Klijenti su spremni da plaće značajne sume za custom temu koja savršeno odgovara njihovim potrebama. Počinjući sa razumevanjem osnova možete postepeno graditi portfolio i unapređivati veštine do nivoa profesionalnog theme developera.

Struktura WordPress teme

WordPress tema se nalazi u folderu wp-content/themes/ime-teme/ i sadrži skup PHP, CSS i JavaScript datoteka koji zajedno definiraju izgled i ponašanje sajta. Minimalna tema zahtijeva samo dva datoteke: style.css sa meta informacijama o temi i index.php kao fallback template. Međutim, profesionalna tema sadrži mnogo više datoteka organiziranih u logičnu strukturu.

Osnovni datoteke teme

• style.css - glavni stylesheet sa meta informacijama (Theme Name, Version, Author)
• index.php - fallback template kada ne postoji specifičniji template
• functions.php - registracija funkcionalnosti teme (meniji, widgeti, podrška za feature-e)
• header.php - zaglavlje sajta sa navigacijom i meta tagovima
• footer.php - podnožje sajta sa skriptama i copyright informacijama
• sidebar.php - bočna traka sa widget oblastima
• single.php - template za prikaz pojedinačnog blog posta
• page.php - template za prikaz statičnih stranica
• archive.php - template za arhivske stranice (kategorije, tagovi, datumi)
• 404.php - template za stranicu koja ne postoji

Template hijerarhija

Template hijerarhija je sistem koji WordPress koristi za odredi koji template datoteka da učita za svaku stranicu. Ovo je jedan od najvažnijih koncepata u WordPress development-u. WordPress traži najspecifičniji template i ako ga ne nađe prelazi na opštiji sve dok ne dođe do index.php koji je posljednja opcija.

Na primjer za prikaz kategorije Vesti WordPress prvo traži category-vijesti.php, zatim category-3.php (gdje je 3 ID kategorije), pa category.php, pa archive.php i na kraju index.php. Ova hijerarhija vam omogućuje kreirate specifične dizajne za različite dijelove sajta bez komplikovanog programiranja. Razumevanje hijerarhije je ključno za efikasan theme development.

Najčešće korišteni template datoteke

Za blog postove hijerarhija ide: single-{post-type}.php, single.php, singular.php, index.php. Za stranice: page-{slug}.php, page-{id}.php, page.php, singular.php, index.php. Za arhive: category-{slug}.php, category.php, archive.php, index.php. Razumevanje ovog sistema omogućuje preciznu kontrolu nad prikazom svakog tipa sadržaja.

Functions.php - srce teme

Functions.php je najvažniji datoteka u temi jer u njemu registrirate sve funkcionalnosti koje vaša tema podržava. Ovaj datoteka se učitava automatski svaki put kada se tema aktivira i funkcionira slično kao plugin. U njemu dodajete podršku za feature-e, registrirate menije i widget oblasti, uključujete CSS i JavaScript datoteke i definirate custom funkcije.

Šta se definira u functions.php

• Podrška za thumbnail slike: add_theme_support('post-thumbnails')
• Registracija navigacionih menija: register_nav_menus()
• Registracija widget oblasti: register_sidebar()
• Uključivanje CSS i JS datoteka: wp_enqueue_style() i wp_enqueue_script()
• Podrška za HTML5 elemente: add_theme_support('html5')
• Custom veličine slika: add_image_size()
• Podrška za custom logo: add_theme_support('custom-logo')

Ključno pravilo je da nikada ne uključujete CSS i JavaScript datoteke direktno u header.php ili footer.php putem HTML tagova. Umesto toga uvijek koristite wp_enqueue_style() i wp_enqueue_script() u functions.php jer to omogućuje WordPress-u da pravilno upravlja zavisnostima, izbegne duplikate i omogući drugim pluginima da interaguju sa vašim skriptama.

WordPress petlja (The Loop)

WordPress Loop je PHP kod koji prikazuje sadržaj postova ili stranica. Svaki template koji prikazuje sadržaj koristi Loop za iteraciju kroz rezultate upita. Razumevanje Loop-a je fundamentalno jer je to mehanizam koji povezuje vaš template sa sadržajem iz baze podataka.

Osnovna struktura Loop-a koristi while petlju sa funkcijama have_posts() i the_post(). Unutar petlje koristite template tagove kao the_title(), the_content(), the_excerpt(), the_permalink() i the_post_thumbnail() za prikaz različitih dijelova sadržaja. Loop možete prilagoditi koristeći WP_Query klasu za kreiranje custom upita koji vraćaju tačno one postove koje želite prikažete.

Custom upiti sa WP_Query

WP_Query klasa omogućuje kreiranje potpuno prilagođenih upita za postove. Možete filtrirati po kategoriji, tagu, custom taxonomy, datumu, autoru i meta poljima. Na primjer možete prikazati posljednje 3 posta iz kategorije Vesti, ili sve proizvode sa cijenom ispod 10 EUR. WP_Query je moćan alat koji vam daje potpunu kontrolu nad tim koji sadržaj se prikazuje i kako je sortiran.

Template tagovi i custom polja

Template tagovi su PHP funkcije koje WordPress pruža za prikaz dinamičkog sadržaja u temama. Pored osnovnih tagova za naslov i sadržaj postoje deseci specijalizovanih tagova za prikaz autora, datuma, kategorija, tagova, komentara i navigacije. Dokumentacija na developer.wordpress.org je neprocenjiv resurs za upoznavanje svih dostupnih template tagova.

Custom polja (meta polja) proširuju standardne postove i stranice sa dodatnim podacima. Koristeći ACF (Advanced Custom Fields) plugin ili native WordPress funkcije možete dodati polja za cijenu, lokaciju, galeriju, recenzije i bilo što drugo što vaš sajt zahtijeva. Custom polja u kombinaciji sa custom post tipovima omogućuju WordPress-u da funkcionira kao potpun CMS za bilo koji tip sadržaja.

Sledeći koraci

Nakon savladavanja osnova, istražite napredne teme kao što su child teme. Pogledajte optimizaciju WordPress sajta za SEO kao sljedeći korak. Ostale napredne teme uključuju za sigurno prilagođavanje postojećih tema, block theme development za WordPress Full Site Editing, REST API za headless WordPress i WP-CLI za upravljanje temom iz komandne linije. WordPress ekosistem je ogroman i uvijek ima nešto novo za naučiti. Počnite sa jednostavnom temom, postepeno dodajte funkcionalnosti i uskoro ćete se osjetiti sigurno u kreiranju profesionalnih WordPress tema.