Creative Box, moja prva WordPress tema

Iako već nekoliko godina plovim oceanom zvanim WordPress, tek sam prije nešto više od pola godine aktivno počeo koristiti isti, odnosno uspješnije navigirati njegovim burnim vodama.

U tu svrhu, počevši od temelja, izradio sam WordPress temu – Creative Box. Metaforu na stranu, da li ista može izdržati vjetrove stvorene svakom novom inačicom WordPressa te same mogućnosti iste provjerite u daljnjem tekstu i zaključite sami.

Demo Creative Box teme možete pogledati ovdje, no možete ju također preuzeti, testirati te proizvoljno i modificirati na GitHubu.

Ideja i preduvjeti

Naime, kako se već nekoliko godina površno igram s HTML-om i WordPressom te iza sebe imam nekolicinu projekata vezanih uz iste, krajnje je vrijeme bilo da testiram svoje znanje.

Ideja na kojoj tema počiva bila je napraviti nešto elegantno i u isto vrijeme zanimljivo, baš kao one glazbene kutije iz koje na kraju melodije iskaču klaunovi.  Možda i nije najbolja usporedba, ali ćete u daljnjem tekstu shvatiti zašto sam izabrao baš tu kutiju.

Za izradu bilo koje WordPress teme pa tako i ove, potrebno je osnovno razumijevanje sljedećih tehnologija:

  • HTML
  • CSS
  • PHP

Bez te tri tehnologije kao temelj svakog pothvata razvoja u WordPress okolini, nezaobilazno je i poznavanje same strukture WordPress sustava, funkcija i različitih poziva, što je sve detaljno objašnjeno u WordPress Codexu, a kada zapne Google never fails to help.

Uz to, kako stvari stoje, ako želite napraviti išta ozbiljnije, odnosno elegantnije, potrebno je poznavati neki od mnogih CSS frameworkova, napredne CSS mogućnosti kao što su animacije i tranzicije te naravno JavaScript i jQuery.

Mogućnosti

LAYOUT

Creative Box tema bazirana je na responzivnom layoutu koji se sastoji od 4 prilagodljiva boxa. Cijeli layout je fleksibilan tako da se prilagođava različitim rezolucijama zaslona, dok su svi efekti odrađeni preko CSS tranzicija uz tračak JavaScripta.

Iako je polazna ideja bila da se radi o layoutu koji uvijek prikazuje četiri članka, postoje situacije kada se na stranici nalazi manje članaka. U tim situacijama primjenjuje se CSS tehnika detektiranja sličnih, odnosno siblings elemenata, tako da na zaslonu nikad nema “praznih kutija”.

creativebox-2 creativebox-3 creativebox-4

 

 

 

 

Svaki članak, osim istaknute slike, prikazuje i naslov te pretpostavljeno vrijeme potrebno za čitanje članka. Pređete li mišem preko bilo kojeg članka aktivirat će se hover effect koji na dnu boxa otrkiva sažetak članka limitiran na prvu rečenicu samog članka.

BOOTSTRAP (MODAL)

Klikom na bilo koji članak otvara se Bootstrap modalni prozor, što za krajnjeg korisnika znači da se stranica neće ponovno učitavati ako želi pročitati članak na koji klikne. Kad završi s čitanjem članka, korisnik jednostavno može kliknuti izvan područja članka, stisnuti tipku ESC na tipkovnici ili jednostavno kliknuti na gumb za zatvaranje modalnog prozora u dnu istoga kako bi se vratio na početni ekran.

Ideja iza modalnog prozora bila je ista kao i ona s kutijom iznenađenja iz koje iskače klaun ili koja druga igračka. Dakle, početni zaslon zamišljen je kao kutija iz koje na klik iskače “iznenađenje”, odnosno članak.

creativebox-5

WORDPRESS CUSTOMIZER

Kako je sama tema vrlo jednostavna i zamišljena za korištenje na malim osobnim blogovima te nema previše mogućnosti, jedine mogućnosti koje je moguće mijenjati direktno preko korisničkog sučelja jesu boje različitih elemenata.

Tako se redom mogu mijenjati pozadinska boja stranice, pozadinska boja pojedinih box elemenata, boja naslova članka, predviđenog vremena čitanja, sažetka te navigacijskih strelica. Sve postavke imaju zadanu vrijednost, stoga je vrlo lako vratiti sve postavke na tvorničke. Ovim postavkama možete pristupiti klikom na Izgled > Prilagodi u nadzornoj ploči vaše WordPress instalacije.

creativebox-6Sve promjene trenutno su vidljive, odnosno odmah nakon što ih primijenite bez potrebe za spremanjem postavki kako bi vidjeli promjene. Ako želite, sve ostale mogućnosti možete mijenjati direktno u CSS-u i HTML-u teme.

TRANSLATION READY

Osobno sam prečesto znao biti frustriran zato što neki dodatak ili tema koje sam htio koristiti nisu bile spremne za prevođenje. Iako naizgled jednostavna stvar, priprema za lokalizaciju teme pokazala se vrlo zeznutim procesom. Bilo kako bilo, uz pomoć PoEdita ili bilo kojeg drugog programa ili dodatka za lokalizaciju, Creative Box možete prilagoditi bilo kojem jeziku. Standardno, Creative Box dolazi uz spremnu lokalizaciju za hrvatski jezik.

SINGLE POST STRANICE

Iako sam prvotno htio izbjeći korištenje single post stranica, odnosno direktnih linkova na stranice pojedinih članaka, korištenje modalnih prozora u svrhu prikazivanja sadržaja pokazalo je jednu manu. Naime, kada korisnik podijeli sadržaj, odnosno članak na društvenim mrežama klikom na poveznicu članak ne može učitati u modalnom prozoru, već mora ići direktno na samu stranicu članka. Stoga, single page stranice funkcioniraju na principu modalnog prozora, odnosno izgledaju vrlo slično Bootstrap modalu.

creativebox-7Kao što se vidi na slici iznad, istaknuta slika članka koristi se kao pozadinska slika (preporučljivo je koristiti slike visoke rezolucije) te se na vrhu stranice nalazi navigacijska traka koja ispisuje naslov i slogan bloga te služi kao poveznica do naslovnice.

DODACI

Kako bi ispravno funkcionirala, Creative Box tema koristi Ajaxed Comments te Estimated Reading Time dodatke koji se instaliraju nakon što aktivirate samu temu.

Pokušao sam temu učiniti što jednostavnijom, stoga mogućnosti poput dijeljenja na društvenim mrežama možete ostvariti preko drugih dodataka kao što je NGFB.

Zaključak

Sama izrada teme trajala je oko dva tjedna, što podrazumijeva vrijeme uloženo u istraživanje i testiranje teme. Materijala i tutorijala ima na pretek, jedino što je bitno jest volja i želja za proširivanjem znanja. Ako želite krenuti s upoznavanjem WordPressa, no ne znate gdje početi predlažem da izdvojite nekoliko desetaka kuna i krenete s čitanjem knjige domaćeg autora. Kako se radi o mojoj prvoj WordPress temi, ista nije bez grešaka i naravno postoji mjesta za poboljšanja i nadogradnje, ali za sve namjere i svrhe, ova tema je funkcionalna.

[vc_button title=”DEMO” target=”_self” color=”default” size=”size_large” href=”http://creativebox.matijaculjak.com/”][vc_button title=”GITHUB” target=”_self” color=”default” size=”size_large” href=”https://github.com/mladimatija/CreativeBox/”]