wp_enqueue_script() — подключение JavaScript

  2.6     wp-includes / functions.wp-scripts.php  /  Кодекс WordPress

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

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

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

Если хотите узнать больше про правильное подключение JS-файлов WordPress, то могу порекомендовать вам мой видеоурок.

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

Параметры функции wp_enqueue_script()

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

Пример 1 – подключение JS файла

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

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

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

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

Не знаете, куда вставлять код?

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

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

add_action( 'admin_enqueue_scripts', 'true_include_in_admin', 25 );
 
function true_include_in_admin() {
 	wp_enqueue_script( 'myscript', ... );
}

Пример 2 – подключение jQuery CDN

Иногда бывает, что вы хотите подключите какой-то скрипт с CDN, это даже не обязательно должен быть jQuery, в этом случае указываем полный URL файла.

add_action( 'wp_enqueue_scripts', 'true_jquery_cdn', 25 );
 
function true_jquery_cdn() {
 
	wp_deregister_script( 'jquery' );
	wp_enqueue_script( 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' );
 
}

Не знаете, куда вставлять код?

Пример 3 – как подключить JS к HTML

Небольшое отклонение от нашей темы и от функции wp_enqueue_script() – хочу показать вам именно способы подключения JS к HTML сайта в <head> или в футере при помощи тегов <script>.

Для подключения между тегами <head> и </head> мы будем использовать хук wp_head:

add_action( 'wp_head', 'truemisha_script_to_head', 25 );
 
function truemisha_script_to_head() {
 
	echo '<script>alert( \'Привет\' );</script>';
}

А для футера сайта соответственно используем хук wp_footer:

add_action( 'wp_footer', 'truemisha_script_to_footer', 25 );
 
function truemisha_script_to_footer() {
 
	echo '<script>alert( \'Привет\' );</script>';
}

Если хотите узнать больше про правильное подключение JS-файлов WordPress, то могу порекомендовать вам мой видеоурок.

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

Получается, что мы подключаем необходимый 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

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

wp_enqueue_script( 'jquery' );
ИдентификаторФайлЗависимости
jcrop/wp-includes/js/jcrop/jquery.Jcrop.min.js
swfobject/wp-includes/js/swfobject.js
swfupload/wp-includes/js/swfupload/swfupload.js
swfupload-queue/wp-includes/js/swfupload/plugins/swfupload.queue.js
swfupload-handlers/wp-includes/js/swfupload/handlers.min.js
jquery/wp-includes/js/jquery/jquery.jsjson2 (для AJAX запросов)
jquery-form/wp-includes/js/jquery/jquery.form.min.jsjquery
jquery-color/wp-includes/js/jquery/jquery.color.min.jsjquery
jquery-masonry/wp-includes/js/jquery/jquery.masonry.min.jsjquery
jquery-ui-core/wp-includes/js/jquery/ui/jquery.ui.core.min.jsjquery
jquery-ui-widget/wp-includes/js/jquery/ui/jquery.ui.widget.min.jsjquery
jquery-ui-mouse/wp-includes/js/jquery/ui/jquery.ui.mouse.min.jsjquery
jquery-ui-accordion/wp-includes/js/jquery/ui/jquery.ui.accordion.min.jsjquery
jquery-ui-autocomplete/wp-includes/js/jquery/ui/jquery.ui.autocomplete.min.jsjquery
jquery-ui-slider/wp-includes/js/jquery/ui/jquery.ui.slider.min.jsjquery
jquery-ui-tabs/wp-includes/js/jquery/ui/jquery.ui.tabs.min.jsjquery
jquery-ui-sortable/wp-includes/js/jquery/ui/jquery.ui.sortable.min.jsjquery
jquery-ui-draggable/wp-includes/js/jquery/ui/jquery.ui.draggable.min.jsjquery
jquery-ui-droppable/wp-includes/js/jquery/ui/jquery.ui.droppable.min.jsjquery
jquery-ui-selectable/wp-includes/js/jquery/ui/jquery.ui.selectable.min.jsjquery
jquery-ui-position/wp-includes/js/jquery/ui/jquery.ui.position.min.jsjquery
jquery-ui-datepicker/wp-includes/js/jquery/ui/jquery.ui.datepicker.min.jsjquery
jquery-ui-resizable/wp-includes/js/jquery/ui/jquery.ui.resizable.min.jsjquery
jquery-ui-dialog/wp-includes/js/jquery/ui/jquery.ui.dialog.min.jsjquery
jquery-ui-button/wp-includes/js/jquery/ui/jquery.ui.button.min.jsjquery
jquery-effects-core/wp-includes/js/jquery/ui/jquery.ui.effect.min.jsjquery
jquery-effects-blind/wp-includes/js/jquery/ui/jquery.ui.effect-blind.min.jsjquery-effects-core
jquery-effects-bounce/wp-includes/js/jquery/ui/jquery.ui.effect-bounce.min.jsjquery-effects-core
jquery-effects-clip/wp-includes/js/jquery/ui/jquery.ui.effect-clip.min.jsjquery-effects-core
jquery-effects-drop/wp-includes/js/jquery/ui/jquery.ui.effect-drop.min.jsjquery-effects-core
jquery-effects-explode/wp-includes/js/jquery/ui/jquery.ui.effect-explode.min.jsjquery-effects-core
jquery-effects-fade/wp-includes/js/jquery/ui/jquery.ui.effect-fade.min.jsjquery-effects-core
jquery-effects-fold/wp-includes/js/jquery/ui/jquery.ui.effect-fold.min.jsjquery-effects-core
jquery-effects-highlight/wp-includes/js/jquery/ui/jquery.ui.effect-highlight.min.jsjquery-effects-core
jquery-effects-pulsate/wp-includes/js/jquery/ui/jquery.ui.effect-pulsate.min.jsjquery-effects-core
jquery-effects-scale/wp-includes/js/jquery/ui/jquery.ui.effect-scale.min.jsjquery-effects-core
jquery-effects-shake/wp-includes/js/jquery/ui/jquery.ui.effect-shake.min.jsjquery-effects-core
jquery-effects-slide/wp-includes/js/jquery/ui/jquery.ui.effect-slide.min.jsjquery-effects-core
jquery-effects-transfer/wp-includes/js/jquery/ui/jquery.ui.effect-transfer.min.jsjquery-effects-core
schedule/wp-includes/js/jquery/jquery.schedule.jsjquery
suggest/wp-includes/js/jquery/suggest.min.jsjquery
thickbox/wp-includes/js/thickbox/thickbox.js
jquery-hotkeys/wp-includes/js/jquery/jquery.hotkeys.min.jsjquery
sack/wp-includes/js/tw-sack.min.js
quicktags/wp-includes/js/quicktags.min.js
autosave/wp-includes/js/autosave.min.js
wp-ajax-response/wp-includes/js/wp-ajax-response.min.js
wp-lists/wp-includes/js/wp-lists.min.js
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
json2/wp-includes/js/json2.min.js
plupload/wp-includes/js/plupload/plupload.js
underscore/wp-includes/js/underscore.min.js
backbone/wp-includes/js/backbone.min.js
Кодекс WordPress: Подключение CSS и JavaScript: wp_dequeue_script(), wp_dequeue_style(), wp_deregister_script(), wp_deregister_style(), wp_enqueue_media(), wp_enqueue_script(), wp_enqueue_style(), wp_localize_script(), wp_register_script(), wp_register_style(), wp_script_is(), wp_style_is()

Миша

Недавно я осознал, что моя миссия – способствовать распространению WordPress. Ведь WordPress – это лучший движок для разработки сайтов – как для тех, кто готов использовать заложенную структуру этой CMS, так и для тех, кто предпочитает headless решения.

Сам же я впервые познакомился с WordPress в 2009 году. Организатор WordCamp. Преподаватель в школах Epic Skills и LoftSchool.

Если вам нужна помощь с вашим сайтом или может даже разработка с нуля на WordPress / WooCommerce — пишите. Я и моя команда сделаем вам всё на лучшем уровне.

Комментарии — 33

Оставить комментарий

× Отменить ответ

Если вы хотите добавить код, не забудьте обернуть его в <pre lang="php"></pre>, если же код – меньше одной строчки, то можно и в <code></code>.