Chcete, aby vaša webová stránka WordPress vyzerala skvele na každom zariadení a pre každého návštevníka, ale vaša predpripravená téma WordPress vás tam dostane len na 90 %.
Stále existuje niekoľko vecí, ktoré vás znepokojujú – veci, ktoré by vám CSS mohli pomôcť opraviť.
Táto príručka pre začiatočníkov WordPress CSS vám poskytne návod, ako upraviť CSS vo WordPress, aby vám pomohla vytvoriť krajšiu, intuitívnejšiu a výkonnejšiu webovú stránku. Väčšina tried CSS pre WordPress vás prevedie rovnakými krokmi.
Úvod do úprav WordPress
Pri používaní WordPress si môžete prispôsobiť CSS pomocou jedného z troch rôznych editorov, ktoré služba poskytuje.
Vizuálny editor
Vizuálny editor je funkcia platformy na úpravu príspevkov a stránok. Bol opísaný ako WYSIWYG (čo vidíte, to dostanete). To znamená, že všetko na stránke, ako to vidíte, je presne také, ako to bude vyzerať pre návštevníka webu.
Toto je editor, ktorý vám umožní vytvárať obsah bez kódovania. V hornej časti stránky sa nachádza panel s nástrojmi, ktorý je podobný známym programom, ako je Microsoft Word. Na úpravu textu a vzhľadu stránky môžete použiť nástroje, ktoré sa tam nachádzajú.
K dispozícii je tiež tlačidlo Pridať médiá, ktoré vám umožňuje zahrnúť obrázky alebo videá do vášho príspevku. Vývojári doplnkov WordPress môžu tiež pridať tlačidlá na panel nástrojov vizuálneho editora, ktoré vám pomôžu vytvoriť viac funkcií a štýlov pre vašu živú stránku.
Drag-and-drop editor
Drag-and-drop editor je jedným z najjednoduchších spôsobov úpravy webu. Ako základ svojej platformy využíva elementárny koncept. Niečo chytíš, zdvihneš a položíš niekde inde.
Hoci presúvanie myšou nie je štandardnou funkciou WordPress, existujú niekoľko redaktorov ktorý je možné nainštalovať a ktorý vám poskytne túto jednoducho použiteľnú platformu na úpravu.
Pri použití editora drag-and-drop môžete vybrať prvok svojej lokality a presunúť ho na nové miesto. Efektne umiestnite prvok na požadované miesto. Ak nie ste spokojní s tým, ako to vyzerá, môžete začať odznova a presunúť to niekam inam.
Úprava témy
Úprava témy sa týka vašej schopnosti upravovať tému alebo šablónu vášho webu WordPress.
Existujú dva rôzne druhy tém, ktoré by ste mohli upraviť: Nadradená téma a Podradená téma. Nadradená téma je úplná a úplná téma WordPress so všetkými správnymi prvkami. Detská téma má vzhľad a dojem z nadradenej témy, možno ju však upraviť.
Spôsob, akým upravíte svoju tému CSS WordPress, sa líši v závislosti od témy, ktorú používate. Vizuálne motívy používajú vizuálny editor, zatiaľ čo motívy presúvajúce myšou používajú editor drag-and-drop.
Ďalšie informácie o úprave témy WordPress nájdete v časti „Pochopenie editora tém WordPress“.
Čo znamená CSS vo WordPress?
Vaša webová stránka WordPress je vytvorená pomocou rôznych jazykov vrátane HTML, PHP, CSS a MySQL.
Zatiaľ sa zameriame na HTML/CSS.
HTML funguje ako obsahová štruktúra pre vašu webovú stránku (text, obrázky a iné médiá, hypertextové odkazy atď.) a CSS určuje, ako bude obsah vyzerať (napr. farby, fonty, umiestnenie prvkov, okraj a výplň).
Použime rýchly príklad.
Jednoduchý riadok textu v HTML môže obsahovať značku. Ale na zmenu vizuálnych charakteristík musíte použiť CSS. Jediný definuje obsah, nie to, ako by mal vyzerať.
Tu je niekoľko príkladov vizuálnych vlastností, ktoré by sme mohli zmeniť pomocou CSS.
- Farba písma
- Veľkosť písma
- Rodina písiem
- Farby pozadia
Predstavte si to ako dom. HTML predstavuje miestnosti, rozloženie a architektúru. CSS predstavuje farbu, výber obloženia a podlahy.
CSS dáva domu jeho „vzhľad“. Každý dom má podlahy, izby a steny, ale to, ako tieto podlahy, izby a steny vymaľujete a usporiadate, robí dom jedinečným. CSS možno použiť na pridávanie prvkov alebo ich odoberanie. Názvy stránok na WordPress môžete skryť pomocou CSS.
Kde nájdem CSS vo WordPress?
Ak chcete nájsť súbory CSS pre svoju tému WordPress, pozrite sa nižšie Vzhľad potom vyberte Editor a vyberte súbor označený style.css.
V tomto okne môžete upravovať súbory priamo a potom Uložiť.
Úvod do syntaxe a selektorov CSS
CSS sa skladá z pravidiel štýlu, ktoré interpretuje prehliadač a potom sa aplikujú na prvky vášho dokumentu.
Časti pravidla štýlu
- Selektor − Selektor je značka HTML, na ktorú sa použije štýl.
- Nehnuteľnosť − Vlastnosť je osobitná charakteristika značky HTML, ktorú možno zmeniť. Príkladom môže byť „farba“ pre textové prvky.
- Hodnota − Hodnoty sú priradené vlastnostiam. Napríklad vlastnosť farby môže mať hodnotu buď alebo . Pozrite si celú Mozillu CSS referencie zobraziť všetky vlastnosti a možné hodnoty pre každú vlastnosť.
Syntax
Syntax CSS je séria pravidiel pozostávajúca zo selektora a deklaračného bloku.
Blok výberu ukazuje kód na prvok HTML. Blok deklarácie mení vlastnosť tohto selektora na základe série hodnôt.
selektor { vlastnosť: hodnota }
Ak chcete pridať ďalšie pravidlá (koľko chcete), je štandardnou praxou dať každej vlastnosti, hodnote a deklarácii vlastný riadok. Vyzeralo by to asi takto:
selektor {
vlastnosť1: hodnota;
vlastnosť2: hodnota;
}
Selektory
Existujú veľa rôznych selektorov môžete identifikovať pomocou syntaxe, aby ste zmenili vlastnosti prvku HTML.
Niektoré z nich zahŕňajú:
- Voliče typu
- Univerzálne voliče
- Selektory potomkov
- Selektory tried
- selektory ID
- Detské selektory
- Selektory atribútov
Ako môžem použiť CSS vo WordPress?
Na ovládanie môžete použiť CSS vo WordPress
- Farba, veľkosť a štýl textu,
- Medzery medzi odsekmi a hlavičkami,
- Ako vyzerajú obrázky a iné médiá,
- Ako váš web vyzerá na rôznych veľkostiach obrazovky a ďalšie.
1. Ovládajte farbu, veľkosť a štýl textu
Najprv by ste sa mali rozhodnúť pre hodnotu farby HEX alebo RGB, ktorá zodpovedá požadovanej farbe. Môžete použiť bezplatný nástroj, napr Canva aby ste videli množstvo rôznych hodnôt farieb v spektre.
Ak chcete zacieliť na všetky značky odseku (
) musíme napísať pravidlo CSS tak, aby selektor cielil na tie
prvkov.
p { farba: hodnota-pôjde-tu; }
Vyberme peknú červenú z farebného kolieska. Použijeme #ea1520.
To by znamenalo, že pravidlo je
p {
farba: #ea1520;
}
A môžeme ísť!
Pridajte to do šablóny so štýlmi témy (style.css) a všetky
Po opätovnom načítaní stránky by značky mali byť červené.
Čo ak chceme zmeniť aj veľkosť a štýl písma pridaním prvkov ako tučné písmo alebo kurzíva? Potrebujeme len napísať pravidlá pre všetky tieto vlastnosti na ich vlastných riadkoch v rovnakom cieli vyššie.
p {
farba: #ea1520;
veľkosť písma: 26px;
štýl písma: tučné;
}
Dokumentácia pre veľkosť písma a štýl písma Pravidlá CSS možno nájsť na príslušných stránkach dokumentácie na adrese developer.mozilla.org
2. Ovládajte medzery medzi odsekmi, hlavičkami a ďalšími
Všetky farby a veľkosti vyzerajú skvele – ale čo tie rozostupy?
Je všetko príliš preplnené? Alebo ešte horšie, je všetko príliš ďaleko od seba a ľuďom sťažuje navigáciu na webe?
Toto je miesto, kde chcete prijať použitie vlastnosti margin.
Okraj je priestor okolo prvku vrátane hornej, dolnej, ľavej a pravej strany.
Ak chcete viac priestoru medzi nadpismi a odsekom, ktorý nasleduje za nimi, budete chcieť zväčšiť spodný okraj tejto značky nadpisu.
Dokumentácia Mozilly pre vlastnosť marže obsahuje interaktívny príklad, ktorý vám umožňuje otestovať niekoľko pravidiel okrajov na konkrétnom prvku, aby ste videli, ako reaguje na stránke.
Keď dobre pochopíte vlastnosť margin, napíšme pravidlo, ktoré do každého nadpisu pridá okraje.
h3 { okraj-dole: 25px; }
Teraz by naše nadpisy H3 mali mať pod sebou aspoň 25 pixelov (px) prázdneho priestoru pre všetky veľkosti obrazoviek.
3. Ovládajte vzhľad svojich obrázkov
Prostredníctvom CSS môžete ovplyvniť umiestnenie vašich obrázkov spolu s okrajmi okolo nich, ako sú vysoké a široké a podobne.
Tu je niekoľko príkladov kódovania, ktoré môžete použiť na ohraničenie, zmenu mierky a centrovanie obrázkov.
Hranica:
img { border: 1px solid #ddd;
border-radius: 4px;
výplň: 5px;
šírka: 150px;
}
Zmena mierky obrázka:
img {
maximálna šírka: 100 %;
výška: auto;
}
Centrovanie obrázka:
img {
displej: blok;
ľavý okraj: auto;
pravý okraj: auto;
šírka: 50 %;
}
4. Ovládajte, ako vaša stránka vyzerá na rôznych zariadeniach a veľkostiach obrazovky
Vzhľad svojej stránky môžete ovládať na rôznych zariadeniach. To je dôležité v dnešnej klíme, keď používatelia pristupujú k webovému obsahu prostredníctvom svojich počítačov, mobilných telefónov a tabletov.
Nižšie je uvedený príklad kódu CSS, ktorý môže zmeniť usporiadanie vašej stránky pre zariadenie s maximálnou šírkou stránky 480 pixelov.
@media only screen and (max-device-width: 480px) {
div#wrapper {
šírka: 400px;
}
div#header
{
background-image: url(media-queries-phone.jpg);
výška: 93px;
poloha: relatívna;
}
div#header h1 {
veľkosť písma: 140 %; }
#content {
plavák: žiadny;
šírka: 100 %; }
#navigation {
float:none;
šírka: auto;
}
}
Ako upravím CSS vo WordPress?
CSS vo WordPress môžete upravovať manuálne cez FTP klienta alebo pomocou pluginu.
Pridanie CSS do WordPress manuálne
Ak chcete manuálne pridať CSS do WordPress, musíte použiť detskú tému, ktorá je tvárnejšia ako nadradená téma a dá sa ľahko zmeniť. Vlastný CSS, ktorý pridáte do podradenej témy, prepíše štýly nastavené rodičom.
Tu je postup, ako pridať vlastný CSS do podradenej témy:
- Použite FTP klienta ako napr FileZilla na pripojenie k lokalite.
- Nájdite koreňový priečinok. Zvyčajne sa nazýva „www“ alebo obsahuje názov vašej stránky
- Keď tam budete, prejdite do adresára wp-content/themes, kde nájdete priečinky pre všetky svoje témy. Vyberte detskú tému, ktorú ste nastavili.
- Kliknite pravým tlačidlom myši na súbor a vyberte Zobraziť/Upraviť. Súbor sa otvorí v textovom editore.
- Pridajte svoj vlastný CSS WordPress priamo do témy.
- Uložte zmeny a zatvorte editor.
Pridanie CSS do WordPress pomocou doplnku
Existuje množstvo doplnkov, ktoré môžete použiť na pridanie ďalších CSS na vašu stránku WordPress alebo na odloženie nepoužívaných CSS z WordPress.
5 najlepších doplnkov CSS pre WordPress
Pomocou ktorejkoľvek z týchto možností budete môcť získať prístup k backendu svojho webu a pridať svoj vlastný kód CSS WordPress. Iné doplnky sú schopné dokončiť pokročilé funkcie, ako je optimalizácia doručenia CSS na WordPress pomocou súborov style.css.
Záver
Tento návod na CSS pre WordPress poskytuje jednoduchého sprievodcu pre začiatočníkov, podobne ako prvé triedy WordPress CSS.
S CSS je vždy čo učiť a vzrušujúcejšie spôsoby, ako ho použiť. Naše odporúčanie je začať v malom. Vykonajte napríklad jednoduchú zmenu vo svojej téme WordPress, ktorá definuje farbu pozadia päty. Ak zistíte, že váš WordPress CSS sa neaktualizuje, vráťte sa a znovu si prečítajte tieto časti, aby ste lepšie pochopili, čo sa pokazilo.
Vylepšite svoj web pomocou plne spravovaného hostingu WordPress od spoločnosti Hostinger
V Hostinger naše spravované plány hostenia WordPress ponúkajú rýchly, spoľahlivý, škálovateľný a bezpečný hosting, takže sa môžete spoľahnúť, že vaša stránka bude fungovať hladko. Vyberte si svoj plán a začnite budovať alebo migrovať svoje stránky ešte dnes.
