Wp_enqueue_script() - функция WordPress

Опубликовано: 01.09.2018

Рекомендуемый метод подключения файлов JavaScript в WordPress. Имеет ряд особенностей:

скрипты вставляются на страницы сайта через функции wp_head() и wp_footer() , в админке же скрипты объединяются в один с помощью PHP-обработчика load-scripts.php, позволяет подключать скрипты с учетом их зависимостей друг от друга;

То есть нужный вам js-файл не будет вставляться в HTML сразу же, как только вы использовали функцию, т.к. функция всего лишь помещает файл в очередь для вывода.

wp_enqueue_script ( $handle , $src = false , $deps = array ( ) , $ver = false , $in_footer = false )

$handle (строка) какое-нибудь название (идентификатор), придуманное вами (строка в нижнем регистре), либо можно подключить уже зарегистрированные (через wp_register_script() ) ранее скрипты, используя их идентификаторы $src (строка) абсолютный URL файла JavaScript, который требуется подключить, этот параметр (и все последующие тоже) нужен только для незарегистрированных скриптов $deps (массив) массив идентификаторов скриптов, от которых зависит подключаемый скрипт $ver (строка) версия файла. Если установить значение null, то версия не будет указываться. По умолчанию — текущая версия WordPress. $in_footer (логическое) по умолчанию файлы JavaScript подключаются внутри тегов <head>. Если же указать данный параметр равным true, тогда скрипт будет вставлен непосредственно перед закрывающим тегом </body>.

Примеры подключения на страницах сайта

Конечно, вы можете просто засунуть это функцию в functions.php, но тогда скрипт будет вставляться не только на страницах вашего сайта, но и в админке, а это может привести к некоторым багам.

Use WP Enqueue Script To Properly Add Javascript Files To WordPress

Для вставки скриптов во фронтэнде (т.е. не в админке), используйте хук wp_enqueue_scripts, пример:

function true_include_myscript ( ) { wp_enqueue_script ( 'myscript' , get_stylesheet_directory_uri ( ) . '/script.js' , '' , '3.0' , false ) ; } add_action ( 'wp_enqueue_scripts' , 'true_include_myscript' ) ;

Тот же самый пример, но только с зависимостью от jQuery:

Mastering WordPress in Arabic #041 - WP Enqueue Script Function

function true_include_myscript_dep_jquery ( ) { wp_enqueue_script ( 'myscript' , get_stylesheet_directory_uri ( ) . '/script.js' , array ( 'jquery' ) ) ; } add_action ( 'wp_enqueue_scripts' , 'true_include_myscript_dep_jquery' ) ;

Или подключим уже зарегистрированный ранее jQuery:

function true_include_jquery ( ) { wp_enqueue_script ( 'jquery' ) ; } add_action ( 'wp_enqueue_scripts' , 'true_include_jquery' ) ;

Пример подключения в админке

Для подключения скриптов только в бэкэнде, т.е. только в админке, используйте хук admin_enqueue_scripts, например:

function true_include_in_admin ( ) { wp_enqueue_script ( 'jquery' ) ; } add_action ( 'admin_enqueue_scripts' , 'true_include_in_admin' ) ;

Подключение скрипта только на странице настроек конкретного плагина

Получается, что мы подключаем необходимый JavaScript файл только там, где нужно — это же здорово!

add_action ( 'admin_init' , 'true_plugin_admin_init' ) ; add_action ( 'admin_menu' , 'true_plugin_admin_menu' ) ; function true_plugin_admin_init ( ) { /* * Регистрируем скрипт, * он кстати должен находиться той же папке, что и файл, в который будет вставлен этот код. */ wp_register_script ( 'myscript' , plugins_url ( '/myscript.js' , __FILE__ ) ) ; } function true_plugin_admin_menu ( ) { /* * Добавляем субменю настроек плагина в Параметры. */ $page_hook_suffix = add_submenu_page ( 'options-general.php' , 'Мой плагин' , 'Настройки моего плагина' , 'manage_options' , 'true-plugin' , 'true_plugin_print_page' ) ; /* * Нетрудно догадаться, что вся фишка кроется в переменной $page_hook_suffix */ add_action ( 'admin_print_scripts-' . $page_hook_suffix , 'true_plugin_admin_scripts' ) ; } function true_plugin_admin_scripts ( ) { /* * Подключаем наш уже зарегистрированный ранее скрипт. */ wp_enqueue_script ( 'myscript' ) ; } function true_plugin_print_page ( ) { /* * Cодержимое страницы настроек. */ echo 'Привет' ; }

Таблица стандартных скриптов в WordPress

Все скрипты, перечисленные в этой таблице, регистрировать не нужно, достаточно указать их идентификатор при подключении, например: wp_enqueue_script('идентификатор').

Название скрипта Идентификатор Расположение файла Зависимости

Jcrop	jcrop	/wp-includes/js/jcrop/jquery.Jcrop.min.js
SWFObject	swfobject	/wp-includes/js/swfobject.js
SWFUpload	swfupload	/wp-includes/js/swfupload/swfupload.js
SWFUpload Queue	swfupload-queue	/wp-includes/js/swfupload/plugins/swfupload.queue.js
SWFUpload Handlers	swfupload-handlers	/wp-includes/js/swfupload/handlers.min.js
jQuery	jquery	/wp-includes/js/jquery/jquery.js	json2 (для AJAX запросов)
jQuery Form	jquery-form	/wp-includes/js/jquery/jquery.form.min.js	jquery
jQuery Color	jquery-color	/wp-includes/js/jquery/jquery.color.min.js	jquery
jQuery Masonry	jquery-masonry	/wp-includes/js/jquery/jquery.masonry.min.js	jquery
jQuery UI Core	jquery-ui-core	/wp-includes/js/jquery/ui/jquery.ui.core.min.js	jquery
jQuery UI Widget	jquery-ui-widget	/wp-includes/js/jquery/ui/jquery.ui.widget.min.js	jquery
jQuery UI Mouse	jquery-ui-mouse	/wp-includes/js/jquery/ui/jquery.ui.mouse.min.js	jquery
jQuery UI Accordion	jquery-ui-accordion	/wp-includes/js/jquery/ui/jquery.ui.accordion.min.js	jquery
jQuery UI Autocomplete	jquery-ui-autocomplete	/wp-includes/js/jquery/ui/jquery.ui.autocomplete.min.js	jquery
jQuery UI Slider	jquery-ui-slider	/wp-includes/js/jquery/ui/jquery.ui.slider.min.js	jquery
jQuery UI Tabs	jquery-ui-tabs	/wp-includes/js/jquery/ui/jquery.ui.tabs.min.js	jquery
jQuery UI Sortable	jquery-ui-sortable	/wp-includes/js/jquery/ui/jquery.ui.sortable.min.js	jquery
jQuery UI Draggable	jquery-ui-draggable	/wp-includes/js/jquery/ui/jquery.ui.draggable.min.js	jquery
jQuery UI Droppable	jquery-ui-droppable	/wp-includes/js/jquery/ui/jquery.ui.droppable.min.js	jquery
jQuery UI Selectable	jquery-ui-selectable	/wp-includes/js/jquery/ui/jquery.ui.selectable.min.js	jquery
jQuery UI Position	jquery-ui-position	/wp-includes/js/jquery/ui/jquery.ui.position.min.js	jquery
jQuery UI Datepicker	jquery-ui-datepicker	/wp-includes/js/jquery/ui/jquery.ui.datepicker.min.js	jquery
jQuery UI Resizable	jquery-ui-resizable	/wp-includes/js/jquery/ui/jquery.ui.resizable.min.js	jquery
jQuery UI Dialog	jquery-ui-dialog	/wp-includes/js/jquery/ui/jquery.ui.dialog.min.js	jquery
jQuery UI Button	jquery-ui-button	/wp-includes/js/jquery/ui/jquery.ui.button.min.js	jquery
jQuery UI Effects	jquery-effects-core	/wp-includes/js/jquery/ui/jquery.ui.effect.min.js	jquery
jQuery UI Effects — Blind	jquery-effects-blind	/wp-includes/js/jquery/ui/jquery.ui.effect-blind.min.js	jquery-effects-core
jQuery UI Effects — Bounce	jquery-effects-bounce	/wp-includes/js/jquery/ui/jquery.ui.effect-bounce.min.js	jquery-effects-core
jQuery UI Effects — Clip	jquery-effects-clip	/wp-includes/js/jquery/ui/jquery.ui.effect-clip.min.js	jquery-effects-core
jQuery UI Effects — Drop	jquery-effects-drop	/wp-includes/js/jquery/ui/jquery.ui.effect-drop.min.js	jquery-effects-core
jQuery UI Effects — Explode	jquery-effects-explode	/wp-includes/js/jquery/ui/jquery.ui.effect-explode.min.js	jquery-effects-core
jQuery UI Effects — Fade	jquery-effects-fade	/wp-includes/js/jquery/ui/jquery.ui.effect-fade.min.js	jquery-effects-core
jQuery UI Effects — Fold	jquery-effects-fold	/wp-includes/js/jquery/ui/jquery.ui.effect-fold.min.js	jquery-effects-core
jQuery UI Effects — Highlight	jquery-effects-highlight	/wp-includes/js/jquery/ui/jquery.ui.effect-highlight.min.js	jquery-effects-core
jQuery UI Effects — Pulsate	jquery-effects-pulsate	/wp-includes/js/jquery/ui/jquery.ui.effect-pulsate.min.js	jquery-effects-core
jQuery UI Effects — Scale	jquery-effects-scale	/wp-includes/js/jquery/ui/jquery.ui.effect-scale.min.js	jquery-effects-core
jQuery UI Effects — Shake	jquery-effects-shake	/wp-includes/js/jquery/ui/jquery.ui.effect-shake.min.js	jquery-effects-core
jQuery UI Effects — Slide	jquery-effects-slide	/wp-includes/js/jquery/ui/jquery.ui.effect-slide.min.js	jquery-effects-core
jQuery UI Effects — Transfer	jquery-effects-transfer	/wp-includes/js/jquery/ui/jquery.ui.effect-transfer.min.js	jquery-effects-core
jQuery Schedule	schedule	/wp-includes/js/jquery/jquery.schedule.js	jquery
jQuery Suggest	suggest	/wp-includes/js/jquery/suggest.min.js	jquery
ThickBox	thickbox	/wp-includes/js/thickbox/thickbox.js
jQuery Hotkeys	jquery-hotkeys	/wp-includes/js/jquery/jquery.hotkeys.min.js	jquery
Simple AJAX Code-Kit	sack	/wp-includes/js/tw-sack.min.js
QuickTags	quicktags	/wp-includes/js/quicktags.min.js
Autosave	autosave	/wp-includes/js/autosave.min.js
WordPress AJAX Response	wp-ajax-response	/wp-includes/js/wp-ajax-response.min.js
List Manipulation	wp-lists	/wp-includes/js/wp-lists.min.js
WP Common	common	/wp-admin/js/common.min.js
Индикатор сложности пароля	password-strength-meter	/wp-admin/js/password-strength-meter.min.js
Древовидные комментарии	comment-reply	/wp-includes/js/comment-reply.min.js
Медиазагрузчик	media-upload	/wp-admin/js/media-upload.min.js
Счетчик слов	word-count	/wp-admin/js/word-count.min.js
JSON for JS	json2	/wp-includes/js/json2.min.js
Plupload	plupload	/wp-includes/js/plupload/plupload.js
Underscore js	underscore	/wp-includes/js/underscore.min.js
Backbone js	backbone	/wp-includes/js/backbone.min.js