Existuje více než jeden způsob, jak přidat vlastní kód CSS do blogu WordPress.

Dnes vám vysvětlím silné a slabé stránky dvou různých metod, které vám navrhuji, abyste si mohli vybrat ten, který vám nejlépe vyhovuje.

Ale dříve, pokud jste nikdy nenainstalovali WordPress objevit Jak nainstalovat 7 kroků WordPress blogu et Jak najít, nainstalovat a aktivovat WordPress téma na svém blogu 

Pak zpět k tomu, proč jsme tady.

Jak najít položky, které chcete přizpůsobit

Jakmile jste část izolovali téma WordPress, které chcete změnit (například název článku), budete muset určit vlastnosti CSS aplikováno na něj, abyste mohli provést příslušné změny. Naštěstí tento proces není složitý.

CSS používá selektory k určení, které prvky budou prožívat různé specifické změny. Obvykle se to provádí zadáním „ třída „Prvku (nebo prvek DOM). CSS však lze také použít k definování rozvržení celého prvku (například značka „ ") nebo pomocí identifikátoru značky.

Naštěstí nám populární prohlížeče umožňují vidět různé selektory a deklarace, které se aplikují na prvky stránky pouhými několika kliknutími. Například v Google Chrome stačí zvýraznit konkrétní část dokumentu a poté kliknout pravým tlačítkem, jako v příkladu níže.

Kliknutím na tlačítko " Zkontrolujte prvek V rozbalovací nabídce, která se zobrazí, uvidíte HTML kód stránky v novém okně s kontrolovanou položkou zvýrazněnou v okně vpravo (nebo nižší). Můžete vidět příklad níže.

Texty těchto prvků (nebo atributy) Červeně zvýrazněné vám ukáže různé specifické styly použitelné pro položku, kterou jste zvýraznili kontrolou kódu.

Čtěte také: Jak přidat rozbalovací menu s CSS ve svém textovém editoru

Například prvek „ velikost písma Řekne vám, že písmo zobrazené ve zvýrazněné položce má velikost 13 pixelů. Deskriptory jsou obklopeny složenými závorkami a před nimi jsou vybrány selektory. Název odpovídajícího souboru stylů se zobrazí přímo napravo od voličů.

Jakmile budete mít tyto informace na paměti, změna stylu bude snadná. Pokud například chcete změnit písmo z 13px na 14px, jednoduše vyhledejte soubor se stylovým listem, selektor, který odpovídá jedné ze zvýrazněných položek. Obecně je v této podobě: (« # .block-plugin-informační obsah"). Poté můžete upravit různé hodnoty atributů.

V prohlížeči Firefox můžete udělat totéž, pouze zvýraznit konkrétní část stránky, kliknout pravým tlačítkem myši na položku a vybrat možnost „ Zkontrolujte prvek V zobrazené nabídce.

Jak WordPress a CSS spolupracovat

Je faktem, že Témata WordPress jsou vytvořeny jinak. Mějte tedy na paměti, že vaše WordPress téma nemusí 100% splňovat to, co jste si přečetli v následujících částech.

To znamená, že je více než pravděpodobné, že CSS použitý ve vašem blogu WordPress je umístěn v souboru s názvem „ style.css " Toto je obecný název stylů pro jakýkoli typ webu, nejen pro WordPress.

Viz též: Jak změnit velikost obrázků Gravatar na WordPress

Nyní je čas projít různými editačními procesy.

Metoda # 1: Úpravy souboru stylů vašeho motivu WordPress

Existují dva způsoby, jak získat přístup k souboru style.css vašeho motivu.

První z nich je to z ovládacího panelu WordPress. V nabídce na levé straně vyberte nabídku „ Apparence "A pak" vydavatel ".

Jakmile jste na stránce editoru, uvidíte seznam souborů ve svislém pruhu na pravé straně stránky. Procházejte seznamem souborů. Uvidíte soubor s názvem „ stylů style.css Ve spodní části stránky.

Pokud kliknete na název tohoto souboru, bude načten a zobrazen v editoru uprostřed. Na této obrazovce můžete soubor upravit.

Druhým způsobem, jak najít šablonu stylů, je procházet operačním systémem vašeho poskytovatele hostingu a najít soubor v WordPress téma (pomocí FTP klienta). Přesné umístění se bude lišit v závislosti na vašem poskytovateli hostingu. V níže uvedeném příkladu název webu (v našem případě thecare) Je složka ve složce public_html.

Jelikož je WordPress nainstalován, můžete vidět složku wp-content v "thecare". Podsložka wp-content je další složka s názvem „ wp-témata“, kde jsou všechny Témata WordPress jsou nainstalovány.

Z tohoto webu používá téma s názvem „ Newsletter », Soubor stylů« style.css Je umístěn ve složce " Parent Newsletter ".

Metoda č. 2: Použití pluginu k úpravě CSS

Snad nejpohodlnější způsob úpravy CSS vašeho blogu WordPress je použití pluginu.

Jedna z hlavních výhod používání pluginu je podobná jako u podřízených motivů. Ano aktualizujete téma WordPress, vaše změny nebudou přepsány, protože budou uloženy samostatně a ne mezi soubory motivů. Další výhodou samozřejmě je, že nemusíte vytvářet podřízené téma.

Zde jsou některé prémiové pluginy, které můžete také použít k úpravě kódu CSS svého WordPress téma :

1. Žlutá tužka: Editor stylů Visual CSS

Yellow Pencil je editor vizuálních stylů, který můžete použít s jakýmkoli motivem k přizpůsobení vašeho webu během několika minut (písma, barvy, animace atd.).

Ce WordPress Plugin premium vytvoří CSS styly podle pozadí zatímco hrajete s barvami, jako by to byla hra. Byla navržena pro začátečníky i zkušené uživatele.

Objevte také naše 5 pluginy WordPress zobrazovat oznámení

Nejsou vyžadovány žádné znalosti kódování. Nicméně, WordPress Plugin má dobrý editor CSS pro ty, kteří rádi kódují. Pomocí tohoto editoru můžete živě kódovat a přizpůsobovat své CSS.

Stáhnout | Demo | Web hosting

2. Vlastní JS a CSS pro Gutenberg

Le WordPress Plugin prémiový vlastní JS a CSS pro Gutenberg vám umožní přidat neomezené množství vlastních stylů do editoru WYSIWYG pro vaše příspěvky a stránky WordPress. Je plně kompatibilní s verzí WordPress Gutenberg.

Jednoduše vytvořte nový styl pomocí snadno použitelného editoru CSS. Tento plugin WordPress rozšiřuje funkce vlastní pole vašeho webu a umožňuje vám upravit vlastní pole pomocí dynamického a výkonného modulu personalizace. a funkčnost náhled v reálném čase tohoto pluginu WordPress je velmi pohodlný a uživatelsky příjemný.

Stáhnout | Demo | Web hosting

3. CSS SiteOrigin

Je to zdaleka plugin WordPress, který nabízí nejvíce možností v tomto seznamu. Nejúžasnější na tom druhém je, že je zdarma. Tento plugin WordPress je jediný, který nelze najít v nástroji pro přizpůsobení.

Po instalaci a aktivaci pluginu musíte přejít do následujícího umístění „ Vzhled> Vlastní CSS Pro přístup k vydání pluginu CSS. Na této stránce vidíte textový editor, který nenabízí živý náhled. 

Přečtěte si také náš článek o Pluginy 10 WordPress pro zvýšení prodeje vašich webových stránek

Chcete-li získat přístup k posledně uvedenému, musíte kliknout na jedno ze dvou tlačítek, která se zobrazují vlevo nad editorem. Tlačítko s ikonou oka vyvolá vizuální editor kódu CSS, který nadšenci ocení. Ikona se šipkami rozšíření zobrazí textový editor, který bude znamenat zvládnutí kódů CSS.

Stáhnout | Demo | Web hosting

4. Jednoduché Custom CSS

Jednoduché vlastní CSS je jedním z nejpopulárnějších pluginů.

Objevte také naše Jak udělat svůj blog rychlý: správa souborů CSS a JS.

Byl nainstalován více než 100 000krát a získal hodnocení pěti hvězdičkami.

Stáhnout | Demo | Web hosting

5. WP Přidat vlastní CSS

WP Přidat vlastní CSS je plugin, který vám umožní změnit rozvržení blogu WordPress celé nebo jen jednotlivé články. To je skvělá volba, pokud hledáte flexibilitu při přizpůsobování položek.

Plugin byl stažen více než 10.000 4,3krát a v současné době má hodnocení XNUMX hvězdičky.

Stáhnout | Demo | Web hosting

6. Téma Junkie Custom CSS

Pokud hledáte řešení, které nabízí živý náhled vašich změn, můžete zvážit použití Téma Junkie Custom CSS. 

Toto řešení přidá do vašeho ovládacího panelu vlastního správce CSS, kde můžete přidat své vlastní styly. Nabízí také alternativu k pomocí podřízeného motivu.

Stáhnout | Demo | Web hosting

Další doporučené zdroje

Zveme vás také, abyste si prostudovali níže uvedené zdroje, abyste se dostali dále do sevření a kontroly nad svým webem a blogem.

• 10 WordPress sdílení zásuvných modulů v sociálních sítích
• Jak zobrazit vlastní pole ze smyčky na WordPress
• 5 WordPress pluginy pro zpeněžení vašeho blogu s reklamami
• Jak se chránit vaše škrabky obsahu blogu

Proč investovat do čističky vzduchu?

Tady! To je pro tento návod vše, doufám, že se vám podaří přidat vlastní kód CSS do vašeho blogu WordPress dvěma způsoby, pokud máte nějaké commentaires nebo návrhy, neváhejte nám to sdělit v sekci vyhrazené pro tyto.

Budete však také moci konzultovat naše ressources, pokud potřebujete více prvků k realizaci vašich projektů vytváření internetových stránek, nahlédněte do našeho průvodce na internetu Vytvoření blogu WordPress nebo ten, který je zapnutý Divi: nejlepší téma WordPress všech dob.

Pokud se vám tento článek líbil, nneváhejte sdílet na svých oblíbených sociálních sítích. 

...