Ovo je detaljno uputstvo u kojem ću vam objasniti kako da na vašu WordPress stranicu instalirate temu Spacious i prilagodite je tako da izgleda baš kao na demo primjeru.
Spacious je besplatna tema sa odličnim ocjenama korisnika namijenjena za kompanije, portfolio, blog ili bilo koji drugi tip sajta.
Nalazi se u službenom repozitoriju WordPress tema tako da je možemo jednostavno instalirati kroz administrativni panel na svojoj stranici.
Pretpostavljam da već imate pokrenutu WordPress stranicu i da znate kako pristupiti administracijskom panelu.
Ako nemate, ovdje možete pročitati i naučiti kako besplatno napraviti WordPress stranicu i postaviti je na Internet.
Napomena: Prethodno sam pisao kako da besplatno napravite WordPress stranicu, ali je u međuvremenu to uputstvo zastarilo i više nije moguće to napraviti na isti način. Napisao sam drugo uputstvo gdje sam objasnio kako da na najjeftiniji način postavite WordPress stranicu na Internet uz besplatnu domenu.
(22. novembar 2016.)
Dodavanje nove teme
Kada se prijavite na vaš administratorski panel, otiđite na Appearence > Themes.
Tu ćete vidjeti sve teme koje trenutno imate instalirane i aktivnu temu. Kliknite na Add New.
Na ovom ekranu ćete vidjeti preporučene teme sa službenog WordPress repozitorija. U polje za pretraživanje upišite spacious i pritisnite Enter.
Prva na listi je Spacious tema koju želimo instalirati. Kada pomjerite strelicu miša iznad te teme, pojaviće se Install dugme. Kliknite.
Trebali biste dobiti poruku da je tema uspješno instalirana. Klinite na link Activate da aktivirate vašu temu.
Vaša tema je sada instalirana i aktivirana. Posjetite vašu početnu stranicu da vidite kako sada izgleda vaš sajt.
Nije baš ono što ste očekivali, zar ne? Ništa ne brinite. Uskoro ćemo sve to srediti. Obično je svaku temu potrebno prilagoditi da bi izgledala kao na demo stranici autora teme. Dobre teme obično imaju detaljnu dokumentaciju o tome kako prilagoditi temu i preporučeni prvi korak je da odete na stranicu autora teme i potražite dokumentaciju. Otiđite na wordpress.org, pronađite temu, kliknite na nju i potražite link Theme Homepage. To će vas obično odvesti na stranicu autora teme gdje ćete pronaći službenu dokumentaciju.
Podešavanje menija
Iz konteksnog menija na vrhu stranice odaberite Customize (isto možete pronaći i u administrativnom panelu ako kliknete na Appearence > Customize).
U dokumentaciji piše da prvo trebamo podesiti navigaciju (meni) jer će ova tema u meni staviti sve stranice (Pages) koje pronađe na vašoj stranici. Tako ćemo i uraditi.
U lijevoj koloni kliknite na Menus > Add a Menu. Unesite neki naziv (npr. Glavni meni) i klinite Create Menu. Zatim kliknite na Add Items da dodate stavke u vašu navigaciju. Te stavke mogu biti linkovi na članke (obično se to ne praktikuje), stranice (kontakt stranica, stranica o kompaniji itd.), kategorije (vijesti, obavještenja i sl.).
Stavite kvačicu na Primary Menu i vidjećete kako će meni izgledati na vašoj stranici. Primary Menu je pozicija koju definiše Spacious tema. Da ste instalirali neku drugu temu, ova bi se pozicija možda drugačije zvala.
Vratite se na početni ekran klikom na strelicu pored naziva vašeg menija.
Ako pogledate pažljiviji, vidjećete da ova teme ima još jedan meni definisan u donjem desnom uglu. Da biste dodali taj meni, ponovo kliknite na Add a Menu, unesite naziv menija (npr., Drugi meni) i kliknite na Create Menu. Na isti način kao u prethodnom koraku dodajte nove stavke, a u Menu locations stavite kvačicu na Footer Menu. Kliknite na Save & Publish.
Sada ćemo dodati veliku galeriju na početku stranice (Home Page Slider).
Odaberite opciju Slider na dnu lijeve kolone. Kliknite na Activate slider i stavite kvačicu na opciju Check to activate slider.
Sada odaberite Image Upload #1 da dodate prvu sliku (možete dodati najviše 5 slika).
Klinite na Select Image i odaberite već postojeću sliku sa vaše stranice ili dodajte novu tako što ćete klinuti na Upload Files. Slider bi sada trebao biti aktivan na vašoj stranici. Na isti način dodajte još jednu sliku u sekciji Image Upload #2 i dobićete dvije slike slider baš kao na demo stranici.
Da biste postavili logotip uz naziv vaše stranice, iz sekcije na lijevoj strani odabrite Header > Header Logo i dodajte vaš logotip. Ova tema preporučuje da dimenzije logotipa budu 100×100 piksela, ali možete staviti bilo koju sliku. Zatim se vratite korak nazad i odaberite opciju Show i označite Show Both. Sada bi se vaš logo trebao pojaviti uz naziv stranice baš kao na demo primjeru.
Kada tek instalirate WordPress, početna stranica prikazuje listu objavljenih članaka (Posts). WordPress takođe omogućava da umjesto liste članaka definišete statičnu početnu stranicu. To podrazumijeva da napravite novu stranicu, a zatim je postavite kao početnu stranu koja će se prikazati kada neko dođe na vaš sajt. Dosta tema (među njima i Spacious) koristi ovu mogućnost da definiše poseban izgled početne stranice tako što za tu statičnu stranicu odaberete poseban obrazac (template).
Kliknite na Pages > Add New, a zatim unesite samo naslov vaše stranice i sad desne strane pronađite panel Page Attributes i kao Template odaberite Business Template umjesto Default Template. Klinite plavo dugme Publish (ili Update).
Svaka tema koja na ovaj način uređuje početnu stranicu može da ima neke druge opcije koje trebate odabrati umjesto Default Template. Zato uvijek prethodno pročitajte službenu dokumentaciju.
Sada dodajte još jednu stranicu koju ćemo koristiti za prikaz svih postova na našoj stranici. Kada definišemo statičnu stranicu kao početnu, više ne postoji način da dobijete listu svih postova na vašoj stranici (osim ako nisu svi nemaju istu kategoriju ili nadkategoriju). Možete je nazvati kako želite (obično se nazove Blog ili nešto slično).
Sada opet idite na Appearence > Customize i u lijevoj koloni pronađite opciju Static Front Page. Odaberite opciju A static page i za Front Page odaberite prvu stranicu koju ste prethodno napravili, a kao Posts Page odaberite drugu stranicu koju ste napravili. Kliknite Save & Publish.
U dokumentaciji možete pogledati kako su definisane sve sekcije početne stranice. Svaka se sastoji od widget-a (označenih zelenom bojom) koji su pozicionirani na određena mjesta na stranici (označena crvenom bojom). Widget (dodatak) je nešto poput modula koji možete dodati na stranicu na mjesta koja je vaša tema predvidjela za to. Na jedno mjesto možete dodati više widget-a i raspoređivati ih vrlo jednostavno onako kako želite.
Prvo ćemo dodati dio koji koristi Service Widget, odnosno prvu sekciju koja se sastoji od 3 elementa koja imaju sliku, naslov, kratki tekst i link Read more. Svaki element ovog widgeta dodajete tako što napravite stranicu koja ima naslov, kratki tekst i postavljenu istaknutu sliku (Featured Image), a zatim je odaberete za jedno od 6 mogućih pozicija (demo koristi samo tri).
Otiđite na Appearence > Customize i sa lijeve strane odaberite na Widgets, a zatim na Business Top Sidebar. Kliknite na Add a Widget, a onda dodajte widget koji se zove TG: Services. Za svaku od 6 pozicija označenih sa Page odaberite odgovarajuću stranicu koju ste napravili.
U istoj sekciji se nalazi i Call to Action widget. Ponovo kliknite na Add a Widget i odaberite TG: Call to Action. Nakon toga unesite tekst koji želite da se pojavljuje u naslovu kao glavna poruka, dodatni opis, tekst na zelenom dugmetu i link na koji treba odvesti korisnika kada klikne na to dugme. Kliknite Save & Publish.
Sada je potrebno da u središnje sekcije Business Middle Left Sidebar i Business Middle Right Sidebar postavimo TG: Featured Single Page i TG: Testimonial, respektivno. Napravite jednu stranicu koju želite da postavite kao istaknutu i postavite joj Featured Image (ili iskoristite neku već postojeću).
Vratite na panel za uređivanje teme (Appearance > Customize), odaberite Widgets i sa liste widget sekcija i odaberite Business Middle Left Sidebar. Kliknite na Add a Widget i pronađite widget TG: Featured Single Page. Za polje Page iz padajuće liste odaberite stranicu koju ste prethodno napravili. Ako želite da naslov bude iznad slike, odaberite opciju Show Image After Title. Polje Title možete ostaviti prazno ukoliko želite da kao naslov koristite naslov stranice. Kliknite Save & Publish.
Vratite se na listu widget sekcija i sada odaberite Business Middle Right Sidebar. Kliknite Add a Widget i odaberite TG: Testimonial. Upišite naslov (npr., Šta kažu naši klijenit) u Title, u Testimonial Description upišite izjavu prvog klijenta, a u Name i Byline njegovo ime i funkciju ili titulu (npr. CEO, kupac, klijent i sl.). Primjer na demo stranici ima dva TG: Testimonial widget-a dodana u ovu sekciju, tako da kliknite još jednom na dugme Add a Widget i odaberite TG: Testimonial. Za unesite izjavu nekog drugog klijenta, a polje Title ostavite prazno. Kliknite na Save & Publish.
Sada ćemo u Business Bottom Sidebar dodati TG: Featured Widget. Vratite se na listu widget sekcija i odaberite Business Bottom Sidebar. Kliknite na Add a Widget i pronađite TG: Featured Widget. Ovaj widget prikazuje naslov, opis i tri stranice (odnosno njihove istaknute slike) koje je potrebno prethodno napraviti. Unesite naslov u Title, kratki opis u Description i za svako Page polje odaberite odgovarajuću stranicu i dobićete rezultat kao na primjeru.
Footer
Dokumentacija na službenoj stranici Spacious teme je prilično dobra, ali ne daje objašnjenje kako dodati ostale elemente u podnožje (footer) stranice. Četiri kolone koje možete vidjeti u podnožju stranice na demo primjeru se prave tako što dodate odgovarajuće widget-e u sekcije Footer Sidebar One, Footer Sidebar Two, Footer Sidebar Three i Footer Sidebar Four. Za prvu i treću kolonu je potrebno napraviti dva nova menija (nije im potrebno postaviti Menu Location), a zatim treba dodati Custom Menu widget u sekcije Footer Sidebar One i Footer Sidebar Three. Kod podešavanja Custom Menu widget-a unesite naslov u Title, a iz padajućeg polja Select Menu odaberite odgovarajući meni koji ste napravili.
Četvrta kolona na demo primjeru se sastoji od dva Text widget-a koja je potrebno dodati u sekciju Footer Sidebar Four. Ukoliko želite da dobijete izgled identičan kao na demo primjeru, u Title napišite Contact Information, a u Content unesite HTML kod koji definiše listu:
<ul> <li>Sukedhara | Kathmandu | Nepal</li> <li>Phone: (977) 985238979</li> <li>Fax: (977) 123-4567</li> <li>Email: [email protected]</li> <li>Website: www.themegrill.com</li> </ul>
U istu sekciju dodajte još jedan Text widget i unesite obični tekst u Content polje i stavite kvačicu na Automatically add paragraphs ukoliko želite da tekst odvojen u više redova bude prikazan u paragrafima kao na demo primjeru.
Kliknite na Save & Publish.
Još nam samo preostaje da uredimo izgled druge kolone u podnožju i stavimo listu zadnje objavljenih članaka. Demo primjer za ovo koristi widget Recent Posts Extended koji je potrebno instalirati kroz poseban plugin naziva Recent Posts Widget Extended.
Otiđite na vaš Dashboard, a zatim u sekciji Plugins odaberite Add New. U polje Search Plugins upišite Recent Posts Widget Extended i pritisnite Enter. Prvi u listi će biti plugin koji tražimo. Kliknite na Install Now. Nakon što se uspješno instalira, kliknite na link Activate Plugin.
Sada opet otiđite na Customize, pa u sekciji Widgets odaberite Footer Sidebar Two, kliknite Add a Widget i odaberite widget Recent Posts Extended koji ste dobili instalacijom ovog plugin-a. Ovaj widget ima dosta opcija, ali je dovoljno da samo promjenite polje Title. Upišite vaš naslov (npr. Najnovije vijesti) i kliknite na Save & Publish.
I još samo jedna stvar koju smo zaboravili. Na demo primjeru iznad glavnog menija se nalazi polje za pretraživanje. To ćete dodati tako što u sekciji Widgets kliknete na Header Sidebar, a zatim na Add a Widget i odaberete widget Search. Naslov (Title) ne morate dodavati. Samo kliknite na Save & Publish.
I to je to. Vaša početna stranica ima sve elemente koji se nalazi i na demo primjeru. Ukoliko imate bilo kakvih pitanja, slobodno ostavite komentar.
Sviđa vam se?
Ako vam je ovaj članak bio koristan, može biti koristan i drugima. Pošaljite ga ili podijelite se prijateljima.
Želite naučiti više?
Ostavite mi svoju email adresu i javiću vam čim objavim novi članak.