WP_ADD_INLINE_SCRIPT() │ WP 4.5.0

Функция wp_add_inline_script() позволяет добавить дополнительный код к зарегистрированному скрипту.

Код добавляется только в том случае, если скрипт уже находится в очереди на загрузку. Функция принимает строку $data, содержащую код. Если к одному и тому же скрипту с одним и тем же идентификатором $handle добавлено несколько блоков кода, они будут отображаться в том порядке, в котором были добавлены. Это значит, что последний добавленный код может переопределить предыдущий.

Возвращаемое значение

Функция возвращает true при успешном выполнении или false в случае ошибки.

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

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

Параметры

• $handle (string, необходимый) — имя скрипта, к которому добавляется инлайн-скрипт.
• $data (string, необходимый) — строка, содержащая JavaScript-код, который нужно добавить.
• $position (string) — указывает, добавлять ли инлайн-скрипт перед ('before') или после идентификатора скрипта ('after'). По умолчанию: 'after'.

Примеры использования

Пример 1: Передача данных из PHP в JS

Предположим, нам нужно указать URL для AJAX-запроса и некоторые дополнительные параметры. Это можно сделать следующим образом:

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

$json = json_encode( [
    'ajaxUrl' => admin_url( 'admin-ajax.php' ),
    'param1' => 'some value',
    'param2' => 'value 2',
] );

wp_add_inline_script( 'my-script', "const MYSCRIPT = $json", 'before' );

Теперь в вашем JavaScript-коде вы можете получить доступ к этим параметрам следующим образом:

console.log( MYSCRIPT.ajaxUrl ); // вывод: "https://your-site/wp-admin/admin-ajax.php"
console.log( MYSCRIPT.param1 ); // вывод: "some value"

Таким образом, мы используем wp_add_inline_script(), чтобы создать глобальный объект, который нужен для вашего скрипта. Это более правильно, чем использование wp_localize_script(), так как оно может преобразовать ��исла в строки.

Пример 2: Демонстрация работы

Чтобы добавить 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 код:

Пример 3: Добавление пользовательского кода перед файлом

Предположим, у вас уже есть файл со скриптами my_scripts.js с идентификатором my_scripts. И вам нужно добавить глобальные переменные:

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 код:

Пример 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 color4 = "#000";' );
} );

Сгенерированный HTML код:

Примечания

• Для получения более подробной информации, ознакомьтесь с документацией по функции WP_Scripts::add_inline_script().

Изменения

Функция была введена в версии 4.5.0.