Jak přizpůsobit svůj web WordPress pomocí CSS: 3 snadné metody

WordPress se v průběhu let vyvíjel a dnes je to docela flexibilní a snadno přizpůsobitelná platforma prostřednictvím editoru bloků Gutenberg. Přesto nastanou chvíle, kdy budete potřebovat trochu větší dosah, než poskytuje editor Gutenberg.

Zde se hodí vlastní CSS. Styl CSS vám umožňuje upravovat barvy, mezery, písma, rozvržení a v podstatě každý další vizuální prvek vašeho webu WordPress, což vám umožní, aby vypadal přesně tak, jak chcete.

V tomto článku vás provedeme základy přizpůsobení vašeho webu WordPress pomocí CSS.

Proč přizpůsobit svůj web pomocí CSS?

Přidání vlastního CSS je jen jednou z metod, kterou můžete použít k doladění vzhledu vašeho webu. Mezi další metody patří použití a dobře vybavené prémiové téma WordPressnebo instalaci nástroje pro tvorbu stránek.

Zatímco tyto dvě metody jsou pro začátečníky o něco jednodušší a nevyžadují žádné znalosti kódování, použití vlastního CSS je výhodnější ve dvou hlavních směrech:

Nulové náklady

Prémiová témata a tvůrci stránek WordPress mohou být užiteční, ale stojí za to – v dolarech a centech. Na druhou stranu, vyzbrojeni znalostmi, jak psát vlastní CSS, můžete dosáhnout stejných efektů, aniž byste museli vynaložit další výdaje.

Minimální nadýmání

Tvůrci stránek a dobře vybavené motivy jsou navrženy tak, aby uživatelům poskytovaly větší flexibilitu a širokou škálu možností přizpůsobení jejich webových stránek. Z tohoto důvodu mají tendenci přidávat webům nadýmání, což je potenciálně zpomaluje.

Na druhou stranu při psaní vlastních CSS přidáte pouze nezbytné funkce, což obecně vede k odlehčení webových stránek a rychlejšímu načítání.

3 snadné způsoby přizpůsobení webu WordPress pomocí CSS

Snad už víte jak psát CSS. Jakmile se seznámíte se základy, můžete na svůj web WordPress použít kteroukoli z následujících metod:

Metoda 1: Použijte WordPress Customizer

S WordPress 4.7 nebo jakoukoli pozdější verzí můžete přidat vlastní CSS přímo z oblasti pro správu. Toto je nejpřímější metoda, a protože je k dispozici živý náhled, můžete všechny provedené změny vidět v reálném čase.

Je to také nejvíce doporučený, protože všechny změny, které budete provádět, se ukládají v samotném WordPressu. To znamená, že i když změníte nebo aktualizujete svůj motiv, neztratíte svůj vlastní CSS.

Zde jsou kroky, které je třeba podniknout:

Krok 1: Navigovat do Vzhled > Přizpůsobit.

Tím se otevře nástroj pro přizpůsobení motivů WordPress, který vám vpravo zobrazí živý náhled vašeho webu spolu s některými možnostmi přizpůsobení vlevo. Přejděte dolů do spodní části levého panelu a najdete Další CSS tab.

Krok 2: Klikněte na Další CSS Tab.

Tím se v levém podokně otevře malé pole, kam můžete přidat vlastní CSS. Můžete zadat tolik řádků kódu CSS, kolik chcete. Skvělá věc na tomto editoru je, že ověřuje váš kód a upozorní vás, pokud se vyskytnou nějaké chyby.

Krok 3: Zveřejněte své změny.

Jakékoli platné pravidlo CSS, které přidáte, se zobrazí v oblasti živého náhledu vpravo. Chcete-li změny použít na svůj web, klikněte na Publikovat až budete spokojeni, tlačítko v horní části levého panelu. Pokud nechcete, aby se změny projevily okamžitě, můžete také naplánovat publikování na později nebo uložit svou práci jako koncept.

Je důležité si uvědomit, že jakékoli změny, které provedete pomocí přizpůsobení, jsou svázány s vaším aktuálním motivem. Pokud někdy přepnete na jiný motiv, změny budou ztraceny, pokud nezkopírujete vlastní CSS a nepřidáte je do nového motivu. Je dobrým zvykem uložit si všechny vlastní CSS, které přidáte k tématu, do poznámkového bloku. Tímto způsobem můžete jednoduše zkopírovat kód a vložit jej do sekce „Další CSS“ pro jiné téma.

Pokud to zní jako příliš mnoho práce a dáváte přednost řešení, které vám umožní použít vlastní CSS na jakékoli téma WordPress, které používáte, další metoda je pro vás.

Metoda 2 Použijte plugin

Vlastní pluginy CSS ukládají vaše vlastní CSS odděleně od vašeho motivu, což umožňuje použití vašich změn bez ohledu na to, jaký motiv používáte. Tyto pluginy také přicházejí s dalšími funkcemi, jako je automatické dokončování, které mohou usnadnit přidávání CSS.

Jedinou nevýhodou je, že se jedná o software třetích stran, což znamená, že mohou potenciálně zpomalit váš web. Většina těchto pluginů je však lehká, takže obecně mají malý dopad na výkon vašeho webu. Zde jsou některé z nejlepších vlastních pluginů CSS, které můžete použít:

• Jednoduché vlastní CSS

Jednoduché vlastní CSS je jedním z nejpopulárnějších vlastních pluginů CSS. Je lehký, snadno se používá a nabízí skvělé funkce. Nastavení je snadné. Vše, co musíte udělat, je nainstalovat a aktivovat plugin. Poté přejděte na Vzhled části v levém podokně vašeho řídicího panelu.

Uvidíte novou možnost s názvem Vlastní CSS. Kliknutím na něj se otevře editor, do kterého můžete přidat vlastní CSS. Klikněte na Aktualizujte vlastní CSS tlačítko pro uložení změn. Chcete-li zobrazit změny, stačí obnovit web.

• Jednoduché vlastní CSS a JS

Pokud chcete ještě více funkcí, Jednoduchý vlastní CSS a JS plugin je skvělá možnost. Kromě přidávání CSS umožňuje přidávat položky JavaScriptu.

• Hrdina CSS

Pokud nechcete psát jediný řádek kódu, Plugin CSS Hero je pro vás ideální. Tento plugin nabízí vizuální editor CSS s rozevíracími nabídkami a vstupními poli, které vám umožňují upravovat téměř jakýkoli styl CSS na vašem webu, aniž byste museli psát jakýkoli kód.

Metoda 3 Upravte nezpracovaný kód

Dvě metody, které jsme popsali výše, vám umožňují přidat vlastní CSS na váš web, aniž byste se museli dotýkat jakéhokoli souboru motivu. V některých případech však možná budete chtít upravit CSS vašeho motivu nebo přímo přidat vlastní CSS do kódu vašeho motivu.

Chcete-li to provést, budete potřebovat přístup k šabloně stylů vašeho webu. Snadný způsob přístupu k této šabloně stylů je přes Editor motivů na hlavním panelu WordPress.

Než však půjdeme dále, existuje několik bezpečnostních opatření, která musíte zavést. Za prvé, zálohujte svůj web. Při úpravách souborů motivů je snadné udělat chyby, které mohou potenciálně způsobit selhání vašeho webu.

Záloha zajistí, že budete mít funkční web, na který se můžete vrátit. Další, vytvořit dětské téma. Pokud provedete přímé úpravy svého nadřazeného motivu, změny budou ztraceny při každé aktualizaci motivu.

Jakmile jsou tato zabezpečení zavedena, přihlaste se ke svému backendu WordPress. Jít do Vzhled > Editor motivů. Když kliknete na možnost editoru motivů, zobrazí se vyskakovací okno, které vás varuje před přímými změnami souborů motivů. Pokud budete postupovat podle výše uvedených kroků, můžete začít.

Klikněte Chápu pokračovat.

Po kliknutí byste měli ve výchozím nastavení vidět šablonu stylů vašeho webu. Pokud ne, stačí se podívat do pravého podokna a kliknout na styl.css pod Šablona stylů volba.

Odtud můžete provádět přímé změny v souborech motivů. Jen nezapomeňte kliknout Uložit a aktualizovat jakmile budete hotovi.

Převezměte kontrolu nad vzhledem svého webu pomocí vlastních CSS

Naučit se psát vlastní CSS na WordPress může začátečníkům nějakou dobu trvat, ale dá vám skutečnou kontrolu nad vzhledem vašeho webu. A to za nulové náklady a s minimálním dopadem na výkon vašeho webu.

Pokud byste však raději nedělali žádné ruční navrhování, existují i ​​​​jiné způsoby, jak tuto práci provést, například pomocí jednoho z nejlepších tvůrců stránek pro WordPress.

5 WordPress Page Builders, které vám pomohou vytvořit úžasné webové stránky

Chcete, aby váš web WordPress vypadal úžasně, ale nemůžete si dovolit vývojáře? Vyzkoušejte místo toho tyto tvůrce stránek WordPress.

Přečtěte si další

O autorovi