Bez obzira na to koju temu ste odabrali za Vaš WordPress sajt, postoji realna mogućnost da postoji mnogo sajtova koji imaju isti dizajn. Ukoliko prilagodite sajt uz pomoć ponuđenih opcija koje nudi tema, mala je verovatnoća da će se sajt izdvojiti iz mase sajtova koji su rađeni uz pomoć iste teme.

Ukoliko želite da učinite sajt jedinstvenim, neophodno je da odete korak napred od standardnog prilagođavanja, koje vam nudi sama tema. Menjanjem i prilagođavanjem CSS koda, možete učiniti vaš sajt drugačijim i unikatnim.

U nastavku teksta ćemo vam odati nekoliko tajni, prilagođavanja CSS koda na vašem WordPress sajtu.

 

Osnove CSSa i kako WordPress vidi CSS

CSS (Cascade Style Sheet) je, kako sama skraćenica kaže, dokument koji opisuje i definiše stil (fontovi, boje, dimenzije) elemenata koji se nalaze na web sajtu. Elemente mogu opisivati i više takvih dokumenata, što je jako bitno, jer kada budete sami definisali stil određenih elemenata, nećete morati da menjate klase koje se nalaze u samoj temi. No, doćićemo do toga.

CSS omogućava da odvojite strukturu od izgleda web stranice. Sve naredbe su napisane u odvojenom CSS dokumentu, sve naredbe čita internet pretraživač i prikazuje ih na sajtu. CSS pravila opisuju definisani HTML element (selektor). Primer je na sledećoj slici.

 

 

custom-css-1

 

 

Kao što možete da vidite, uz pomoć CSSa možete menjati svaki element na sajtu – layout, boje, animacije, fontove. Ukoliko se niste do sada upoznali sa CSSom, na internetu imate pregršt dostupnih tutorijala (na primer W3 Schools).

U najvećem broju slučajeva će se CSS fajl vaše teme zvati style.css. Ukoliko otvorite taj fajl videćete listu stilskih pravila za vašu stranicu. Ne preporučujemo vam da pravite bilo kakve izmene u ovom fajlu. Kada budete instalirali update teme, sve promene će biti izbrisane i moraćete sve da radite ispočetka. U nastavku teksta ćemo vam dati par saveta o ubacivanju dodatnog CSS fajla, koji će biti imun na updateovanje teme.

 

 

Kako prilagoditi CSS?

Ukoliko ste se bolje upoznali sa CSSom i sa implementacijom CSSa u WordPress kod, osvrnućemo se na mogućnosti koje nam nudi CSS, prednosti i mane svih mogućnosti. Kada pročitate ceo tekst, nećete biti CSS stručnjak, ali ćete bolje razumeti neke od najosnovnijih karakteristika CSSa i način na koji se koristi.

 

1) Prilagođavanje uz pomoć takozvanih Child tema

Ukoliko menjate child temu, nakon updatea glavne teme, sve što ste do sada radili neće biti izbrisano i nećete imati problem koji ste mogli imati da ste menjali CSS na glavnoj (Parent) temi. Programeri tema, često nude i child teme u paketu, koji sadrži zaseban CSS fajl koji se može menjati.

Kreiranje child teme je brzo i jednostavno. Child tema je sačuvana u posebnom folderu na serveru, koji u sebi ima fajl koji se zove style.css.

Kada kreirate i aktivirate temu, možete početi sa njenim podešavanjem i prilagođavanjem. Style.css fajlu se može pristupiti i može se menjati na dva načina:

  • U okviru samog WordPressa imate editor u kome možete otvoriti bilo koji tekstualni dokument i menjati njegov sadržaj. Kliknite na Appearance > Editor, i sa desne strane ćete videti listu fajlova koji su dostupni za menjanje. Na dnu liste će nalazi  style.css, možete ga otvoriti i menjati text. Nakon svih završenih izmena možete kliknuti na Update. 

 

 

custom-css-2

 

 

  • Drugi, možda čak i bolji način je pristup uz pomoć FTP klijenta. Child tema se nalazi u  wp-content > themes folderu. Možete koristiti bilo koji text editor.

Da bi promena bila vidljiva neophodno je da koristite iste selektore kao i parent tema. Koji su selektori, možete saznati uz pomoć web inspektora koji ima svaki pretraživač. Mana korišćenja child teme je dodatni prostor na serveru, dok prednost korišćenja child teme je ta da uz pomoć nje možete kontrolisati kompletan izgled sajta.

Naravno kreiranje child teme može iziskivanje trošenje vremena i truda, što može biti nepotrebno ukoliko želite da unesete malo promena na samom sajtu. U nastavku teksta ćemo vam objasniti kako da, bez kreiranja child teme, menjate CSS fajl na vašem sajtu.

 

2)Prilagođavanje uz pomoć  The Customizera

Customizer je WordPress alat, uz pomoć kog možete menjati sadržaj WordPress teme i nakon promene videti kako to izgleda na sajtu pre objavljivanja. Postoji veliki broj tema koje se mogu menjati uz pomoć Customizera.

 

 

custom-css-3

 

 

Customizeru možete pristupiti klikom na Appearance > Customize. Sa leve strane će postojati meni, a ukoliko tema koju koristite podržava menjanje, na dnu bi trebalo da postoji opcija Custom. Nakon dodavanja svih CSS klasa, možete pre objavljivanja videti koji je efekat vaših promena, a posle promena, one postaju dostupne korisnicima kada kliknete na Save & Publish. 

Prednost Customizera je njegova jednostavnost i to što nisu neophodne nikakve dodatne instalacije. Takođe, sve možete videti pre objavljivanja. Loša strana je ta, što nakon promene teme, morate ručno unositi promene ponovo, što vam može oduzeti dosta vremena.

U nastavku teksta ćemo vas upoznati sa pluginovima, koji vam mogu olakšati dodavanje CSSa.

3)Prilagođavanje uz pomoć pluginova

Dobra strana plugina je ta što i kada promenite temu, plugin i CSS kod koji ste uneli će ostati sačuvani i moćićete da ga koristite i na drugoj temi.

  • Jetpack 

 

custom-css-4

 

 

Jetpack je plugin koji ima preko milion instalacija, što je potvrda njegovog kvaliteta. Jedna od karakteristika ovog plugina je ta što se uz pomoć njega može i menjati CSS kod na vašem sajtu.

Pristupate editoru klikom na Appearance > Edit CSS. Otvoriće vam se zaseban editor i tu možete unositi CSS kod. Takođe, dostupna je i mogućnost korišćenja preprocesora kao što su SASS i LESS. Takođe u okviru Jetpacka postoji i dugme Preview tako da možete videti efekat vaših promena pre objavljivanja sadržaja.

 

  • Simple Custom CSS

 

custom-css-5

 

Ukoliko ne želite da instalirate Jetpack, Custom CSS je dobar izbor. Ovaj besplatan plugin je korišćen na preko 200000 sajtova i ima prosečnu ocenu 4.9. Plugin nije neophodno konfigurisati, samo se instalira, aktivira i spreman je za korišćenje. Možete mu pristupiti klikom na Appearance > Custom CSS u administratorskom panelu. Kada završite menjanje, kliknite na Update Custom CSS. Loša strana ovog plugina je što ne postoji preview, tako da nećete moći da vidite promenu dok ne objavite.

 

  • CSS Hero

 

custom-css-6

 

 

Ovo je premium plugin koji košta 14$ godišnje. Ovaj plugin ima jednostavan, takozvan point and click interface. Kompatibilan je sa velikim brojem tema i daje nam mogućnost kontrolisanja izgleda svakog elementa. Ukoliko tema nije kompatibilna sa ovim pluginom, uz pomoć Rocket Mode-a možete omogučiti prilagođavanje uz pomoć ovog plugina.

CSS Hero je plugin koji možete koristiti i bez poznavanja sintakse CSSa, čak i za malo kompleksnije promene, kao što su tranzicije. Dostupan je i preview mode.

 

  • Prilagođavanje uz pomoć DIVI teme

Postoje teme koje vam omogućavaju totalnu kontrolu nad CSSom te teme. Jedna od najpoznatijih je DIVI tema.  CSS DIVI teme možete dodavati na dva načina – kroz takozvani e-panel ili kroz napredna CSS podešavanja koja možete menjati na svakom elementu sajta (Advanced design settings). 

 

 

custom-css-7

 

 

Za pristup e-panelu kliknite na Divi > Theme Options. U delu General Settings, skrolujte do dna i tamo imate Custom CSS polje. Kada unesete kod za promene koje želite, kliknite na Save. Sada je CSS dodat na sajt, isto kao da ste dodali zasebni fajl style.css.

Svaki element DIVI teme ima svoj General i Advanced settings deo. U Custom CSS delu modula, imate prostor za unošenje CSS koda. Prednost ovakvog menjanja je ta što vam neće biti neophodna child tema i što možete jasno definisati kod za svaki element na sajtu. Tako uz pomoć malo utrošenog vremena i truda možete menjati izgled vašeg sajta.

 

 

Zaključak

Dali smo vam nekoliko saveta, kako da menjate dizajn i izgled sajta i kako da sajt bude drugačiji od drugih,  čak i ako koristite popularnu temu. Da rezimiramo, nekoliko načina na koji možete menjati CSS kod na WordPress sajtu su:

  • Upotreba Child teme
  • Upotreba Customizera
  • Upotreba CSS Pluginova
  • Upotreba premijum tema kao što je DIVI

Ukoliko imate pitanja ili vam je potrebna pomoć oko menjanja CSS koda na vašem sajtu, slobodno nam se obratite.