Funkce wp_enqueue_script

Funkce wp_enqueue_script vytváří odkaz na script, který jste již dříve zaregistrovali pomocí wp_register_script. Jedná se o jediný správný způsob, jak vkládat do šablony například jQuery, protože WordPress kontroluje zaregistrované scripty a nedochází tak k opakovanému načtení stejného scriptu.

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );

Parametry:

$handle – vyžadováno, obsahuje jméno scriptu, pod kterým je zaregistrován. Pokud jste tedy zaregistrovali script pod jménem „slider“, pod stejným jménem ho budete volat v této funkci.

$src – cesta ke scriptu. Povinná je pouze v tom případě, že jste ji již nedefinovali v wp_register_script. V žádném případě v cestě nepoužívejte pevné pojmenování url, ale v případě pluginu funkci plugins_url a v šabloně get_template_directory_uri.

$deps – pomocí tohoto parametru můžete ovlivnit řazení vkládaných scriptů a určit, který soubor se vkládá dříve. Použijte pouze, pokud jste jej nedefinovali v wp_register_sript.

$ver – zde můžete definovat verzi scriptu a defaultně je nastavena na false. V tom případě WordPress automaticky přidává do url verzi instalace WordPressu. Pokud chcete link bez uvedení verze, nastavte na null.

$in_footer – určuje, zda se bude script načítat v head, nebo footer. Pokud je true, načte se v patičce. Defaultně je false.

Několik příkladů z WordPress.org

Protože jsem na toto téma již článek napsal – Jak vložit javascript do šablony, uvedu jen příklady, které článek rozšiřují.

Vložení js souboru, který je již ve WordPressu vložen a zaregistrován:

function my_scripts_method() {
    wp_enqueue_script( 'scriptaculous' );
}
 
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

Akce wp_enqueue, kterou zde voláme, se vztahuje jen k frontendu. Pokud potřebujeme soubory vložit do administrace, musíme použít hook admin_enqueue_scripts.

Vložení scriptu v závislosti na jQuery

Řada vkládaných scriptů je závislá na některé z knihoven, jako je jQuery. Pokud použijeme parametr $deps, vloží se script pouze, pokud již bylo vloženo jQuery.

function my_scripts_method() {
	wp_enqueue_script(
		'custom-script',
		get_stylesheet_directory_uri() . '/js/custom_script.js',
		array( 'jquery' )
	);
}
 
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

Vložení scriptu do patičky bez závislosti na jiném souboru

add_action( 'wp_enqueue_scripts', 'child_add_scripts' );
 
function child_add_scripts() {
    wp_register_script(
        'google-analytics',
        get_stylesheet_directory_uri() . '/google_analytics_object.js',
        false,
        '1.0',
        true
    );
 
    wp_enqueue_script( 'google-analytics' );
}

Scripty, které WordPress již obsahuje a vkládá:

Při instalaci již WordPress obsahuje řadu scriptů, které využívá v administraci a pro funkce webu. Zde je seznam všech scriptů, které tak můžete použít ve svých šablonách a pluginech:

Jméno Handle Závislost
Image Cropper Image cropper
Jcrop jcrop
SWFObject swfobject
SWFUpload swfupload
SWFUpload Degrade swfupload-degrade
SWFUpload Queue swfupload-queue
SWFUploadHandlers swfupload-handlers
jQuery jquery json2 (for AJAX calls)
jQuery Form jquery-form jquery
jQuery Color jquery-color jquery
jQuery Masonry jquery-masonry jquery
jQuery UI Core jquery-ui-core jquery
jQuery UI Widget jquery-ui-widget jquery
jQuery UI Mouse jquery-ui-mouse jquery
jQuery UI Accordion jquery-ui-accordion jquery
jQuery UI Autocomplete jquery-ui-autocomplete jquery
jQuery UI Slider jquery-ui-slider jquery
jQuery UI Tabs jquery-ui-tabs jquery
jQuery UI Sortable jquery-ui-sortable jquery
jQuery UI Draggable jquery-ui-draggable jquery
jQuery UI Droppable jquery-ui-droppable jquery
jQuery UI Selectable jquery-ui-selectable jquery
jQuery UI Position jquery-ui-position jquery
jQuery UI Datepicker jquery-ui-datepicker jquery
jQuery UI Resizable jquery-ui-resizable jquery
jQuery UI Dialog jquery-ui-dialog jquery
jQuery UI Button jquery-ui-button jquery
jQuery UI Effects jquery-effects-core jquery
jQuery UI Effects – Blind jquery-effects-blind jquery-effects-core
jQuery UI Effects – Bounce jquery-effects-bounce jquery-effects-core
jQuery UI Effects – Clip jquery-effects-clip jquery-effects-core
jQuery UI Effects – Drop jquery-effects-drop jquery-effects-core
jQuery UI Effects – Explode jquery-effects-explode jquery-effects-core
jQuery UI Effects – Fade jquery-effects-fade jquery-effects-core
jQuery UI Effects – Fold jquery-effects-fold jquery-effects-core
jQuery UI Effects – Highlight jquery-effects-highlight jquery-effects-core
jQuery UI Effects – Pulsate jquery-effects-pulsate jquery-effects-core
jQuery UI Effects – Scale jquery-effects-scale jquery-effects-core
jQuery UI Effects – Shake jquery-effects-shake jquery-effects-core
jQuery UI Effects – Slide jquery-effects-slide jquery-effects-core
jQuery UI Effects – Transfer jquery-effects-transfer jquery-effects-core
MediaElement.js (WP 3.6+) wp-mediaelement jquery
jQuery Schedule schedule jquery
jQuery Suggest suggest jquery
ThickBox (modified) thickbox
jQuery HoverIntent hoverIntent jquery
jQuery Hotkeys jquery-hotkeys jquery
Simple AJAX Code-Kit sack
QuickTags quicktags
Iris (Colour picker) iris jquery
Farbtastic (deprecated) farbtastic jquery

ColorPicker (deprecated) colorpicker jquery
Tiny MCE tiny_mce
Autosave autosave
WordPress AJAX Response wp-ajax-response
List Manipulation wp-lists
WP Common common
WP Editor editorremov
WP Editor Functions editor-functions
AJAX Cat ajaxcat
Admin Categories admin-categories
Admin Tags admin-tags
Admin custom fields admin-custom-fields
Password Strength Meter password-strength-meter
Admin Comments admin-comments
Admin Users admin-users
Admin Forms admin-forms
XFN xfn
Upload upload
PostBox postbox
Slug slug
Post post
Page page
Link link
Comment comment
Threaded Comments comment-reply
Admin Gallery admin-gallery
Media Upload media-upload
Admin widgets admin-widgets
Word Count word-count
Theme Preview theme-preview
JSON for JS json2
Plupload Core plupload
Plupload All Runtimes plupload-all
Plupload HTML4 plupload-html4
Plupload HTML5 plupload-html5
Plupload Flash plupload-flash
Plupload Silverlight plupload-silverlight
Underscore js underscore
Backbone js backbone

Využití takových scriptů vám určitě usnadní práci na šablonách a můžete využívat řadu funkcí, které již WordPress v základu má.

About The Author

Zajímá mne Wordpress, responsivní šablony a zkrátka vše kolem tohoto skvělého redakčního systému.

Související články

3 Comments

  1. Pingback: Jak přeložit řetězce v javascriptových souborech | Musilda.cz

  2. Pingback: Jak použít ve WordPressu Font Awesome - Musilda.cz

  3. Pingback: Zobrazení obchodních podmínek v popup okně - Musilda.cz

Přidejte komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *