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 razumevanje kako teme funkcionišu 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 bezbednosnim rizicima. Kreiranje sopstvene 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 plate 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 fajlova koji zajedno definišu izgled i ponašanje sajta. Minimalna tema zahteva samo dva fajla: style.css sa meta informacijama o temi i index.php kao fallback template. Međutim, profesionalna tema sadrži mnogo više fajlova organizovanih u logičnu strukturu.

Osnovni fajlovi 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 da odredi koji template fajl 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 poslednja opcija.

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

Najčešće korišćeni template fajlovi

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ćava preciznu kontrolu nad prikazom svakog tipa sadržaja.

Functions.php - srce teme

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

Šta se definiše 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 fajlova: 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 fajlove direktno u header.php ili footer.php putem HTML tagova. Umesto toga uvek koristite wp_enqueue_style() i wp_enqueue_script() u functions.php jer to omogućava 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 delova sadržaja. Loop možete prilagoditi koristeći WP_Query klasu za kreiranje custom upita koji vraćaju tačno one postove koje želite da prikažete.

Custom upiti sa WP_Query

WP_Query klasa omogućava kreiranje potpuno prilagođenih upita za postove. Možete filtrirati po kategoriji, tagu, custom taxonomy, datumu, autoru i meta poljima. Na primer možete prikazati poslednje 3 posta iz kategorije Vesti, ili sve proizvode sa cenom ispod 1000 dinara. 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 cenu, lokaciju, galeriju, recenzije i bilo šta drugo što vaš sajt zahteva. Custom polja u kombinaciji sa custom post tipovima omogućavaju WordPress-u da funkcioniše 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 sledeć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 uvek ima nešto novo za naučiti. Počnite sa jednostavnom temom, postepeno dodajte funkcionalnosti i uskoro ćete se osetiti sigurno u kreiranju profesionalnih WordPress tema.