Existuje viac ako jeden spôsob, ako pridať vlastný kód CSS do blogu WordPress.

Dnes vám vysvetlím silné a slabé stránky dvoch rôznych metód, ktoré vám navrhujem, aby ste si mohli vybrať ten, ktorý vám najviac vyhovuje.

Ale predtým, ak ste nikdy nenainštalovali WordPress objaviť Ako nainštalovať 7 krokov WordPress blogu et Ako nájsť, nainštalovať a aktivovať WordPress tému na svojom blogu 

Potom späť k tomu, prečo sme tu.

Ako nájsť položky, ktoré chcete prispôsobiť

Po izolovaní časti tému WordPress, ktorú chcete zmeniť (napríklad názov článku), budete musieť určiť vlastnosti CSS aplikovaný na to, aby ste mohli vykonať príslušné zmeny. Našťastie tento proces nie je komplikovaný.

CSS používa selektory na určenie, ktoré prvky zažijú rôzne špecifické zmeny. Spravidla sa to robí zadaním „ trieda „Prvku (alebo prvok DOM). CSS sa však dá použiť aj na definovanie rozloženia celého prvku (napríklad značka „ „) alebo pomocou identifikátora značky.

Populárne prehliadače nám našťastie umožňujú vidieť rôzne selektory a vyhlásenia, ktoré sa na prvky stránky používajú pomocou niekoľkých kliknutí. Napríklad v prehliadači Google Chrome stačí zvýrazniť konkrétnu časť dokumentu a potom kliknúť pravým tlačidlom myši, ako v nasledujúcom príklade.

Kliknutím na Skontrolujte prvok V rozbaľovacej ponuke, ktorá sa zobrazí, uvidíte HTML kód stránky v novom okne s kontrolovanou položkou zvýraznenou v okne vpravo (alebo nižšia). Môžete vidieť príklad nižšie.

Texty týchto prvkov (alebo atribúty) Červenou farbou sa zobrazia rôzne konkrétne štýly, ktoré sa vzťahujú na položku, ktorú ste zvýraznili kontrolou kódu.

Čítajte tiež: Ako pridať rozbaľovacie menu s CSS vo svojom textovom editore

Napríklad prvok „ font-size Povie vám, že písmo zobrazené vo zvýraznenej položke má veľkosť 13 pixelov. Deskriptory sú obklopené zátvorkami a pred nimi sú selektory. Názov príslušného súboru so štýlmi je zobrazený napravo od voličov.

Akonáhle budete mať tieto informácie na pamäti, zmena štýlu bude ľahká. Napríklad, ak chcete zmeniť písmo z 13px na 14px, jednoducho hľadáte súbor so štýlmi, selektor, ktorý zodpovedá jednej zo zvýraznených položiek. Spravidla je v tejto podobe: (« # .block-plugin-informačný obsah"). Potom môžete upraviť rôzne hodnoty atribútov.

V prehliadači Firefox môžete urobiť to isté, len zvýraznite konkrétnu časť stránky, kliknite pravým tlačidlom myši na položku a potom vyberte možnosť „ Skontrolujte prvok V zobrazenej ponuke.

Ako WordPress a CSS spolupracovať

Je faktom, že Témy WordPress sú vytvorené inak. Takže majte na pamäti, že váš WordPress tému nemusí 100 % spĺňať to, čo čítate v nasledujúcich častiach.

Je však viac ako pravdepodobné, že CSS použitá vo vašom blogu WordPress sa nachádza v súbore s názvom „ style.css ". Toto je všeobecný názov pre šablónu štýlov pre ľubovoľný typ webových stránok, nielen pre WordPress.

Pozri tiež: Ako zmeniť veľkosť obrázkov Gravatar na WordPress

Teraz je čas prejsť rôznymi procesmi úprav.

Metóda # 1: Úprava súboru štýlov vašej témy WordPress

Existujú dva spôsoby prístupu k súboru style.css vašej témy.

Prvým z nich je urobiť to z hlavného panela WordPress. Na ľavej strane ponuky vyberte ponuku „ apparence „A potom“ vydavateľ ".

Po prechode na stránku editora sa na zvislej lište v pravej časti stránky zobrazí zoznam súborov. Prejdite zoznamom súborov. Uvidíte súbor s názvom „ štýlov style.css V dolnej časti stránky.

Ak kliknete na názov tohto súboru, bude načítaný a zobrazený v editore uprostred. Túto obrazovku môžete použiť na úpravu súboru.

Ďalším spôsobom, ako nájsť šablónu so štýlmi, je prechádzať operačným systémom poskytovateľa hostingu a nájsť súbor v WordPress tému (pomocou FTP klienta). Presné umiestnenie sa bude líšiť v závislosti od vášho poskytovateľa hostingu. V príklade uvedenom nižšie je názov webovej stránky (v našom prípade thecare) Je zložka v priečinku public_html.

Pretože je WordPress nainštalovaný, v priečinku „thecare“ sa zobrazuje priečinok wp-content. Podpriečinok wp-content je ďalší priečinok s názvom „ wp-témy“, kde sú všetky Témy WordPress sú nainštalované.

Z tohto webu sa používa téma s názvom „ Prihlás sa na odber Newslettra », Súbor štýlov« style.css Nachádza sa v priečinku “ Parent Newsletter ".

Metóda č. 2: Použitie doplnku na úpravu CSS

Asi najpohodlnejším spôsobom úpravy CSS vášho blogu WordPress je použitie doplnku.

Jedna z hlavných výhod používania doplnku je podobná ako u detských tém. Áno aktualizujete tému WordPress, vaše zmeny nebudú prepísané, pretože sa uložia osobitne a nie medzi súbory tém. Ďalšou výhodou samozrejme je, že nemusíte vytvárať detskú tému.

Tu je niekoľko prémiových doplnkov, ktoré môžete použiť aj na úpravu kódu CSS WordPress tému :

1. Žltá ceruzka: Editor štýlov Visual CSS

Žltá ceruzka je editor vizuálneho štýlu, ktorý môžete použiť s ľubovoľnou témou na prispôsobenie svojho webu za pár minút (písma, farby, animácie a ďalšie ...).

Ce WordPress Plugin premium vytvorí CSS štýly podľa pozadia zatiaľ čo hráte s farbami, akoby to bola hra. Bola určená pre začiatočníkov aj skúsených používateľov.

Objavte aj naše Doplnky 5 WordPress na zobrazenie upozornení

Nevyžadujú sa žiadne znalosti kódovania. Avšak, WordPress Plugin má dobrý editor CSS pre tých, ktorí radi kódujú. Pomocou tohto editora môžete kódovať naživo a prispôsobiť si svoj CSS.

Stiahnuť | demo | web hosting

2. Vlastné JS a CSS pre Gutenberg

Le WordPress Plugin prémiový vlastný JS a CSS pre Gutenberg vám umožní pridať neobmedzené množstvo vlastných štýlov do editora WYSIWYG pre vaše príspevky a stránky vo WordPress. Je plne kompatibilný s verziou WordPress od Gutenberg.

Jednoducho si môžete vytvoriť nový štýl pomocou ľahko použiteľného editora CSS. Tento doplnok WordPress rozširuje funkcie systému vlastné polia vášho webu a umožňuje vám upravovať svoje vlastné polia pomocou dynamického a výkonného modulu prispôsobenia. a funkčnosť náhľad v reálnom čase tohto doplnku WordPress je veľmi pohodlný a ľahko použiteľný.

Stiahnuť | demo | web hosting

3. CSS SiteOrigin

Je to zďaleka doplnok WordPress, ktorý ponúka najviac možností v tomto zozname. Najúžasnejšie na tom druhom je, že je zadarmo. Tento doplnok WordPress je jediný, ktorý nemožno nájsť v nástroji na prispôsobenie.

Po nainštalovaní a aktivácii doplnku musíte prejsť na nasledujúce miesto „ Vzhľad> Vlastné CSS Prístup k vydaniu doplnku CSS. Na tejto stránke vidíte textový editor, ktorý neponúka ukážku v reálnom čase. 

Prečítajte si tiež náš článok o Zásuvné moduly 10 WordPress na zvýšenie predaja vašich webových stránok

Ak chcete získať prístup k poslednému uvedenému, musíte kliknúť na jedno z dvoch tlačidiel, ktoré sa zobrazujú vľavo, priamo nad editorom. Tlačidlo s ikonou oka vyvolá vizuálny editor CSS, ktorý nadšenci ocenia. Ikona so šípkami rozšírenia zobrazí textový editor, ktorý bude znamenať zvládnutie kódov CSS.

Stiahnuť | demo | web hosting

4. Jednoduché Custom CSS

Jednoduché Custom CSS je jedným z najpopulárnejších doplnkov.

Objavte aj naše Ako dosiahnuť, aby bol váš blog rýchly: správa súborov CSS a JS.

Bol nainštalovaný viac ako 100 000 krát a získal päťhviezdičkové hodnotenie.

Stiahnuť | demo | web hosting

5. WP Pridať vlastné CSS

WP Pridať vlastné CSS je doplnok, ktorý vám umožňuje zmeniť rozloženie blogu WordPress celé alebo iba jednotlivé články. Toto je vynikajúca voľba, ak hľadáte flexibilitu pri prispôsobovaní položiek.

Plugin bol stiahnutý viac ako 10.000 4,3-krát a v súčasnosti má hodnotenie XNUMX hviezdičkami.

Stiahnuť | demo | web hosting

6. Téma Junkie Custom CSS

Ak hľadáte riešenie, ktoré ponúka živý náhľad vašich zmien, môžete zvážiť použitie Téma Junkie Custom CSS. 

Toto riešenie pridá na váš informačný panel vlastného správcu CSS, do ktorého môžete pridať svoje vlastné štýly. Ponúka tiež alternatívu k pomocou detskej témy.

Stiahnuť | demo | web hosting

Ďalšie odporúčané zdroje

Tiež vás pozývame, aby ste si prečítali zdroje uvedené nižšie, aby ste sa presadili a ovládali svoje webové stránky a blog.

• Zdieľanie doplnkov 10 WordPress na sociálnych sieťach
• Ako zobraziť vlastné pole zo slučky na WordPress
• Zásuvné moduly 5 WordPress na speňaženie blogu pomocou reklám
• Ako sa chrániť vaše škrabky obsahu blogu

záver

Tu! To je pre tento tutoriál všetko, dúfam, že sa vám podarí pridať vlastný kód CSS do vášho blogu WordPress dvoma spôsobmi, ak máte nejaký Komentáre alebo návrhy, neváhajte a povedzte nám to v časti, ktorá je pre ne vyhradená.

Môžete sa však poradiť aj s našimi zdroje, ak potrebujete viac prvkov na realizáciu svojich projektov tvorby internetových stránok, konzultujte nášho sprievodcu na internete Tvorba blogu WordPress alebo jeden na Divi: najlepšia téma WordPress všetkých čias.

Ak sa vám tento článok páčil, nneváhajte zdieľať na svojich obľúbených sociálnych sieťach. 

...