Функция wp_add_inline_script() в WordPress с примерами

Функция wp_add_inline_script() используется для добавления JavaScript кода непосредственно в HTML-документ, привязывая его к уже зарегистрированному скрипту. Эта функция полезна для передачи динамических данных из PHP в JS или для добавления небольших блоков кода без необходимости создания отдельного файла JavaScript.

Описание

wp_add_inline_script() позволяет добавить строку JavaScript в очередь вывода для определенного скрипта. Основное преимущество заключается в том, что добавленный код интегрируется в тот же HTML-документ и выводится до или после указанного скрипта в зависимости от параметра $position.

wp_add_inline_script( string $handle, string $data, string $position = 'after' ): bool

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

Функция возвращает true, если код был успешно добавлен, и false, если возникла ошибка (например, если указанный скрипт еще не был зарегистрирован или не находится в очереди).

Пример 1: Добавление JavaScript после подключенного скрипта

Предположим, вы используете внешний JavaScript файл для загрузки внешних шрифтов, и хотите добавить код, который инициализирует их загрузку после подключения основного скрипта:

add_action( 'wp_enqueue_scripts', function() {
    wp_enqueue_script( 'custom-typekit', 'https://use.typekit.net/xyz123.js', array(), null );
    wp_add_inline_script( 'custom-typekit', 'try { Typekit.load(); } catch (e) {}' );
});

Здесь мы сначала подключаем внешний файл, а затем добавляем код, который выполняет его инициализацию. Код будет выполнен после загрузки основного файла.

Результат:

<script src="https://use.typekit.net/xyz123.js"></script>
<script>try { Typekit.load(); } catch (e) {}</script>

Пример 2: Передача данных из PHP в JavaScript

Допустим, нам нужно передать на клиентскую сторону URL для выполнения AJAX-запросов и дополнительные параметры. Это можно сделать через wp_add_inline_script(), передав необходимые данные в виде JSON:

wp_enqueue_script( 'custom-script', '/path/to/custom-script.js', array(), null );

wp_add_inline_script( 'custom-script', 'const ScriptData = ' . json_encode( array(
    'ajaxUrl'  => admin_url( 'admin-ajax.php' ),
    'paramOne' => 'значение1',
    'paramTwo' => 'значение2',
) ), 'before' );

Здесь мы создаем объект ScriptData и передаем его в JavaScript до основного скрипта, используя параметр 'before'.

Пример 3: Добавление переменных перед скриптом

Иногда необходимо передать в JavaScript несколько переменных до загрузки основного скрипта. Например, у нас есть зарегистрированный скрипт с идентификатором my-scripts, и нам нужно передать переменные цвета:

add_action( 'wp_enqueue_scripts', function() {
    wp_enqueue_script( 'my-scripts', get_template_directory_uri() . '/assets/js/my-scripts.js', array(), null );
    
    wp_add_inline_script( 'my-scripts', 'let primaryColor = "#ff0000"; let secondaryColor = "#00ff00";', 'before' );
});

Этот код добавляет переменные primaryColor и secondaryColor перед основным файлом скрипта.

Результат:

<script>
let primaryColor = "#ff0000"; 
let secondaryColor = "#00ff00";
</script>
<script src="/wp-content/themes/mytheme/assets/js/my-scripts.js"></script>

Пример 4: Добавление нескольких JavaScript блоков

Если необходимо несколько раз добавить код к одному и тому же скрипту, wp_add_inline_script() корректно объединит их в единый блок:

add_action( 'wp_enqueue_scripts', function() {
    wp_enqueue_script( 'my-scripts', get_template_directory_uri() . '/assets/js/my-scripts.js', array(), null );

    wp_add_inline_script( 'my-scripts', 'let backgroundColor = "#f0f0f0";' );
    wp_add_inline_script( 'my-scripts', 'let textColor = "#333333";' );
});

Таким образом, оба блока JavaScript будут объединены и выведены после основного файла.

Результат:

<script src="/wp-content/themes/mytheme/assets/js/my-scripts.js"></script>
<script>
let backgroundColor = "#f0f0f0";
let textColor = "#333333";
</script>

Примечания

• Использование с новыми блок-темами: В новых блок-темах, таких как Twenty Twenty-Two, использование функций wp_localize_script и wp_add_inline_script может не сработать, если их вызов происходит слишком поздно (например, внутри callback функции шорткода). В таких случаях лучше использовать хук wp_footer для добавления скриптов непосредственно перед закрытием тега </body>.

Заключение

Функция wp_add_inline_script() предоставляет удобный способ добавления динамического JavaScript кода к уже зарегистрированным скриптам, передавая данные из PHP в JS или дополняя существующий код. Она упрощает работу с небольшими блоками JavaScript, делая код более гибким и поддерживаемым.