wp_enqueue_script

Правильно подключает скрипт (JavaScript файл) на страницу.

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

wp_enqueue_script() добавляет скрипт, только если он еще не был добавлен и другие скрипты от которых он зависит зарегистрированы. Зависимые скрипты добавляются автоматически.

Если скрипт уже зарегистрирован с помощью wp_register_script(), то для его подключения в wp_enqueue_script() нужно указать только ярлык скрипта (в первом параметре).

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

Шаблон использования

//add_action( 'admin_enqueue_scripts', 'my_scripts_method' );
//add_action( 'login_enqueue_scripts', 'my_scripts_method' );
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
function my_scripts_method(){
	wp_enqueue_script( 'newscript', get_template_directory_uri() . '/js/custom_script.js');
}


Параметры

$handle(строка) (обязательный)

Название скрипта (рабочее название). Строка в нижнем регистре.

Если строка содержит знак вопроса (?): scriptaculous&v=1.2, то предшествующая часть будет названием скрипта, а все что после будет добавлено в УРЛ как параметры запроса. Так можно указывать версию подключаемого скрипта.

$src(строка)

УРЛ файла скрипта. Например: http://example.com/wp-content/themes/my-theme/my-theme-script.js. Не нужно писать УРЛ жестко, он должен определяться динамически. Для этого используйте функции получения УРЛов: plugins_url() (для плагинов) и get_template_directory_uri() (для тем).
Ссылки на внешние скрипты можно указывать без указания протокола: //otherdomain.com/js/their-script.js. Этот параметр необходим только, когда скрипт не зарегистрирован и WordPress еще не знает об этом скрипте, смотрите функцию wp_register_script().

Уже зарегистрированные в WP скрипты вы найдете ниже в этой статье.

По умолчанию: false

$deps(массив)
Массив названий скриптов от которых зависит этот скрипт; скрипты которые должны быть загружены перед этим скриптом. Этот параметр необходим только в случае, если WordPress еще не знает об этом скрипте.
По умолчанию: array()
$ver(строка)

Строка указывающая версию скрипта, если она у него есть. Этот параметр используется для того чтобы удостовериться, что клиент получил верную версию скрипта, а не из кеша.

Если параметр не указан, то в качестве версии скрипта будет использована версия WordPress. Если указать null, то никакая версия не будет добавлена.
По умолчанию: false

$in_footer(логический)

Подключить скрипт в подвал?

Обычно скрипт подключается в <head> документа, если указать true, то скрипт будет подключен перед тегом </body>, точнее там где вызывается тег шаблона wp_footer().

Если из-за зависимости от других скриптов нет возможности подключить текущий скрипт в подвале, то значение этой переменой будет проигнарировано.

Для понятного чтения кода, вместо true можно указать любую строку, например ‘in_footer’.

По умолчанию: false

к началу

Примеры

#1 Загружаем базовый скрипт WordPress с нестандартного адреса.

Допустим, вы хотите вместо библиотеки jQuery из состава WordPress подключить её CDN-копию. Добавьте этот код в файл functions.php активной темы:

function my_scripts_method() {
	wp_deregister_script( 'jquery' );
	wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js');
	wp_enqueue_script( 'jquery' );
}    

add_action( 'wp_enqueue_scripts', 'my_scripts_method', 11 );

Используя фильтр wp_enqueue_scripts (вместо фильтра init, на который ссылаются некоторые статьи на сторонних сайтах), мы избегаем регистрации альтернативной версии jQuery на страницах панели управления, что (среди прочего) снижает риск нарушения работы редактора записей при обновлении.

#2 Загружаем штатный скрипт scriptaculous.

function my_scripts_method() {
	wp_enqueue_script( 'scriptaculous' );            
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' ); // На внешней части сайта (в теме оформления)

#3 Регистрируем и подключаем свой скрипт, зависящий от jQuery

Зарегистрируем и добавим новый скрипт, который зависит от jquery (это также вызовет загрузку jquery на странице):

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
function my_scripts_method() {
	$script_url = plugins_url( '/js/newscript.js', __FILE__ );
	wp_enqueue_script('custom-script', $script_url, array('jquery') );
}

#4 Подгружаем скрипт только для нужных типов страниц

Допустим нам нужно использовать условные теги, чтобы подгрузить свой скрипт scriptaculous. Тогда мы может подключиться на хук wp, в момент его срабатывания мы уже можем использовать условные теги, поэтому через него мы можем определить для каких типов страниц подключить скрипт, а для каких нет:

add_action('wp', 'add_my_script_where_it_necessery');
function add_my_script_where_it_necessery(){
	if( is_single() )
		add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
}
function my_scripts_method() {
	$script_url = plugins_url( '/js/newscript.js', __FILE__ );
	wp_enqueue_script('newscript', $script_url, array('scriptaculous') );
}

#5 Загружаем в теме оформления скрипт, зависящий от скрипта в WordPress

Часто требуется, чтобы перед JavaScript-файлами, поставляемыми с темой оформления, был загружен другой JavaScript-файл. WordPress предоставляет API, позволяющий при регистрации скрипта указать его зависимости. Например, тема с приведённым ниже кодом требует, чтобы перед скриптом custom_script.js была загружена библиотека jQuery:

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

#6 Загружаем скрипты плагина только на его страницах

add_action( 'admin_init', 'my_plugin_admin_init' );
	add_action( 'admin_menu', 'my_plugin_admin_menu' );

	function my_plugin_admin_init() {
		/* Регистрируем наш скрипт. */
		wp_register_script( 'my-plugin-script', plugins_url('/script.js', __FILE__) );
	}

	function my_plugin_admin_menu() {
		/* Регистрируем страницу нашего плагина */
		$page = add_submenu_page( 'edit.php', // Родительская страница меню
								  __( 'Мой плагин', 'myPlugin' ), // Название пункта меню
								  __( 'Мой плагин', 'myPlugin' ), // Заголовок страницы
								  'manage_options', // Возможность, определяющая уровень доступа к пункту
								  'my_plugin-options', // Ярлык (часть адреса) страницы плагина
								  'my_plugin_manage_menu' // Функция, которая выводит страницу
							   );

		/* Используем зарегистрированную страницу для загрузки скрипта */
		add_action( 'admin_print_scripts-' . $page, 'my_plugin_admin_scripts' );
	}

	function my_plugin_admin_scripts() {
		/*
		 * Эта функция будет вызвана только на странице плагина, подключаем наш скрипт
		 */
		wp_enqueue_script( 'my-plugin-script' );
	}

	function my_plugin_manage_menu() {
		/* Выводим страницу плагина */
	}


к началу

jQuery в режиме noConflict

Примечание: Библиотека jQuery, включенная в WordPress, загружается в режиме «no conflict». Это сделано, чтобы предотвратить проблемы совместимости с другими библиотеками, которые могут загружаться в WordPress.

В режиме «no-confict» ярлык $ недоступен, вместо него используется слово jQuery. Например:

<?php
function wp_enqueue_script( $handle, $src = '', $deps = array(), $ver = false, $in_footer = false ) {
	$wp_scripts = wp_scripts();

	_wp_scripts_maybe_doing_it_wrong( __FUNCTION__ );


	if ( $src || $in_footer ) {
		$_handle = explode( '?', $handle );

		if ( $src ) {
			$wp_scripts->add( $_handle[0], $src, $deps, $ver );
		}

		if ( $in_footer ) {
			$wp_scripts->add_data( $_handle[0], 'group', 1 );
		}
	}

	$wp_scripts->enqueue( $handle );
}