wp_add_inline_script() │ WP 4.5.0

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

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

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

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

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

Работает на основе: wp_scripts()
Основа для: wp_localize_jquery_ui_datepicker()

Хуков нет.

Возвращает

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

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

wp_add_inline_script( $handle, $data, $position );
$handle(строка) (обязательный)
Название (ID) скрипта к которому будут добавлен дополнительный блок скрипта.
$data(строка) (обязательный)
JS код в виде строки. Открывающий/закрывающий <script> добавляется автоматически.
$position(строка)
Куда добавить код: до (before) или после (after) указанного в $handle скрипта.
По умолчанию: 'after'

Примеры

0

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

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

add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_typekit' );

function mytheme_enqueue_typekit(){

	wp_enqueue_script( 'mytheme-typekit', 'https://use.typekit.net/.js', array(), '1.0' );

	wp_add_inline_script( 'mytheme-typekit', 'try{ Typekit.load({ async: true }); }catch(e){} ' );

}

/* Получим в HTML коде
<script type="text/javascript" src="https://use.typekit.net/.js?ver=1.0"></script>
<script type="text/javascript"> try{ Typekit.load({ async: true }); }catch(e){} </script>
*/
0

#2 Передача данных из PHP в JS

Допустим нам нужно указать ajax URL для нашего скрипта и какие-то еще дополнительные параметры. Это можно сделать так:

wp_enqueue_script( 'my-script', 'https://url-to/my-script.js' );

wp_add_inline_script( 'my-script', 'const MYSCRIPT = ' . json_encode( [
	'ajaxUrl' => admin_url( 'admin-ajax.php' ),
	'param1' => 'some value',
	'param2' => 'value 2',
] ), 'before' );
0

#3 Произвольный код 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>
*/
0

#4 Несколько вызовов 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>
*/

Заметки

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

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

Код wp_add_inline_script() WP 6.2.2

wp-includes/functions.wp-scripts.php 
function wp_add_inline_script( $handle, $data, $position = 'after' ) {
	_wp_scripts_maybe_doing_it_wrong( __FUNCTION__, $handle );

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

script (скрипт)

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