Как добавлять JavaScript из плагинов Wordpress

Добавление скриптов JavaScript из плагинов Wordpress является не такой уж тривиальной задачей, как может показаться. Основной проблемой тут может быть то, что добавляемый вами скрипт может быть уже подключен либо может конфликтовать с другими плагинами.

При подключении скриптов никогда не используйте echo как в следующем примере:

echo '<script src="prototype.js"></script>';

Скрипт, который вы подключаете, может быть уже подключен, поэтому нет смысла добавлять его еще раз. Кроме того, если вы добавите prototype после jQuery, то у вас будут проблемы, так как обе эти библиотеки используют одну и ту же функцию $. Вместо этого используйте функцию wp_enqueue_script():

wp_enqueue_script('prototype');

В этом примере prototype является предопределенным значением. Поскольку эта библиотека по умолчанию присутствует в wordpress, то не нужно указывать путь к скрипту. Полный список библиотек, которые можно загружать таким образом есть здесь.

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

wp_enqueue_script('myscript', '/wp-content/plugins/myplugin/myscript.js');

Здесь мы указываем идентификатор скрипта и путь к нему. Если ваш скрипт к примеру зависит от scriptaculous, то можно указать эту зависимость в третьем параметре:

wp_enqueue_script('myscript', '/wp-content/plugins/myplugin/myscript.js', array('scriptaculous') );

Еще один вариант. В wordpress 2.5 используется jQuery-1.2.3, но допустим к примеру, что вам нужно постоянно использовать только новейшую версию. В этом случае используйте wp_deregister_script(), чтобы отменить регистрацию скрипта jQuery, а затем заново объявите его с нужными вам параметрами:

wp_deregister_script( 'jquery' );
wp_enqueue_script( 'jquery', 'http://code.jquery.com/jquery-latest.pack.js');

Теперь разберемся, как можно избежать возможные конфликты. Скрипты, добавленные нами при помощи wp_enqueue_script или wp_register_script(), добавляются в специальный массив. Используя этот массив, функция print_scripts_array() затем автоматически добавляет необходимые теги в HTML код. Поэтому, чтобы например изменить порядок вывода скриптов, можно использовать фильтры. Следующая функция присутствует в wordpress для автоматической проверки того, что prototype идет перед jquery. Я привожу ее здесь в качестве примера того, как можно фильтровать массив скриптов:

function wp_prototype_before_jquery( $js_array ) {
	if ( false === $jquery = array_search( 'jquery', $js_array ) )
		return $js_array;

	if ( false === $prototype = array_search( 'prototype', $js_array ) )
		return $js_array;

	if ( $prototype < $jquery )
		return $js_array;

	unset($js_array[$prototype]);

	array_splice( $js_array, $jquery, 0, 'prototype' );

	return $js_array;
}

add_filter( 'print_scripts_array', 'wp_prototype_before_jquery' );

Функция add_filter() подключает фильтр wp_prototype_before_jquery(), который получает в качестве аргумента массив скриптов. В этой то функции проверяется порядок вывода скриптов и при необходимости этот порядок меняется.