Jak správně vkládat scripty a styly do šablony
Pro efektivnější a rychlejší web na WordPressu není možné styly a scripty jen tak plácnout do šablony. Díky jejich zaregistrování do systému pak s nimi mohou pracovat například cachovací pluginy. Ty je zmenší a rovněž sníží počet požadavků na celý server.
Při úpravách šablon se vám jistě častokrát stalo, že jste museli přidat nějaké nové externí soubory se styly nebo scripty. Co si budeme namlouvat, použít nějaký hotový javascriptový plugin je mnohem jednodušší, než si všechno sám, ručně psát. Přidání by ovšem nemělo být realizována prostým plácnutím kódu do hlavičky webu. WordPress k tomu mnohem přistupuje mnohem sofistikovaněji a lépe.
Správný postup je cestu k js a css souborům zagistrovat přímo v PHP a ty se pak sami na webuobjeví, díky funkci wp_head(), bez které se neobejde žádná šablona.
A proč to vůbec řešit tak složitě? Ze dvou důvodů. Nemůže se stát, že budete načítat například dvě knihovny jquery. Pomůže to také ke zrychlení webu, protože většina lidí používá cachovací pluginy. Ty dokážou zaregistrované zdroje spojit do jednoho a ušetřit tak serveru mraky požadavků.
Užitečné to je rovněž u pluginů, kde nikdy nevíte, jestli je do šablony jquery už nahrané nebo ještě dne. WordPressu sdělíte, že ho potřebujete a on se pak už o všechno postará sám.
Přidávání stylů
Celý proces se skládá v podstatě ze dvou kroků – z zaregistrování css souboru a následně jeho použití. Registrace se provádí pomocí funkce wp_register_style. Uvedu příklad:
|
1 |
wp_register_style('muj-styl', get_template_directory_uri() . '/css/muj_styl.css', array('base_style'), '2.1', 'screen'); |
První parametr je unikátní označení vkládaného stylu. Umožňuje nám s ním později pracovat. Druhý parametr je cestou k souboru, který chceme použít. Tyto dvě ho dnoty jsou povinné, ostatní už volitelné.
get_template_directory_uri vrací k cestu šabloně a plugin_dir_url(__FILE__) cestu k pluginu
Pomocí třetího parametru nastavujeme závislosti. To znamená, jaké styly se musí načíst před tím, než použijeme tento styl. Další hodnota je verze souboru. Slouží především pro mazání browserové cache na straně uživatele. Poslední parametr určuje, kde všude se má styl uplatnit (základní hodnoty jsou all, screen a print).
Následuje je třeba vydat příkaz k použití stylu.
|
1 |
wp_enqueue_style('muj-styl'); |
Přidávání scriptů
Scripty se přidávají na velmi podobném principu.
|
1 2 |
wp_register_script( "ajax-script", get_template_directory_uri() . '/js/my_js.js', array('jquery'), '2.1', false ); wp_enqueue_script('ajax-script'); |
Liší se v podstatě pouze v tom, že poslední parametr se nás ptá na to, zda se má scriptu vložit do patičky místo hlavičky. Jinak zůstává systém totožný.
Shrnutí
Na závěr uvedu kompletní kód:
|
1 2 3 4 5 6 7 8 |
add_action('wp_enqueue_scripts', 'my_sources'); function my_sources() { wp_register_script( "ajax-script", get_template_directory_uri() . '/js/my_js.js', array('jquery'), '2.1', false ); wp_enqueue_script('ajax-script'); wp_register_style('muj-styl', get_template_directory_uri() . '/css/muj_styl.css', array(), '2.1', 'screen'); wp_enqueue_style('muj-styl'); } |
Přidáním akce wp_enqueue_scripts říkáme, že zdroje se mají objevit pouze ve frontendové části webu. Ještě bych dodal, že použití funkce wp_register_style je pouze volitelné. Tj. ve zkrácené formě by to mohlo být.
|
1 2 3 4 5 |
add_action('wp_enqueue_scripts', 'my_sources'); function my_sources() { wp_enqueue_script( "ajax-script", get_template_directory_uri() . '/js/my_js.js', array('jquery'), '2.1', false ); wp_enqueue_style('muj-styl', get_template_directory_uri() . '/css/muj_styl.css', array(), '2.1', 'screen'); } |
Napsat komentář