Kako prilagoditi svoje spletno mesto WordPress s CSS: 3 enostavne metode

WordPress se je skozi leta razvijal in danes je precej prilagodljiva platforma, ki jo je enostavno prilagoditi s pomočjo urejevalnika blokov Gutenberg. Kljub temu bodo včasih potrebovali malo več dosega, kot ga ponuja Gutenbergov urejevalnik.

Tukaj pride prav CSS po meri. Slog CSS vam omogoča, da urejate barve, razmike, pisave, postavitve in v bistvu vse druge vizualne elemente vašega spletnega mesta WordPress, kar vam omogoča, da izgleda točno tako, kot želite.

V tem članku vas bomo popeljali skozi osnove prilagajanja spletnega mesta WordPress s CSS.

Zakaj prilagoditi svoje spletno mesto s CSS?

Dodajanje CSS po meri je le eden od načinov, ki jih lahko uporabite za natančno nastavitev videza vašega spletnega mesta. Druge metode vključujejo uporabo a dobro predstavljena vrhunska tema WordPress, ali namestitev ustvarjalnika strani.

Čeprav sta ti dve metodi nekoliko lažji za uporabo za začetnike in ne zahtevata nobenega znanja o kodiranju, je uporaba CSS po meri ugodnejša na dva glavna načina:

Nič stroškov

Premium teme in ustvarjalci strani WordPress so lahko priročni, vendar imajo svoje stroške – v dolarjih in centih. Po drugi strani, oboroženi z znanjem o pisanju CSS po meri, lahko dosežete enake učinke brez dodatnih stroškov.

Minimalna napihnjenost

Graditelji strani in dobro predstavljene teme so zasnovane tako, da uporabnikom omogočijo večjo prilagodljivost in širok nabor možnosti za prilagajanje njihovih spletnih mest. Zaradi tega se nagibajo k napihnjenosti spletnih mest, kar jih lahko upočasni.

Po drugi strani pa boste pri pisanju CSS po meri dodali le potrebne funkcije, kar na splošno povzroči lažja spletna mesta in hitrejše nalaganje.

3 preprosti načini za prilagajanje spletnega mesta WordPress s CSS

Upajmo, da že veste kako napisati CSS. Ko ste seznanjeni z osnovami, lahko uporabite katero koli od naslednjih metod za dodajanje CSS po meri na svoje spletno mesto WordPress:

1. način: uporabite orodje za prilagajanje WordPress

Z WordPress 4.7 ali katero koli različico po njej lahko dodate CSS po meri neposredno iz skrbniškega območja. To je najbolj preprosta metoda in ker je na voljo predogled v živo, si lahko vse spremembe, ki jih naredite, ogledate v realnem času.

Je tudi najbolj priporočljiva, saj so vse spremembe, ki jih boste naredili, shranjene v samem WordPressu. To pomeni, da tudi če spremenite ali posodobite svojo temo, ne boste izgubili CSS po meri.

Tu so naslednji koraki:

Korak 1: Pomaknite se do Videz > Prilagodi.

To bo odprlo orodje za prilagajanje teme WordPress, ki vam na desni prikaže predogled vašega spletnega mesta v živo, skupaj z nekaterimi možnostmi prilagajanja na levi. Pomaknite se navzdol do dna leve plošče in našli boste Dodatni CSS zavihek.

2. korak: Kliknite na Dodatni CSS Tab.

To bo odprlo majhno polje v levem podoknu, kamor lahko dodate svoj CSS po meri. Vnesete lahko poljubno število vrstic kode CSS. Odlična stvar tega urejevalnika je, da potrdi vašo kodo in vas opozori, če obstajajo napake.

3. korak: Objavite svoje spremembe.

Vsako veljavno pravilo CSS, ki ga dodate, bo prikazano v območju predogleda v živo na desni. Če želite spremembe uporabiti na svojem spletnem mestu, kliknite Objavi gumb na vrhu levega podokna, ko ste zadovoljni. Če ne želite, da spremembe začnejo veljati takoj, lahko objavo načrtujete tudi pozneje ali svoje delo shranite kot osnutek.

Pomembno je omeniti, da so vse spremembe, ki jih naredite z orodjem za prilagajanje, povezane z vašo trenutno temo. Če kdaj preklopite na drugo temo, bodo spremembe izgubljene, razen če kopirate CSS po meri in ga dodate novi temi. Dobra praksa je, da ves CSS po meri, ki ga dodate temi, shranite v beležnico. Tako lahko preprosto kopirate kodo in jo prilepite v razdelek »Dodatni CSS« za drugo temo.

Če se to zdi preveč dela in imate raje rešitev, ki vam omogoča, da svoj CSS po meri uporabite za katero koli temo WordPress, ki jo uporabljate, je naslednja metoda za vas.

2. metoda. Uporabite vtičnik

Vtičniki CSS po meri shranijo vaš CSS po meri ločeno od vaše teme, kar omogoča uporabo vaših sprememb ne glede na temo, ki jo uporabljate. Ti vtičniki imajo tudi dodatne funkcije, kot je samodejno dokončanje, ki lahko olajšajo dodajanje CSS.

Edina pomanjkljivost je, da so programska oprema tretjih oseb, kar pomeni, da lahko potencialno upočasnijo vaše spletno mesto. Večina teh vtičnikov pa je lahkih, zato na splošno malo vplivajo na delovanje vašega spletnega mesta. Tukaj je nekaj najboljših vtičnikov CSS po meri, ki jih lahko uporabite:

• Preprost CSS po meri

Preprost CSS po meri je eden najbolj priljubljenih vtičnikov CSS po meri. Je lahek, enostaven za uporabo in ponuja odlične funkcije. Nastavitev je enostavna. Vse kar morate storiti je, da namestite in aktivirate vtičnik. Nato se pomaknite do Videz razdelku na levem podoknu vaše nadzorne plošče.

Videli boste novo možnost, imenovano CSS po meri. S klikom nanj se odpre urejevalnik, kamor lahko dodate svoj CSS po meri. Kliknite na Posodobite CSS po meri gumb, da shranite spremembe. Če si želite ogledati spremembe, samo osvežite svoje spletno mesto.

• Preprost CSS in JS po meri

Če želite še več funkcij, Preprost vtičnik CSS in JS po meri je odlična možnost. Poleg dodajanja CSS vam omogoča dodajanje vnosov JavaScript.

• CSS junak

Če ne želite napisati ene vrstice kode, Vtičnik CSS Hero je popoln za vas. Ta vtičnik ponuja vizualni urejevalnik CSS s spustnimi meniji in vnosnimi polji, ki vam omogočajo urejanje skoraj vseh slogov CSS na vašem spletnem mestu, ne da bi vam bilo treba pisati kodo.

3. metoda. Uredite surovo kodo

Dve metodi, ki smo ju opisali zgoraj, vam omogočata, da svojemu spletnemu mestu dodate CSS po meri, ne da bi se morali dotakniti katere koli datoteke vaše teme. Toda v nekaterih primerih boste morda želeli urediti CSS svoje teme ali neposredno dodati CSS po meri v kodo svoje teme.

Če želite to narediti, boste morali dostopati do seznama slogov vašega spletnega mesta. Enostaven način za dostop do te slogovne liste je prek Urejevalnik tem na vaši nadzorni plošči WordPress.

Preden gremo dlje, pa morate uvesti nekaj zaščitnih ukrepov. najprej varnostno kopirajte svoje spletno mesto. Med urejanjem datotek s temo je enostavno narediti napake, ki lahko potencialno zrušijo vaše spletno mesto.

Varnostna kopija zagotavlja, da imate funkcionalno spletno mesto, na katerega se lahko vrnete. Naslednji, ustvarite otroško temo. Če neposredno uredite svojo nadrejeno temo, bodo spremembe izgubljene, ko bo tema posodobljena.

Ko so ti zaščitni ukrepi vzpostavljeni, se prijavite v zaledno stran WordPress. Pojdi do Videz > Urejevalnik tem. Ko kliknete možnost urejevalnika tem, boste videli pojavno okno, ki vas svari pred neposrednim spreminjanjem datotek s temo. Če sledite zgornjim korakom, ste pripravljeni.

Kliknite razumem nadaljevati.

Ko kliknete, bi morali privzeto videti tabelo s slogi vašega spletnega mesta. Če ne, preprosto poglejte v desno podokno in kliknite style.css pod Preglednica slogov možnost.

Od tu lahko neposredno spreminjate datoteke s temo. Samo ne pozabite klikniti Shrani in posodobi ko končaš.

Prevzemite nadzor nad videzom svojega spletnega mesta s CSS po meri

Učenje pisanja CSS po meri v WordPressu lahko za začetnike traja nekaj časa, vendar vam bo dalo pravi nadzor nad videzom vašega spletnega mesta. In to brez stroškov in z minimalnim vplivom na uspešnost vašega spletnega mesta.

Če pa ne želite ročnega oblikovanja, obstajajo drugi načini za opravljanje dela, na primer z uporabo enega od najboljših graditeljev strani za WordPress.

5 graditeljev strani WordPress, ki vam lahko pomagajo zgraditi neverjetna spletna mesta

Želite, da bi vaše spletno mesto WordPress izgledalo čudovito, vendar si ne morete privoščiti razvijalca? Namesto tega poskusite te ustvarjalnike strani WordPress.

Preberite Naprej

O avtorju