wp_enqueue_script() — подключение JavaScript - Блог про веб-разработку, SEO и маркетинг

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

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

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>';
}

Пример 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' );

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