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 script's registered handle.
 * @param string $src script's source URL.
 *
 * @return string
 */
function wp_kama_script_loader_tag_filter( $tag, $handle, $src ){

	// Filter...
	return $tag;
}

$tag (рядок): HTML код тега
<script> .
$handle (рядок): Назва скрипта (робоча назва), що вказується першим параметром функції
wp_enqueue_script() .
$src (рядок): Посилання на сценарій.

Приклади

#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

#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

#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 читайте тут .

#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_src

script_loader_tag

wp-includes/class.wp-scripts.php 406

$tag = apply_filters( 'script_loader_tag', $tag, $handle, $src);

Де використовується хук у WordPress

Використання не знайдено.