Pokud jde o vytváření webu na populární platformě WordPress, jedním z nejdůležitějších úkolů je upravit vzhled vašeho webu. Možná však budete muset přidat některé další styly CSS, abyste zlepšili vizuální zobrazení vašeho obsahu. V tomto článku se podíváme na to, jak správně připojit styly CSS ve WordPressu.
Prvním krokem je vytvoření samostatného souboru CSS pro vaše styly. K vytvoření tohoto souboru můžete použít jakýkoli textový editor, ale doporučuje se použít specializovaný editor kódu, jako je Visual Studio Code nebo Sublime Text.
Jakmile vytvoříte soubor CSS, musíte jej připojit k vašemu webu WordPress. Budete muset otevřít soubor functions.php ve složce vašeho tématu WordPress. V tomto souboru najdete funkci wp_enqueue_scripts, která je zodpovědná za připojení stylů a skriptů k vašemu webu. Budete muset přidat následující kód:
wp_enqueue_style( 'custom-style', get_stylesheet_directory_uri() . '/custom.css');
V tomto kódu je "custom-style" identifikátor vašeho stylu, který si můžete vybrat sami, abyste se v budoucnu nepletli. 'get_stylesheet_directory_uri () 'je funkce WordPress, která vrací adresu URL aktuálního tématu a' /custom.CSS ' je cesta k souboru CSS.
Po přidání tohoto kódu do souboru functions.php, vaše styly CSS jsou úspěšně připojeny k vašemu webu WordPress. Nyní můžete otevřít soubor CSS a začít přidávat vlastní styly, abyste změnili vzhled vašeho webu WordPress.
Připojení stylů css do WordPress
Chcete-li přidat styly css na váš web na WordPress, budete muset otevřít soubor functions.php vašeho tématu.
Můžete to udělat tak, že přejdete do ovládacího panelu WordPress a vyberete vzhled > editor motivů. Poté vyhledejte a vyberte soubor functions.php.
Uvnitř souboru functions.php musíte najít funkci wp_enqueue_scripts (). Tato funkce se používá k registraci a připojení souborů stylů.
Chcete-li přidat svůj soubor stylů css, můžete použít následující kód:
| Kód | Popis |
|---|---|
| wp_enqueue_style( 'custom-style', get_stylesheet_directory_uri() . '/custom-css/style.css' ); | Registrace a připojení souboru stylů.CSS ze složky custom-css vašeho tématu. |
Po přidání tohoto kódu do souboru functions.php, uložte změny.
Nyní bude váš soubor stylů automaticky připojen k vašemu webu WordPress. Pokud chcete změnit nebo přidat nové styly, můžete upravit svůj soubor stylů CSS.
Všimněte si, že musíte zadat správnou cestu k souboru stylů CSS. Pokud je váš soubor stylů v jiné složce, musíte změnit cestu v kódu.
Nyní víte, jak připojit styly css ve WordPressu. To vám umožní snadno změnit vzhled vašeho webu a vytvořit jedinečné návrhy pro vaše uživatele.
Instalace tématu WordPress
Zde je krok za krokem návod, jak nainstalovat téma WordPress:
- Přejděte do administrátorského panelu svého webu WordPress.
- V postranní nabídce vyberte sekci Vzhled a poté témata.
- Klikněte na tlačítko "Přidat nový".
- Můžete si vybrat téma z Galerie témat WordPress nebo si stáhnout vlastní téma.
- Pokud jste vybrali motiv z galerie, jednoduše na něj klikněte a klikněte na tlačítko Instalovat.
- Pokud si chcete stáhnout vlastní motiv, klikněte na tlačítko" Stáhnout motiv", Vyberte soubor motivu ve formátu .zip a klikněte na tlačítko"Instalovat nyní".
- Po instalaci motivu klikněte na tlačítko" Aktivovat " a použijte vybraný motiv na váš web.
Nyní máte nové téma WordPress! Můžete upravit jeho nastavení a vzhled, aby byl váš web jedinečný a atraktivní pro návštěvníky.
Konfigurace souboru functions.php
Chcete-li připojit styly CSS ve WordPressu, musíte nakonfigurovat soubor functions.php témata. Tento soubor obsahuje různé funkce a háčky, které vám umožňují změnit chování a vzhled WordPressu.
Chcete-li připojit styly CSS, musíte použít funkci wp_enqueue_style(). Tato funkce má dvě možnosti: jedinečný identifikátor stylu a cestu k souboru stylu.
Příklad kódu pro připojení stylu CSS:
- Přidejte následující kód do souboru functions.php:
wp_enqueue_style( 'custom-style', get_template_directory_uri() . '/css/custom-style.css' );
add_action( 'wp_enqueue_scripts', 'enqueue_custom_styles' );
- Tento příklad používá funkci get_template_directory_uri (), která vrací absolutní cestu do složky s aktuálním tématem.
- Vytvořte složku css v kořenové složce motivu a umístěte soubor stylu custom-style.CSS do této složky.
- Funkce add_action() přidává funkci enqueue_custom_styles () do háku wp_enqueue_scripts, aby byly styly připojeny na stránce.
Po nastavení souboru functions.php a připojení stylů CSS ve WordPressu, budou automaticky staženy a aplikovány na webu.
Práce s pluginy pro připojení stylů css
WordPress má několik pluginů, které pomáhají zjednodušit proces připojení stylů CSS k vašemu webu. Tyto pluginy vám umožňují snadno přidávat a upravovat styly, aniž byste museli upravovat motivový kód nebo používat podřízený motiv.
Jedním z takových pluginů je"Simple CSS and JS". S ním můžete na svůj web připojit své vlastní styly CSS. Po instalaci a aktivaci pluginu budete mít k dispozici novou nabídku Nastavení ve vašem administrátorském panelu WordPress.
V této nabídce najdete sekce " CSS "a" Javascript", kde můžete přidat své styly a skripty. Jednoduše vložte svůj CSS kód do příslušné oblasti a uložte změny. Vaše styly budou automaticky přidány na váš web.
Dalším oblíbeným pluginem je "wp Add CSS". Poskytuje také snadný způsob, jak přidat vlastní CSS kód na svůj web WordPress. Po instalaci a aktivaci pluginu, budete mít k dispozici novou možnost "Vzhled" v administrátorském panelu. V této sekci můžete přidat své vlastní styly CSS.
Vyberte si plugin, který je pro vás nejpohodlnější, a začněte s ním. Pamatujte, že při používání pluginů se vždy doporučuje zálohovat své webové stránky a zkontrolovat změny před jejich zveřejněním na živém webu.
Použití pluginů k připojení stylů CSS je pohodlný způsob, jak přidat a přizpůsobit styly na vašem webu WordPress, aniž byste museli upravovat zdrojový kód motivu.
Poznámka: Při práci s pluginy byste měli být opatrní a pečlivě sledovat jejich aktualizace. Může dojít ke konfliktům s jinými pluginy nebo novými verzemi WordPress, takže pravidelně kontrolujte aktualizace pluginů a ukládejte zálohy webu.
Ruční připojení stylů css ve WordPress
WordPress nabízí pohodlné způsoby připojení stylů css, ale někdy může být nutné ručně přidat své styly k tématu WordPress.
Chcete-li ručně připojit styly css, musíte otevřít soubor functions.php na téma WordPress. Nachází se ve složce vašeho tématu, kterou najdete v sekci Vzhled - editor motivů.
V souboru, který se otevře, musíte na konec přidat následující kód:
function načíst_styl()
wp_enqueue_style ('název', ' cesta_k_soubor.css');
add_action ('wp_enqueue_scripts','načíst_stili');
V tomto kódu vytváříme funkci načíst_stylie, která připojí naše styly css. Ve svém příkladu připojíme styl s názvem "název", který označuje cestu k souboru.css. Nahraďte " název "názvem svého stylu a" cesta_k_souboru.CSS " na cestě k souboru stylů.
Po přidání kódu uložte soubor functions.php. Nyní se vaše styly automaticky načtou na váš web WordPress.
Všimněte si, že nesprávná změna souboru může způsobit chyby na vašem webu. Před provedením změn se ujistěte, že zálohujete a máte přístup k FTP, abyste v případě potřeby obnovili starou verzi souboru.