Kako prilagoditi svoju WordPress web stranicu pomoću CSS-a: 3 jednostavne metode

WordPress je evoluirao kroz godine, a danas je prilično fleksibilna platforma koja se lako prilagođava putem svog uređivača blokova Gutenberga. Ipak, bit će trenutaka kada će vam trebati malo više dosega nego što vam Gutenbergov urednik pruža.

Ovdje nam dobro dođe prilagođeni CSS. CSS stil vam omogućuje uređivanje boja, razmaka, fontova, izgleda i u osnovi svakog drugog vizualnog elementa vaše WordPress web stranice, omogućujući vam da izgleda točno kako želite.

U ovom članku ćemo vas provesti kroz osnove prilagođavanja vaše WordPress web stranice pomoću CSS-a.

Zašto prilagoditi svoju web stranicu pomoću CSS-a?

Dodavanje prilagođenog CSS-a samo je jedna od metoda koje možete koristiti za fino podešavanje izgleda vaše stranice. Ostale metode uključuju korištenje a dobro istaknuta premium WordPress tema, ili instaliranje alata za izradu stranica.

Iako su ove dvije metode malo lakše za korištenje za početnike i ne zahtijevaju znanje o kodiranju, korištenje prilagođenog CSS-a je povoljnije na dva glavna načina:

Nulta cijena

Premium teme i graditelji WordPress stranica mogu biti zgodni, ali imaju cijenu - u dolarima i centima. Naoružani znanjem o tome kako napisati prilagođeni CSS, s druge strane, možete postići iste efekte bez ikakvih dodatnih troškova.

Minimalna nadutost

Graditelji stranica i dobro istaknute teme osmišljene su kako bi korisnicima pružile veću fleksibilnost i široku lepezu opcija za prilagodbu svojih web stranica. Zbog toga imaju tendenciju da napuhuju web stranice, potencijalno ih usporavajući.

Prilikom pisanja prilagođenog CSS-a, s druge strane, dodavat ćete samo potrebne značajke, što općenito rezultira lakšim web stranicama i većim brzinama učitavanja.

3 jednostavne metode za prilagođavanje vaše WordPress web stranice pomoću CSS-a

Nadamo se da već znate kako napisati CSS. Nakon što ste upoznati s osnovama, možete koristiti bilo koju od sljedećih metoda za dodavanje prilagođenog CSS-a na svoju WordPress web stranicu:

Metoda 1: Koristite alat za prilagođavanje WordPressa

Uz WordPress 4.7 ili bilo koju verziju nakon njega, možete dodati prilagođeni CSS izravno iz administrativnog područja. Ovo je najjednostavniji način, a budući da je dostupan pregled uživo, sve promjene koje napravite možete vidjeti u stvarnom vremenu.

Također je i najpreporučljivija, budući da se sve promjene koje ćete napraviti spremaju se u samom WordPressu. To znači da čak i ako promijenite ili ažurirate svoju temu, nećete izgubiti prilagođeni CSS.

Evo koraka koje treba poduzeti:

Korak 1: Idite na Izgled > Prilagodi.

Ovo će otvoriti alat za prilagodbu teme WordPress, koji vam prikazuje uživo pregled vaše stranice s desne strane, zajedno s nekim opcijama prilagodbe s lijeve strane. Pomaknite se prema dolje do dna lijeve ploče i pronaći ćete Dodatni CSS tab.

Korak 2: Klikni na Dodatni CSS Tab.

Ovo će otvoriti mali okvir u lijevom oknu u koji možete dodati svoj prilagođeni CSS. Možete upisati onoliko redaka CSS koda koliko želite. Sjajna stvar kod ovog uređivača je ta što provjerava valjanost vašeg koda, upozoravajući vas ako postoje greške.

Korak 3: Objavite svoje izmjene.

Svako važeće CSS pravilo koje dodate pojavit će se u području za pregled uživo s desne strane. Da biste primijenili promjene na svoju web stranicu, kliknite na Objaviti gumb na vrhu lijevog okna kada budete zadovoljni. Ako ne želite da promjene odmah stupe na snagu, možete zakazati objavljivanje za kasnije ili spremiti svoj rad kao skicu.

Važno je napomenuti da su sve promjene koje napravite pomoću alata za prilagodbu vezane uz vašu trenutnu temu. Ako ikad prijeđete na drugu temu, promjene će se izgubiti osim ako ne kopirate svoj prilagođeni CSS i dodate ga novoj temi. Dobra je praksa spremiti sav prilagođeni CSS koji dodate temi u bilježnicu. Na taj način možete jednostavno kopirati kod i zalijepiti ga u odjeljak "Dodatni CSS" za drugu temu.

Ako to zvuči kao previše posla, a preferirate rješenje koje vam omogućuje da svoj prilagođeni CSS primijenite na bilo koju WordPress temu koju koristite, sljedeća metoda je za vas.

Metoda 2. Koristite dodatak

Prilagođeni CSS dodaci pohranjuju vaš prilagođeni CSS odvojeno od vaše teme, omogućujući primjenu vaših promjena bez obzira koju temu koristite. Ovi dodaci također dolaze s dodatnim značajkama poput automatskog dovršavanja koje mogu olakšati dodavanje CSS-a.

Jedina mana je to što su softver treće strane, što znači da potencijalno mogu usporiti vašu stranicu. Međutim, većina ovih dodataka je lagana, tako da općenito imaju mali utjecaj na izvedbu vaše stranice. Evo nekih od najboljih prilagođenih CSS dodataka koje možete koristiti:

• Jednostavan prilagođeni CSS

Jednostavan prilagođeni CSS jedan je od najpopularnijih prilagođenih CSS dodataka. Lagan je, jednostavan za korištenje i nudi izvrsne značajke. Postavljanje je jednostavno. Sve što trebate učiniti je instalirati i aktivirati dodatak. Zatim idite na Izgled odjeljak na lijevom oknu vaše nadzorne ploče.

Vidjet ćete novu opciju pod nazivom Prilagođeni CSS. Klikom na njega otvorit će se uređivač u koji možete dodati svoj prilagođeni CSS. Kliknite na Ažurirajte prilagođeni CSS gumb za spremanje promjena. Da biste vidjeli promjene, samo osvježite svoju web stranicu.

• Jednostavan prilagođeni CSS i JS

Ako želite još više značajki, Jednostavan prilagođeni CSS i JS dodatak je izvrsna opcija. Osim dodavanja CSS-a, omogućuje vam dodavanje JavaScript unosa.

• CSS heroj

Ako ne želite napisati niti jedan redak koda, Dodatak CSS Hero savršeno je za vas. Ovaj dodatak nudi vizualni CSS uređivač s padajućim izbornicima i poljima za unos koji vam omogućuju uređivanje gotovo bilo kojeg CSS stila na svojoj web stranici bez potrebe za pisanjem koda.

Metoda 3. Uredite sirovi kod

Dvije metode koje smo gore opisali omogućuju vam dodavanje prilagođenog CSS-a na svoju web-lokaciju bez potrebe za dodirivanjem bilo koje datoteke teme. No, u nekim slučajevima možda ćete htjeti urediti CSS svoje teme ili izravno dodati prilagođeni CSS kodu svoje teme.

Da biste to učinili, morat ćete pristupiti tablici stilova vaše web stranice. Jednostavan način za pristup ovoj tablici stilova je putem Urednik tema na vašoj WordPress nadzornoj ploči.

No prije nego što krenemo dalje, potrebno je postaviti nekoliko zaštitnih mjera. Prvi, sigurnosno kopirajte svoju web stranicu. Tijekom uređivanja datoteka teme lako je napraviti pogreške koje mogu potencijalno srušiti vašu web-lokaciju.

Sigurnosna kopija osigurava da imate funkcionalnu web stranicu na koju se možete vratiti. Sljedeći, stvoriti dječju temu. Ako izravno uređujete svoju nadređenu temu, promjene će se izgubiti svaki put kad se tema ažurira.

Nakon što su ove zaštitne mjere postavljene, prijavite se na svoju pozadinu WordPressa. Ići Izgled > Uređivač tema. Kada kliknete na opciju uređivača tema, vidjet ćete skočni okvir koji vas upozorava da ne radite izravne promjene u datotekama teme. Ako slijedite gore navedene korake, spremni ste.

Klik razumijem nastaviti.

Nakon što kliknete, trebali biste vidjeti tablicu stilova vaše web stranice prema zadanim postavkama. Ako ne, jednostavno pogledajte desno okno i kliknite na style.css ispod Stilska tablica opcija.

Odavde možete izravno mijenjati svoje datoteke teme. Samo ne zaboravite kliknuti Spremi i ažuriraj kad završiš.

Preuzmite kontrolu nad izgledom svoje stranice pomoću prilagođenog CSS-a

Učenje kako pisati prilagođeni CSS na WordPressu može potrajati neko vrijeme za početnike, ali će vam dati istinsku kontrolu nad izgledom vaše web stranice. I to uz nultu cijenu i s minimalnim utjecajem na izvedbu vaše stranice.

Međutim, ako ne želite raditi ručno dizajniranje, postoje i drugi načini za obavljanje posla, kao što je korištenje jednog od najboljih graditelja stranica za WordPress.

5 graditelja WordPress stranica koji vam mogu pomoći da izgradite nevjerojatne web stranice

Želite da vaša WordPress stranica izgleda nevjerojatno, ali ne možete si priuštiti razvojnog programera? Umjesto toga isprobajte ove alate za izgradnju WordPress stranica.

Pročitajte dalje

O autoru