eurobyte.ru - мощные сервера с Дата-центрами в Нидерландах и Москве. От 159 ₽/мес.
Kama и campusboy, mihdan2.2 года назад2 EN

wp_script_add_data() │ WP 4.2.0

Добавляет данные к подключенным с помощью wp_enqueue_script() скриптам. Например, когда нужно выводить скрипт только для «IE 6» или «lt IE 9» (меньше IE 9).

Работает только если скрипт уже был зарегистрирован или добавлен в очередь на вывод - смотрите wp_register_script() или wp_enqueue_script().

Пока, можно указать только дополнительные данные для подключения скрипта для указанных браузеров. Т.е. $key может быть равен только conditional, а $value строке «IE 6», «lte IE 7» и т.д.

Для стилей есть аналогичная функция: wp_style_add_data()

Используйте wp_localize_script(), когда нужно добавить дополнительные данные (JS объект с данными) перед подключаемым скриптом.

Хуков нет.

Возвращает

true|false. True, если данные добавлены. false при неудаче.

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

wp_script_add_data( $handle, $key, $value );
$handle(строка) (обязательный)
ID, название скрипта, к которому нужно добавить данные. Тут нужно указывать первый параметр из wp_enqueue_script() или из wp_register_script().
$key(строка) (обязательный)

Название типа добавляемых данных. На основе этого параметра будет обрабатываться значение указанное в $value. Может быть:

  • conditional
  • data - используется в wp_localize_script().
  • group - в какой группе выводить (в шапке или в подвале).
  • strategy - стратегия загрузки скрипта. Может быть: async или defer. С версии WP 6.3. Подробнее читайте здесь.
$value(смешанный) (обязательный)

Значение для указанного ключа $key.

Дополнительные данные вывода скрипта на экран. Варианты значений при $key = 'conditional':

  • IE - только для IE
  • IE 6 - только для IE 6
  • IE 7 - только для IE 7
  • IE 8 - только для IE 8
  • IE 9 - только для IE 9
  • gt IE 6 - только для IE больше 6
  • lt IE 9 - только для IE меньше 9
  • gte IE 7 - только для IE больше или равно 7
  • lte IE 7 - только для IE меньше или равно 7
  • !IE - для всех браузеров кроме IE версий 5-9
  • !IE - для всех браузеров кроме IE версий 5-9

Варианты значений при $key = 'strategy':

  • async - асинхронная загрузка скрипта.
  • defer - отложенная загрузка скрипта.

Примеры

0

#1 Подключим скрипт только для IE меньше 9 версии

Этот пример показывает, как добавить условие подключения зарегистрированного скрипта. Например добавим условие <!--[if lt IE 9]>...<![endif]--> - для IE меньше 9.

add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );
function my_enqueue_scripts() {
	// Подключаем специальные скрипты только для Internet Explorer 6
	wp_enqueue_script('pngfix', get_template_directory_uri() .'js/pngfix.js');
	wp_script_add_data('pngfix', 'conditional', 'lt IE 9');
}

В результате получим в head документа

<!--[if lt IE 9]>
<script type='text/javascript' src='http://example.com/wp-content/themes/theme/js/pngfix.js?ver=4.5.2'></script>
<![endif]-->
0

#2 Добавление атрибута async, defer к зарегистрированному скрипту 

add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );

function my_enqueue_scripts() {

	wp_enqueue_script( 'app', get_template_directory_uri() . 'js/app.js' );

	// Добавляем defer к зарегистрированному скрипту.
	wp_script_add_data( 'app', 'defer', true );
}

add_filter( 'script_loader_tag', 'support_async_defer_script_attrs', 10, 2 );

/**
 * Example of adding async|defer attribute for the script:
 *
 *     ```
 *     wp_register_script( $handle, ... )
 *
 *     // add async attribute
 *     wp_script_add_data( $handle, 'async', true );
 *
 *     // or add defer attribute
 *     wp_script_add_data( $handle, 'defer', true );
 *
 *     // unset the attr
 *     wp_script_add_data( $handle, 'async', false );
 *     ```
 */
function support_async_defer_script_attrs( $tag, $handle ) {

	foreach ( [ 'async', 'defer' ] as $attr ) {

		if ( ! wp_scripts()->get_data( $handle, $attr ) ) {
			continue;
		}

		// Prevent adding attribute twice.
		if ( ! preg_match( ":\s{$attr}[=>\s]:", $tag ) ) {
			$tag = preg_replace( ':(?=></script>):', " $attr", $tag, 1 );
		}

		break; // Only async or defer, not both.
	}

	return $tag;
}

В результате получим в head документа

<script type='text/javascript' src='http://example.com/wp-content/themes/theme/js/app.js?ver=4.5.2' defer></script>

Заметки

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

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

Код wp_script_add_data() WP 6.8.3

wp-includes/functions.wp-scripts.php 
function wp_script_add_data( $handle, $key, $value ) {
	return wp_scripts()->add_data( $handle, $key, $value );
}

script (скрипт)

Регистрация script и style

2 комментария