wp_add_inline_script() WP 4.5.0

Добавляет дополнительный javascript код к зарегистрированному скрипту.

JS добавляется прямо в html документ, после основного (указанного) скрипта. Можно указать чтобы до скрипта.

Код скрипта указывается в параметре $data. Если на один обработчик (название) добавлено несколько скриптов, то ни будут выведены в порядке их добавления, в едином блоке <script>.

Хуков нет.

Возвращает

True/false. True если удалось добавить код скрипта, false в противном случае.

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

wp_add_inline_script( $handle, $data, $position );

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

Название (ID) скрипта к которому будут добавлен дополнительный блок скрипта.

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

JS код в виде строки. Открывающий/закрывающий <script> добавляется автоматически.

$position(строка)

Куда добавить код: до (before) или после (after) указанного в $handle скрипта.
По умолчанию: 'after'

Примеры

#1 Демонстрация работы

Подключим JS код после файла JS:

add_action('wp_enqueue_scripts', function(){
	wp_enqueue_script('my_scripts', get_stylesheet_directory_uri() .'/my_scripts.js' );

	// добавим произвольный код
	wp_add_inline_script('my_scripts', 'alert("Привет!");');
});

/* Получим в HTML коде
<script type='text/javascript' src='http://example.com/wp-content/themes/mytheme/my_scripts.js'></script>
<script type='text/javascript'>
alert("Привет!");
</script>
*/

#2 Произвольный код JS перед файлом

Допустим у нас уже подключен файл скрипта my_scripts.js с идентификатором my_scripts. И нам нужно дополнить его произвольным кодом. К примеру для него нужно указать глобальные переменные: color1 и color2:

add_action( 'wp_enqueue_scripts', function(){

	wp_enqueue_script( 'my_scripts', get_stylesheet_directory_uri() .'/my_scripts.js' );

	// добавим произвольный код
	wp_add_inline_script( 'my_scripts', 'var color1 = "red"; var color2 = "blue";', 'before' );
});

/* Получим в HTML коде
<script type='text/javascript'>
var color1 = "red"; var color2 = "blue";
</script>
<script type='text/javascript' src='http://example.com/wp-content/themes/mytheme/my_scripts.js'></script>
*/

#3 Несколько вызовов wp_add_inline_script()

add_action('wp_enqueue_scripts', function(){
	wp_enqueue_script('my_scripts', get_stylesheet_directory_uri() .'/my_scripts.js' );

	// добавим произвольный код
	wp_add_inline_script('my_scripts', 'var color1 = "red"; var color2 = "blue";' );
	wp_add_inline_script('my_scripts', 'var color3 = "#fff"; var color3 = "#000";' );
});

/* Получим в HTML коде
<script type='text/javascript' src='http://example.com/wp-content/themes/mytheme/my_scripts.js'></script>
<script type='text/javascript'>
var color1 = "red"; var color2 = "blue";
var color3 = "#fff"; var color3 = "#000";
</script>
*/

Заметки

• Смотрите: WP_Scripts::add_inline_script()

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

Код wp add inline script: wp-includes/functions.wp-scripts.php ^{WP 5.4.1}

<?php
function wp_add_inline_script( $handle, $data, $position = 'after' ) {
	_wp_scripts_maybe_doing_it_wrong( __FUNCTION__ );

	if ( false !== stripos( $data, '</script>' ) ) {
		_doing_it_wrong(
			__FUNCTION__,
			sprintf(
				/* translators: 1: <script>, 2: wp_add_inline_script() */
				__( 'Do not pass %1$s tags to %2$s.' ),
				'<code>&lt;script&gt;</code>',
				'<code>wp_add_inline_script()</code>'
			),
			'4.5.0'
		);
		$data = trim( preg_replace( '#<script[^>]*>(.*)</script>#is', '$1', $data ) );
	}

	return wp_scripts()->add_inline_script( $handle, $data, $position );
}

Cвязанные функции

Из метки: script (скрипт)

Еще из раздела: Регистрация script и style