V systému WordPress byste místo prostého přidání do záhlaví měli použít metodu zvanou enqueueing, což je standardizovaný způsob nakládání s aktivy s bonusem v podobě správy závislostí. Jak to udělat, se dozvíte níže pomocí wp_enqueue_scripts.

• Jak funguje enqueueing
• Základy enqueueingu pomocí wp_enqueue_scripts
• Správa závislostí
• Základní načítání skriptů v Zápatí
• Určení médií pro styly

Jak funguje enqueueing

Při enqueueingu skriptu nebo stylu se provádí dva kroky. Nejprve ho zaregistrujete – řeknete WordPressu, že tam je – a pak ho skutečně enqueueujete, čímž se nakonec vypíše do hlavičky nebo těsně před uzavírací značku těla.

Důvodem dvou kroků je modularita. Někdy budete chtít dát WordPressu vědět o nějakém prostředku, ale možná ho nebudete chtít použít na každé stránce. Například: Pokud vytváříte vlastní zkrácený kód galerie, který používá Javascript, musíte JS skutečně načíst pouze při použití zkráceného kódu – pravděpodobně ne na každé stránce.

Způsob, jak toho docílit, je skript nejprve zaregistrovat a skutečně jej enqueueovat až při zobrazení zkratky (doporučená četba: The Ultimate Guide to WordPress Shortcodes).

Základy enqueueingu pomocí wp_enqueue_scripts

Chcete-li enqueueovat skripty a styly ve front-endu, musíte použít háček wp_enqueue_scripts. V rámci funkce s háčkem můžete použít funkce wp_register_script(), wp_enqueue_script(), wp_register_style() a wp_enqueue_style().

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );function my_plugin_assets() { wp_register_style( 'custom-gallery', plugins_url( '/css/gallery.css' , __FILE__ ) ); wp_register_script( 'custom-gallery', plugins_url( '/js/gallery.js' , __FILE__ ) ); wp_enqueue_style( 'custom-gallery' ); wp_enqueue_script( 'custom-gallery' );}

V příkladu výše jsem zaregistroval a enqueuoval aktiva v rámci stejné funkce, což je trochu zbytečné. Ve skutečnosti můžete k registraci a enqueue použít rovnou funkce enqueue, a to tak, že použijete stejné argumenty jako ve funkcích register:

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );function my_plugin_assets() { wp_enqueue_style( 'custom-gallery', plugins_url( '/css/gallery.css' , __FILE__ ) ); wp_enqueue_script( 'custom-gallery', plugins_url( '/js/gallery.js' , __FILE__ ) );}

Pokud bych měl tyto dvě funkce oddělit, udělal bych to tak, že bych je použil v různých háčcích. V reálném příkladu bychom mohli použít háček wp_enqueue_scripts pro registraci aktiv a funkci zkratky pro jejich enqueue.

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );function my_plugin_assets() { wp_register_style( 'custom-gallery', plugins_url( '/css/gallery.css' , __FILE__ ) ); wp_register_script( 'custom-gallery', plugins_url( '/js/gallery.js' , __FILE__ ) );}add_shortcode( 'custom_gallery', 'custom_gallery' );function custom_gallery( $atts ){ wp_enqueue_style( 'custom-gallery' ); wp_enqueue_script( 'custom-gallery' ); // Gallery code here}

Správa závislostí

Mechanismus enqueueing ve WordPressu má zabudovanou podporu pro správu závislostí, a to pomocí třetího argumentu funkcí wp_register_style() i wp_register_script(). Pokud nepotřebujete funkce enqueuing od sebe oddělovat, můžete je rovnou použít.

Třetím parametrem je pole registrovaných skriptů/stylů, které je třeba načíst před enqueuingem aktuálního aktiva. Náš výše uvedený příklad bude s největší pravděpodobností spoléhat na jQuery, takže jej nyní zadáme:

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );function my_plugin_assets() { wp_enqueue_script( 'custom-gallery', plugins_url( '/js/gallery.js' , __FILE__ ), array( 'jquery' ) );}

Nepotřebujeme jQuery sami registrovat ani enqueueovat, protože je již součástí WordPressu. Seznam skriptů a stylů dostupných ve WordPressu najdete v Codexu.

Pokud máte vlastní závislosti, musíte je zaregistrovat, jinak se vám skripty nenačtou. Zde je příklad:

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );function my_plugin_assets() { wp_enqueue_script( 'custom-gallery', plugins_url( '/js/gallery.js' , __FILE__ ), array( 'jquery' ) ); wp_enqueue_script( 'custom-gallery-lightbox', plugins_url( '/js/gallery-lightbox.js' , __FILE__ ), array( 'custom-gallery' ) );}

Předpokládejme, že první skript je galerie, druhý je její rozšíření, díky kterému se obrázky otevírají v lightboxu. Všimněte si, že i když náš druhý skript spoléhá na jQuery, nemusíme to uvádět, protože náš první skript již jQuery načte. Přesto může být dobré uvést všechny závislosti, abyste měli jistotu, že se nic nerozbije, pokud nějakou závislost zapomenete uvést.

WordPress nyní ví, které skripty potřebujeme, a může vypočítat, v jakém pořadí je třeba je na stránku přidat.

Načítání skriptů v patičce

Kdykoli se můžete obejít bez načítání skriptů v patičce, měli byste. Zvyšuje to zdánlivou dobu načítání stránky a může to zabránit tomu, aby se vaše stránka při načítání skriptů zasekla, zejména pokud obsahují volání AJAX.

Skripty lze do zápatí přidat pomocí pátého parametru (čtvrtým je volitelné číslo verze). Náš výše uvedený příklad by načítal skripty do patičky, pokud jej mírně upravíme.

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );function my_plugin_assets() { wp_enqueue_script( 'custom-gallery', plugins_url( '/js/gallery.js' , __FILE__ ), array( 'jquery' ), '1.0', true ); wp_enqueue_script( 'custom-gallery-lightbox', plugins_url( '/js/gallery-lightbox.js' , __FILE__ ), array( 'custom-gallery', 'jquery' ), '1.0', true );}

Zadáním true jako pátého parametru se skripty umístí do patičky, použitím false nebo vynecháním parametru se věci načtou do záhlaví. Jak jsem se již zmínil, kdykoli je to možné, načítejte skripty do zápatí.

Zadávání médií pro styly

Pomocí pátého parametru funkcí registru/enqueue stylů můžete řídit typ média, pro který byl skript definován (tisk, obrazovka, handheld atd.). Pomocí tohoto parametru můžete omezit načítání stylů na konkrétní typ média, což je malý šikovný optimalizační trik.

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );function my_plugin_assets() { wp_register_style( 'custom-gallery-print', plugins_url( '/css/gallery.css' , __FILE__ ), array(), '1.0', 'print' );}

Úplný seznam typů médií, které lze použít, najdete ve specifikacích CSS.

Shrnutí

Enqueueing assets je výkonný způsob manipulace s nimi. Vám i ostatním tvůrcům zásuvných modulů/témat dává větší kontrolu nad celým systémem a zbavuje vás správy závislostí.

Pokud by vám to nestačilo, je to způsob, jak přidávat aktiva, mnoho tržišť s tématy a samotné úložiště WordPressu vaši práci neschválí, pokud tento způsob nepoužijete.

.