buď pokud vytvoříte vlastní téma WordPress, podřízené téma od jeho rodiče nebo upravíte motiv, setkáte se s potřebou přidat svůj vlastní styl CSS. S největší pravděpodobností budete také chtít přepsat některé styly z výchozího šablony stylů motivů.
existuje několik způsobů, jak přidat vlastní styly a / nebo přepsat výchozí styly. Jaký je nejlepší způsob, jak to udělat? Vývojáři se dohodnou, že je to vytvořením vlastních souborů CSS a vložením do tématu WordPress, na kterém pracujete.
způsoby přidání vlastního kódu CSS do témat WordPress
nebudeme mluvit o znehodnocených způsobech přidávání stylů CSS do prvků HTML nebo přidávání bloků <style>. V současné době vývojáři tuto metodu opouštějí. Také nejsou SEO přátelské,což je v dnešní době důležitá otázka.
nebudeme ani navrhovat úpravy původního CSS stylu motivu (obvykle styl.css), nebo přidání vlastního kódu. Tento soubor je často velmi velký a obtížně spravovatelný. Jakákoli malá chyba při psaní nebo chyba syntaxe v něm může způsobit selhání celého webu.
v tomto článku vám ukážeme, jak vytvořit vlastní soubor CSS a vložit jej do tématu WordPress.
existuje několik způsobů přidání vlastního kódu CSS do témat WordPress. Jaký je nejlepší postup?
jak přidat vlastní soubory stylů do témat WordPress pomocí wp_register_style () a wp_enqueue_style ()
prvním krokem vložení vlastních souborů CSS do WordPress je přidání souborů do vašeho motivu. Buď pomocí FTP klienta nebo správce souborů cPanels vyhledejte složku motivu a otevřete ji. Nyní můžete buď vytvořit nový soubor a název například vlastní.css nebo nahrát soubor CSS z počítače. V případě, že potřebujete do tématu WP přidat více než jeden soubor CSS, opakujte tento krok.
pokud jste tento krok dokončili správně, měli byste vidět svůj vlastní soubor CSS nebo soubory v editoru instalačních motivů WordPress.
propojení vlastních souborů CSS sekce hlavy webu
Nyní, když jste přidali své vlastní soubory CSS do složky motivů WP, je čas propojit soubory do sekce < head >. Tímto způsobem může Web aplikovat vaše vlastní styly na své prvky.
můžete jednoduše přidat prvek < link > do sekce <head> vašeho webu, nejlépe těsně před značkou < / head>. Tímto způsobem vlastní CSS styly načíst poslední a přepsat výchozí styly. Část < head > vašeho webu se obvykle nachází v záhlaví složky motivu.php soubor a je přístupný prostřednictvím editoru témat WordPress.
zde je příklad prvku když je váš web umístěn ve složce „test-site“ v kořenové složce vašeho serveru, složka motivu se nazývá „test-theme“ a soubor CSS se nazývá „vlastní“.css“:
<link rel="stylesheet" href="/test-site/wp-content/themes/test-theme/custom.css" type="text/css" media="all">toto jednoduché řešení bude fungovat dobře, ale není to nejlepší praxe vkládání souborů CSS do webů WordPress.
vložení souboru CSS do WordPress pomocí funkcí wp_register_style() a wp_enqueue_style ()
doporučenou praxí pro vložení vlastních souborů CSS na váš web WordPress je registrace stylů ve funkcích vašeho tématu WP.php soubor pomocí wp_register_style() a wp_enqueue_style () funkce. Tímto způsobem se vaše CSS soubory načtou v okamžiku, kdy je spuštěna akce wp_head. Váš styl bude umístěn hned po výchozím stylu motivu. a umožní vám přepsat výchozí styly.
první věc, kterou musíte udělat, je najít funkce motivu.php soubor. Je umístěn uvnitř editoru motivů WordPress. Můžete to také udělat pomocí správce souborů FTP nebo cPanels. Pokud pracujete na podřízeném motivu, upravte soubor funkcí podřízených motivů, nikoli rodičovský motiv. Tímto způsobem se vyhnete ztrátě vlastního kódu při aktualizaci nadřazeného motivu. Přejděte dolů na konec funkcí.php a přidejte následující úryvek kódu:
function additional_stylesheets() {wp_register_style( 'custom', get_template_directory_uri().'/custom.css' );wp_enqueue_style( 'custom' );}add_action( 'wp_enqueue_scripts', 'additional_stylesheets' );Přizpůsobte úryvek: ve výše uvedeném příkladu jsme pojmenovali registrační funkci „additional_stylesheets“ a zaregistrovali jsme soubor CSS stylů s názvem “ vlastní.css“, dříve nahrané do naší složky motivů. Funkci můžete pojmenovat, jak chcete, a nahradit název funkce v horním a dolním řádku snipetu. Pokud je váš soubor stylů pojmenován jinak než vlastní.css nahraďte slovo vlastní v snipetu vlastním názvem souboru.
pokud jste udělali vše správně, můžete začít psát svůj vlastní kód CSS do svého stylu. Při ukládání změn a opětovném načtení stránky si všimnete, že vaše styly ovlivňují web. Při aktualizaci stránky nezapomeňte vyčistit mezipaměť prohlížeče.
vkládání více vlastních stylů CSS souborů do funkcí.php pomocí wp_register_style () a wp_enqueue_style ()
před přidáním více souborů CSS do tématu WP vezměte v úvahu, že při načítání webu způsobuje více požadavků serveru, což ovlivňuje rychlost načítání vašeho webu. Zkuste použít co nejméně stylů.
nyní řekněme, že máte samostatný soubor stylů pro styly plochy s názvem vlastní.css a druhý soubor stylů s názvem responzivní.css pro mobilní zařízení. Vložení obou stylů do vašich funkcí.php soubor je jednoduchý a vyžaduje mírnou úpravu jednoho úryvku souboru je uvedeno výše:
function additional_stylesheets() {wp_register_style( 'custom', get_template_directory_uri().'/custom.css' );wp_register_style( 'responsive', get_template_directory_uri().'/responsive.css' );// register another file herewp_enqueue_style( 'custom' );wp_enqueue_style( 'responsive' );// enqueue another file here}add_action( 'wp_enqueue_scripts', 'additional_stylesheets' );stejně jako přizpůsobení úryvku jednoho souboru změňte názvy souborů podle vaší situace.
více o funkcích wp_register_style() a wp_enqueue_style ()
Chcete-li se dozvědět více o používání funkcí wp_register_style() a wp_enqueue_style() pro registraci stylů, navštivte vyhrazenou stránku WP Codex.