WordPress – tvorba šablony od A do Z – 15.díl – Loadování scriptů a css stylů


Dnešní díl bych pojal spíše trochu jako doporučení a ukázku toho, jak by se ve WordPressu měly správně přidávat scripty a styly do hlavičky webových stránek. Všichni zajisté známe běžný html tag, který do hlavičky vložíme a máme vymalováno. Ale pozor, protože WordPress má velkou podporu pluginů a velká část uživatelů je hojně využívá, může se následně stát, že některé scripty budete volat s určitým pluginem dvakrát. To může vyvolat chyby a některé prvky zcela „zlikvidovat“. I na to vývojáři WordPressu myslí a připravili proto velmi jednoduchý ale efektní nástroj.

Je jen škoda, že většina tvůrců šablon ho nezná a své scripty zapisují natvrdo do hlaviček webových stránek!!

Jak tedy správně na loadování scriptů ?

Jediná a správná cesta jak do hlavičky bezpečně přidat nějaký javascript, je funkce od WordPressu, která se jmenuje – wp_enqueue_script(). Tato funkce nám umožní nahrání „nového“ scriptu, který bude následně použit v hlavičce webových stránek. Parametry funkce vypadají takto:

  • $handle – Zde se jedná o stringový název scriptů, podle kterého se bude script identifikovat.
  • $src – Uvedené url scriptu u Vás na serveru nebo externího zdroje.
  • $deps – Parametr typu array, kde specifikujete sadu dalších scriptů, které jsou třeba nahrát předem, aby Vše fungovalo.
  • $ver – Může být uvedena i verze scriptů.
  • $in_footer – True / False : Můžete uvést, zda Váš script má být umístě do hlavičky nebo patičky. Vhodné pro nedůležité scripty.

Důležité je vědět, že WordPress má velkou sadu scriptů již registrovaných a má vlastní implementaci. Zde doporučuji sadu scriptů maximálně využívat. Přehled scriptů můžete najít na WordPress codexu.

Volání implementovaných scriptů z WordPressu


<?php

wp_enqueue_script('jquery');
wp_enqueue_script('jquery-ui', '', 'jquery');

?>

Další poměrně důležitou funkcí, je obdobně pojmenovaná wp_register_script(), která má totožné parametry jako funkce předchozí. Je v ní ale ten rozdíl, že wp_register_script() automaticky nevkládá script do hlavičky, ale pouze zaregistruje $handle scriptu, který pak uživatel nebo případný vývojář po Vás může použít a v dalších souborech a volat pouze wp_enqueue_script(‚Váš handle‘). Já to většinou dělám tak, že v případě, že budu script použít pouze na jednou místě ve všech templatech stránky, používám wp_enqueue_script(). Pokud potřebuji script vkládat do hlavičky dle potřeby, napřed si ho zaregistruji a dle nějakých podmínek pak volám wp_enqueue_script().

Jak by tedy vypadal taková implementace scriptů?


<?php

add_action( 'wp_enqueue_scripts', 'kt_core_wp_scripts' );

function kt_core_wp_scripts() {

	wp_enqueue_style( 'kt_jquery_ui', 'http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css' );
	wp_enqueue_style( 'kt_core', path_join( KT_CORE_CSS_URL, "kt-core.css" ) );
	wp_enqueue_style( 'kt_magnific_popup', path_join( KT_CORE_CSS_URL, "magnific-popup.css" ) );

	wp_enqueue_script( 'kt_core', path_join( KT_CORE_JS_URL, "kt-core.js" ), array(
		'jquery',
		'jquery-ui-datepicker',
		'jquery-ui-tooltip'
	) );

	wp_enqueue_script( 'kt_jquery_magnific_popup', path_join( KT_CORE_JS_URL, "jquery.magnific-popup.min.js" ) );
	wp_enqueue_script( 'kt_magnific_popup', path_join( KT_CORE_JS_URL, "kt-magnific-popup.js" ) );
}

?>

Přiloženým kódem říkám, že při vykreslování front-endu (wp_enqueue_scripts hooka je pouze pro front-end) se zavolá má funkce kt_core_wp_sripts(), kde se do hlavičky webové stránky vloží tři styly a tři js soubory. S tím, že script „kt_core“ bude vynucovat vložení ještě jquery, jquery-ui-datapickeru a jquery-ui-tooltip. Ty již registrovat nemusím a stačí mi použít pouze handle scriptu, protože je má již WordPress implementované v sobě. Také jsem nepoužil funkci wp_register_script(), protože všechny soubory budou na každé podstránce mé šablony.

Jak dodat js nebo css do adminu WordPressu?

Je to velmi jednoduché, vytvoříme si obdobnou funkci, ale použijeme pouze jinou hooku. Na místu add_action(‚wp_enqueue_scripts‘, ‚ma_funkce‘) použijeme trochu jinou hooku a to add_action(‚admin_enqueue_scripts‘, ‚ma_funkce‘). Tím dostaneme naše potřebné soubory do hlavičky administrace.

Pro práci s těmito scripti je třeba mít v hlavičce front-endu zapsanou funkci wp_head(), kterou WordPress velmi hojně používá.

Závěrem

Možná některé z Vás napadne, proč něco takového vůbec dělat? Registrací vlastních scriptů stejně nezamezím tomu, že vznikne nějaká kolize. Ano, to máte pravdu, pokud jsou špatně napsané scripty, ke kolizi může dojit stejně. Tuto metodu jsem Vám chtěl hlavně ukázat z toho důvodu, aby se běžně dostupné scripty ve WordPressu používali takto a ne napevno zapsaným stringem v header.php. Pokud budeme mít 10 pluginů, které budou chtít využívat jQuery, v případně napevno zapsaného stringu se nám stane, že budeme mít Xkrát nahraný js soubor a možná i s jinou verzí. Proto autoři WordPressu připravili toto řešení a mi bychom ho měli používat.

Jsem také přesvědčen, že ve chvíli, kdy začnete vytvářet složité šablony nebo vlastní pluginy, velmi oceníte, že si script jednou zaregistrujete a pak jen voláte dle potřeby. A hlavně, při tvorbě pluginů to už ani jinak nejde. Mohli byste velmi jednoduše někomu „zbořit“ jeho plugin nebo jiné řešení.

Tomáš Kocifaj, KTStudio.cz

, , ,

  1. #1 honza 28.8.2013 - 21:47

    Dobrý den,
    uvedenou funkci „kt_core_wp_scripts“ i s add_action jsem zkopíroval do functions.php, ale do html hlavičky se mi žádné js ani css linky nepřidali. Je třeba ještě nějaké dodatečné volání nějaké funkce v header.php? Neporadil byste prosím.
    Díky

  2. #2 Tomáš Kocifaj 29.8.2013 - 06:08

    Zdravím Vás Honzo, mezi tagy je třeba mít zapsanou funkci wp_header(). Do dílu jsem tuto informaci už také doplnil.

  3. #3 Vita 1.4.2014 - 21:22

    Funguje dobře, jen je třeba KT-CORE-JS-URL a CSS nahradit vlastni adresou :) jen takový poznatek ;) wp_head() jsem vložil za fci kt_core_wp_scripts(). Já to sice celé vložil do header.php ale elegantnější to asi bude tahat z functions.php

  4. #4 Michal 17.4.2014 - 10:26

    Ahoj, chci se zeptat, jak by vypadat funkce, pokuď bych chtěl používat pluginy z wordpressu. Tak aby korektně fungovaly. Děkuji moc za odpověď.

    • #5 Tomáš Kocifaj 26.4.2014 - 06:00

      Zdravím tě Michale, nejsem si úplně jistý tvou otázkou. Funkce je funkce a funguje vždy tak, jak jí napíšeš. Pokud jsou funkce v pluginu, funguje stejně jako jiné php funkce – jde jen o to, aby byl plugin aktivován a tím pádem byla fnc inicializovaná.

  5. #6 Radovan 11.10.2014 - 17:39

    Jen takova drobnost, ale chvilku jsem s ni ztratil. U jQuery nelze pouzivat $. Je treba pouzivat jQuery.

    • #7 Tomáš Kocifaj 13.10.2014 - 06:22

      Zdravím, jQuery se dá používat se znakem dolar, ale je třeba to vyřešit nekonfliktní metodou. Ale i my pro jistotu používáme jQuery – nikdy člověk neví, co vám to kdo hodím pluginem. Díky ale za postřeh.

Komentáře jsou uzavřeny.