wp_add_inline_script

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

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

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

Использовать wp_add_inline_script() нужно после того как основной скрипт добавлен в очередь на вывод, но еще не был выведен на экран. Т.е. если скрипт добавлен и уже выведен на экран использование wp_add_inline_script() ничего не выведет.

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

Хуков нет.

Возвращает

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

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

wp_add_inline_script( $handle, $data, $position );
$handle(строка) (обязательный)
Название (ID) скрипта к которому будут добавлен дополнительный блок скрипта.
$data(строка) (обязательный)
Строка содержащая javascript, который нужно добавить. Не нужно указывать открывающий и закрывающий тег <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://site.ru/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://site.ru/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://site.ru/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-includes/functions.wp-scripts.php

WP 4.7.3

<?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 );
}