Ako prispôsobiť svoj web WordPress pomocou CSS: 3 jednoduché metódy

WordPress sa v priebehu rokov vyvíjal a dnes je to celkom flexibilná a ľahko prispôsobiteľná platforma prostredníctvom editora blokov Gutenberg. Napriek tomu budú chvíle, keď budete potrebovať trochu väčší dosah, než poskytuje editor Gutenberg.

Tu sa hodí vlastný CSS. Štýl CSS vám umožňuje upravovať farby, medzery, písma, rozloženia a v podstate každý ďalší vizuálny prvok vašej webovej stránky WordPress, čo vám umožňuje, aby vyzerala presne tak, ako chcete.

V tomto článku vás prevedieme základmi prispôsobenia vášho webu WordPress pomocou CSS.

Prečo prispôsobiť svoj web pomocou CSS?

Pridanie vlastného CSS je len jednou z metód, ktoré môžete použiť na doladenie vzhľadu svojho webu. Iné metódy zahŕňajú použitie a dobre vybavená prémiová téma WordPressalebo inštalácia nástroja na tvorbu stránok.

Aj keď sú tieto dve metódy o niečo jednoduchšie pre začiatočníkov a nevyžadujú žiadne znalosti kódovania, používanie vlastného CSS je výhodnejšie v dvoch hlavných smeroch:

Nulové náklady

Prémiové témy a tvorcovia stránok WordPress môžu byť užitočné, ale stoja za to – v dolároch a centoch. Na druhej strane, vyzbrojení znalosťou toho, ako písať vlastné CSS, môžete dosiahnuť rovnaké efekty bez toho, aby ste museli vynaložiť ďalšie výdavky.

Minimálne nafúknutie

Tvorcovia stránok a dobre vybavené témy sú navrhnuté tak, aby používateľom poskytli väčšiu flexibilitu a širokú škálu možností na prispôsobenie ich webových stránok. Z tohto dôvodu majú tendenciu pridávať webovým stránkam nadúvanie a potenciálne ich spomaľovať.

Na druhej strane pri písaní vlastného CSS pridáte iba potrebné funkcie, čo vo všeobecnosti vedie k ľahším webovým stránkam a rýchlejšej rýchlosti načítania.

3 jednoduché metódy na prispôsobenie vašej webovej stránky WordPress pomocou CSS

Dúfajme, že už viete ako napísať CSS. Keď sa zoznámite so základmi, môžete na pridanie vlastného CSS na svoj web WordPress použiť ktorúkoľvek z nasledujúcich metód:

Metóda 1: Použite nástroj WordPress Customizer

S WordPress 4.7 alebo inou verziou po ňom môžete pridať vlastné CSS priamo z oblasti správcu. Toto je najjednoduchší spôsob, a keďže je k dispozícii živý náhľad, všetky vykonané zmeny môžete vidieť v reálnom čase.

Je to tiež najviac odporúčaný, pretože všetky zmeny, ktoré vykonáte, sú uložené v samotnom WordPress. To znamená, že aj keď zmeníte alebo aktualizujete svoj motív, neprídete o svoj vlastný CSS.

Tu sú kroky, ktoré treba podniknúť:

Krok 1: Prejdite na Vzhľad > Prispôsobiť.

Tým sa otvorí nástroj na prispôsobenie tém WordPress, ktorý vám vpravo zobrazí živý náhľad vášho webu spolu s niektorými možnosťami prispôsobenia vľavo. Prejdite nadol do spodnej časti ľavého panela a nájdete Ďalšie CSS tab.

Krok 2: Klikni na Ďalšie CSS Tab.

Tým sa v ľavom paneli otvorí malé pole, do ktorého môžete pridať svoj vlastný CSS. Môžete zadať toľko riadkov kódu CSS, koľko chcete. Skvelé na tomto editore je, že overí váš kód a upozorní vás, ak sa vyskytnú nejaké chyby.

Krok 3: Zverejnite svoje zmeny.

Akékoľvek platné pravidlo CSS, ktoré pridáte, sa zobrazí v oblasti živého náhľadu vpravo. Ak chcete použiť zmeny na svojich stránkach, kliknite na Publikovať Keď budete spokojní, v hornej časti ľavého panela. Ak nechcete, aby sa zmeny prejavili okamžite, môžete publikovanie naplánovať aj na neskorší čas alebo uložiť svoju prácu ako koncept.

Je dôležité poznamenať, že všetky zmeny, ktoré vykonáte pomocou nástroja na prispôsobenie, sú spojené s vašou aktuálnou témou. Ak niekedy prepnete na inú tému, zmeny sa stratia, pokiaľ neskopírujete svoj vlastný CSS a nepridáte ho do novej témy. Je dobrým zvykom uložiť všetky vlastné CSS, ktoré pridáte do témy, do poznámkového bloku. Týmto spôsobom môžete jednoducho skopírovať kód a vložiť ho do sekcie „Ďalšie CSS“ pre inú tému.

Ak to znie ako príliš veľa práce a uprednostňujete riešenie, ktoré vám umožní použiť vlastný CSS na akúkoľvek tému WordPress, ktorú používate, ďalšia metóda je pre vás.

Metóda 2. Použite doplnok

Vlastné doplnky CSS ukladajú vaše vlastné CSS oddelene od vašej témy, čo umožňuje použitie vašich zmien bez ohľadu na to, ktorú tému používate. Tieto doplnky tiež prichádzajú s ďalšími funkciami, ako je automatické dokončovanie, ktoré môžu zjednodušiť pridávanie CSS.

Jedinou nevýhodou je, že ide o softvér tretích strán, čo znamená, že môžu potenciálne spomaliť vašu stránku. Väčšina týchto doplnkov je však ľahká, takže vo všeobecnosti majú malý vplyv na výkon vášho webu. Tu sú niektoré z najlepších vlastných doplnkov CSS, ktoré môžete použiť:

• Jednoduché vlastné CSS

Jednoduché vlastné CSS je jedným z najpopulárnejších vlastných doplnkov CSS. Je ľahký, ľahko sa používa a ponúka skvelé funkcie. Nastavenie je jednoduché. Všetko, čo musíte urobiť, je nainštalovať a aktivovať doplnok. Potom prejdite na Vzhľad v ľavej časti hlavného panela.

Uvidíte novú možnosť s názvom Vlastné CSS. Kliknutím naň sa otvorí editor, do ktorého môžete pridať svoj vlastný CSS. Kliknite na Aktualizujte vlastný CSS tlačidlo na uloženie zmien. Ak chcete zobraziť zmeny, obnovte svoj web.

• Jednoduché vlastné CSS a JS

Ak chcete ešte viac funkcií, Jednoduchý vlastný doplnok CSS a JS je skvelá možnosť. Okrem pridávania CSS vám umožňuje pridávať položky JavaScript.

• Hrdina CSS

Ak nechcete napísať jediný riadok kódu, Plugin CSS Hero je pre vás ideálny. Tento doplnok ponúka vizuálny editor CSS s rozbaľovacími ponukami a vstupnými poľami, ktoré vám umožňujú upravovať takmer akýkoľvek štýl CSS na vašom webe bez toho, aby ste museli písať akýkoľvek kód.

Metóda 3. Upravte nespracovaný kód

Dva spôsoby, ktoré sme opísali vyššie, vám umožňujú pridať vlastný CSS na vašu stránku bez toho, aby ste sa museli dotknúť niektorého z vašich súborov tém. V niektorých prípadoch však možno budete chcieť upraviť CSS vašej témy alebo priamo pridať vlastný CSS do kódu vašej témy.

Ak to chcete urobiť, budete potrebovať prístup k šablóne so štýlmi svojho webu. Jednoduchý spôsob prístupu k tejto šablóne so štýlmi je cez Editor tém na hlavnom paneli WordPress.

Predtým, ako pôjdeme ďalej, je však potrebné zaviesť niekoľko bezpečnostných opatrení. Najprv, zálohujte svoj web. Pri úprave súborov tém je ľahké urobiť chyby, ktoré môžu potenciálne zlyhať vašu stránku.

Záloha zaisťuje, že máte funkčnú webovú stránku, na ktorú sa môžete vrátiť. Ďalšie, vytvorte detskú tému. Ak vykonáte priame úpravy svojho nadradeného motívu, zmeny sa stratia pri každej aktualizácii motívu.

Po zavedení týchto bezpečnostných opatrení sa prihláste do svojho backendu WordPress. Ísť do Vzhľad > Editor motívov. Keď kliknete na možnosť editora tém, zobrazí sa kontextové okno, ktoré vás varuje pred priamymi zmenami v súboroch tém. Ak budete postupovať podľa vyššie uvedených krokov, môžete začať.

Kliknite rozumiem pokračovať.

Po kliknutí by ste mali predvolene vidieť šablónu so štýlmi vášho webu. Ak nie, jednoducho sa pozrite na pravú tablu a kliknite na style.css pod Šablóna so štýlmi možnosť.

Odtiaľ môžete vykonávať priame zmeny v súboroch tém. Len nezabudnite kliknúť Uložiť a aktualizovať keď skončíš.

Prevezmite kontrolu nad vzhľadom svojho webu pomocou vlastného CSS

Naučiť sa písať vlastný CSS na WordPress môže začiatočníkom chvíľu trvať, no dá vám to skutočnú kontrolu nad vzhľadom vášho webu. A to za nulové náklady a s minimálnym dopadom na výkonnosť vášho webu.

Ak by ste však radšej nerobili žiadne manuálne navrhovanie, existujú aj iné spôsoby, ako to urobiť, napríklad pomocou jedného z najlepších tvorcov stránok pre WordPress.

5 nástrojov na tvorbu stránok WordPress, ktoré vám môžu pomôcť vytvoriť úžasné webové stránky

Chcete, aby vaša stránka WordPress vyzerala úžasne, ale nemôžete si dovoliť vývojára? Skúste namiesto toho tieto nástroje na tvorbu stránok WordPress.

Prečítajte si ďalej

O autorovi