script_loader_tag │ хук-фильтр │ WP 4.1.0

Позволяет изменить HTML код тега <script>, поставленного в очередь на вывод функцией wp_enqueue_script().

Использование

add_filter( 'script_loader_tag', 'wp_kama_script_loader_tag_filter', 10, 3 );

/**
 * Function for `script_loader_tag` filter-hook.
 * 
 * @param string $tag    The `<script>` tag for the enqueued script.
 * @param string $handle The script's registered handle.
 * @param string $src    The script's source URL.
 *
 * @return string
 */
function wp_kama_script_loader_tag_filter( $tag, $handle, $src ){

	// filter...
	return $tag;
}
$tag(cтрока)
HTML код тега <script>.
$handle(cтрока)
Название скрипта (рабочее название), указываемое первым параметром в функции wp_enqueue_script().
$src(cтрока)
Ссылка на скрипт.

Примеры

1

#1 Для примера взглянем под капот стандартной темы Twenty Sixteen

Один из основных скриптов темы подключается так:

wp_enqueue_script( 'twentysixteen-script', get_template_directory_uri() . '/js/functions.js', array( 'jquery' ), '20160816', true );

В таком случае в фильтр передадутся переменные, содержащие следующие данные:

$tag = <script type='text/javascript' src='http://wp-test.ru/wp-content/themes/twentysixteen/js/functions.js?ver=20160816'></script>

$handle = twentysixteen-script

$src = http://wp-test.ru/wp-content/themes/twentysixteen/js/functions.js?ver=20160816
0

#2 Ещё один из примеров

В той же теме, использование условия с помощью функции wp_script_add_data():

// подключение
wp_enqueue_script( 'twentysixteen-html5', get_template_directory_uri() . '/js/html5.js', array(), '3.7.3' );
wp_script_add_data( 'twentysixteen-html5', 'conditional', 'lt IE 9' );
$tag =
<!--[if lt IE 9]>
<script type='text/javascript' src='http://wp-test.ru/wp-content/themes/twentysixteen/js/html5.js?ver=3.7.3'></script>
<![endif]-->

$handle = twentysixteen-html5

$src = http://wp-test.ru/wp-content/themes/twentysixteen/js/html5.js?ver=3.7.3
0

#3 Добавление скрипту атрибутов defer или async

Этот пример показывает как добавить новый атрибут подключаемому скрипту. Тут мы добавим атрибут defer. Но вместо него может быть любой другой атрибут.

wp_enqueue_script( 'my-script', get_template_directory_uri() . '/js/my-script.js' );

add_filter( 'script_loader_tag', 'change_my_script', 10, 3 );
function change_my_script( $tag, $handle, $src ) {

	if ( 'my-script' === $handle ) {
		// return str_replace( ' src', ' async src', $tag );
		return str_replace( ' src', ' defer src', $tag );
	}

	return $tag;
}

Подробнее про атрибуты async и defer читайте в здесь.

Более полный пример смотрите здесь.

0

#4 Укажем что наш скрипт является модулем ES6

Про ES6 модули читайте в этой заметке.

add_filter( 'script_loader_tag', 'scripts_as_es6_modules', 10, 3 );
function scripts_as_es6_modules( $tag, $handle, $src ) {

	if ( 'my-script' === $handle ) {
		return str_replace( '<script ', '<script type="module"', $tag );
	}

	return $tag;
}

Список изменений

С версии 4.1.0 Введена.

Где вызывается хук

WP_Scripts::do_item()
script_loader_tag
wp-includes/class-wp-scripts.php 441 
$tag = apply_filters( 'script_loader_tag', $tag, $handle, $src );

Где используется хук в WordPress

Использование не найдено.