Kako dodati Custom CSS u WordPress sajt

Jedan ukraden, ali dobar – Programiranje u četiri laka koraka :)
26. septembra 2015.
50 dana kasnije: Billie, aktuelni novi WordPress (4.3)
6. oktobra 2015.

Custom CSS se može prevesti kao posebni, lični, naručeni… CSS kod. Ubacujući takav CSS kod, web dizajneri i developeri postižu izmene u predefinisanom izgledu web sajta. Odnosno, to je način da se ispune spečifične želje vezane neposredno za njegov vizuelni identitet. Iz tog razloga, ovo je jedna od ključnih i najzastupljenijih tehnika webdizajna u WordPressu.

thesis-2.0-nav-menu-css-menu-paddingPostoji par načina da se ovo realizuje, a ono što svakako treba izbegavati je da dopunu ili izmenu vršite direktno menjajući CSS kod teme koje koristite. Iako je taj način za izmenu izgleda vašeg web sajta vrlo efikasan, najlogičniji i obično je prvo što vam pada na pamet, ima jednu ozbiljnu manu: već sa prvim sledećim ažuriranjem teme na njenu noviju verziju, vaše izmene i prilagođavanja će biti izgubljeni.

Korištenje Child teme

Da bi se ovo izbeglo, apsolutna preporuka je da izmene radite na Child temi (dete-temi) koju ćete načiniti pre toga, i učiniti je aktivnom. Pravljenje Child teme je priča za sebe, koji neće biti detaljnije obrađivan u ovom postu. Biće dovoljno da napomenem da se radi o uobičajenom postupku koji je dobro obrađen u WordPress Codexu. Za kreiranje i konfigurisanje Child tema postoje i vrlo dobri i funkcionalni, a besplatni plugini kao što su One-klick Child Theme i Child Theme Configurator. No, kao što rekoh, ovom problematikom se sada nećemo detaljnije baviti – a ukoliko se to pokaže potrebnim, biće obrađena u jednom od sledećih postova na ovom blogu. Važno je takođe napomenuti da ovakvo pravljenje Child teme, kakvo ovde opisujem, treba razlikovati od pravljenja Child tema u radnim okruženjima (frameworks) kao što je Genesis – kada se zapravo radi o pravljenju sasvim novih tema po narudžbi, a sa ugrađenim funkcionalnostima koje pruža odabrano radno okruženje.

No, da se vratimo našem osnovniom pitanju, kako dodati Custom CSS. Ukoliko odlučite da kreirate novi izgled koristeći Child temu, u vašem novom direktorijumu (folderu) sa nastavkom –child (ili u odgovarajućem poddirektorijumu ovog direktorijuma) treba da se nađe i odgovarajuća .css datoteka. Svaka child tema već u korenom direktorijumu mora da sadrži datoteku style.css; ono što napišete u ovoj datoteci će imati veći hijerarhijski značaj od onoga što piše u datoteci tog istog naziva, a u osnovnoj temi. Zato, osnovne izmene na izgledu pišite u ovu datoteku; kada njen parnjak u roditelj-temi bude prepisan novom verzijom, izmene koje ste zapisali u dete-temi će ostati netaknute i u funkciji.

Na identičanj način funkcionišu izmene i u slučaju drugih .css datoteka koje definišu webdizajn vašeg sajta. Ukoliko se izmene odnose na .css datoteke koje su “vlasništvo” plugina, a ne same teme, stvari umeju biti nešto komplikovanije. Naravno, za traženje odgovora na eventualne nejasnoće vezane za takve slučajeve služe WordPress forumi i – ako postoji, a u ozbiljnim pluginima treba da postoji – neposredna podrška autora plugina.

Besplatni plugin za Custom CSS

Simple custom css plugin - ekran

Simple Custom CSS plugin – ekran

WordPress programeri ne bi bili to što jesu, a da nisu i ovaj, u suštini jednostavan postupak dodadavanja Custom CSS i dodatno olakšali. Pogađate, u pitanju je plugin koji vam olakšava da obavite ovaj posao, a koji je sem toga i besplatan. U pitanju je plugin pod nazivom Simple Custom CSS , vrlo jednostavan za korištenje.

Nakon što ga na uobičajen način instalirate i aktivirate, ovaj plugin će vam na kontrolnoj tabli otvoriti novu opciju u meniju Apperance / Izgled. Ta opcija se zove, a kako bi drugačije, Custom CSS. Dalje je prosto: u editor koji vam se otvara aktiviranjem ove opcije, unesite (ili iskopirajte) svoj novi Custom CSS kod. Da bi stvar profunkcionisala, na kraju posla kliknite na taster Update Custom CSS. I to je to – važno je napomenuti da ovo funkcioniše, i čuva izmene i za nakon eventualne nadogradnje, i bez prethodnog stvaranja Child teme.

Izmena webdizajna bez ručnog pisanja Custom CSS koda

Naravno, za sve gore navedeno je potrebno poznavanje CSS koda i standarda. Lično mislim da bez tog znanja, i pored svih postojećih alata, ne bi trebalo otpočinjati sa pravljenjem ozbiljnog web sajta. Ako niste Web developer ili web dizajner, dobro razmislite; profesionalne usluge na web sajtovima nisu baš toliko skupe, i izvesno se više isplati da taj posao ostavite plaćenim profesionalcima, dok se vi rasterećeno bavite svojim osnovnim poslom.

No, čak i ako ne poznajete CSS standarde, postoje načini da izmenite mnogo toga u webdizajnu vaše stranice. Najbolji način je korištenje nekog od plugina koji to omogućuju, najčešće kroz vizuelnu izmenu onoga što želite; jedan od takvih, možda i najbolji, je CSS Hero. Ovaj plugin, i njemu slični nisu besplatni –jer što se ne plati na mostu, mora se platiti na ćupriji. A o tome kako ovaj moćan plugin funkcioniše i šta sve omogućuje – videćemo se u jednom od sledećih postova…

Ostavite odgovor

Vaša adresa e-pošte neće biti objavljena. Neophodna polja su označena *