wordpress•06.10.2026•6 минут чтения

Как передать данные из PHP в JavaScript в WordPress

Передаём данные из PHP в JavaScript через wp_add_inline_script и wp_localize_script: подключение файла, JSON, nonce и пошаговая проверка.

Чтобы передать данные из PHP в JavaScript в WordPress, сначала подключите JS-файл через wp_enqueue_script(), а затем добавьте данные перед ним с помощью wp_add_inline_script() и wp_json_encode(). Так скрипт получит настройки из WordPress без PHP-кода внутри файла .js.

Ниже передадим AJAX URL, nonce и текст кнопки. Разберём каждую часть простыми словами, проверим результат в браузере и отдельно покажем, когда использовать wp_localize_script().

Почему PHP нельзя вставить прямо в JS-файл

PHP выполняется на сервере, а JavaScript — в браузере посетителя. Обычный файл assets/js/site.js сервер не обрабатывает как PHP, поэтому запись <?php echo ...; ?> внутри него не сработает.

WordPress решает задачу в два шага: регистрирует внешний JS-файл и печатает рядом небольшой inline-скрипт с подготовленными данными. Важно использовать один и тот же handle — техническое имя подключённого скрипта.

Шаг 1. Создайте JavaScript-файл

Куда вставить: создайте файл assets/js/site.js в дочерней теме. Если такая папка уже есть, используйте принятую в проекте структуру.

(() => {
    'use strict';

    if (typeof window.inkSiteData === 'undefined') {
        return;
    }

    const button = document.querySelector('[data-ink-action]');

    if (!button) {
        return;
    }

    button.textContent = window.inkSiteData.buttonText;

    button.addEventListener('click', () => {
        console.log('AJAX URL:', window.inkSiteData.ajaxUrl);
        console.log('Nonce:', window.inkSiteData.nonce);
    });
})();

Разбор после кода

• window.inkSiteData — объект, который WordPress добавит на страницу до запуска файла.
• Первая проверка останавливает код, если объект не был передан. Страница не получит JavaScript-ошибку.
• querySelector() ищет кнопку по атрибуту data-ink-action. Если кнопки на странице нет, скрипт безопасно завершится.
• Обработчик пока только выводит данные в консоль. Это простой способ проверить передачу до подключения реального AJAX-запроса.

Шаг 2. Подключите файл и передайте данные

Куда вставить: в functions.php дочерней темы или в основной файл собственного плагина. Не вставляйте этот PHP-код в site.js.

<?php
add_action( 'wp_enqueue_scripts', 'ink_enqueue_site_script' );

function ink_enqueue_site_script() {
    $handle = 'ink-site-script';
    $path   = get_stylesheet_directory() . '/assets/js/site.js';
    $url    = get_stylesheet_directory_uri() . '/assets/js/site.js';

    if ( ! file_exists( $path ) ) {
        return;
    }

    wp_enqueue_script(
        $handle,
        $url,
        array(),
        (string) filemtime( $path ),
        true
    );

    $data = array(
        'ajaxUrl'    => admin_url( 'admin-ajax.php' ),
        'nonce'      => wp_create_nonce( 'ink_site_action' ),
        'buttonText' => __( 'Проверить данные', 'your-textdomain' ),
    );

    wp_add_inline_script(
        $handle,
        'window.inkSiteData = ' . wp_json_encode( $data ) . ';',
        'before'
    );
}

Разбор после кода

• wp_enqueue_scripts — стандартный хук для подключения файлов на публичной части сайта.
• $handle связывает внешний файл и данные. Значение ink-site-script должно совпадать в wp_enqueue_script() и wp_add_inline_script().
• get_stylesheet_directory() возвращает путь на сервере, а get_stylesheet_directory_uri() — URL. Эти функции подходят для дочерней темы.
• file_exists() не позволяет вывести битую ссылку, если файла нет. filemtime() меняет версию после правки файла и помогает сбросить браузерный кэш.
• admin_url() формирует корректный адрес AJAX для текущей установки WordPress.
• wp_create_nonce() создаёт одноразовый защитный токен. На стороне обработчика его нужно проверять; полный пример есть в статье про WordPress AJAX, nonce и JSON-ответ.
• wp_json_encode() безопасно преобразует PHP-массив в JSON. Не собирайте JavaScript-объект конкатенацией отдельных пользовательских значений.
• Параметр 'before' размещает объект до внешнего JS-файла, поэтому он уже существует в момент запуска site.js.

Шаг 3. Добавьте кнопку в шаблон

Куда вставить: в PHP-шаблон или template part дочерней темы, где нужна кнопка. Для редактора блоков аналогичную разметку можно добавить блоком «Произвольный HTML», если проект допускает такой способ.

<button type="button" class="site-action" data-ink-action>
    Загрузка…
</button>

Разбор после кода

JavaScript найдёт элемент по data-ink-action и заменит «Загрузка…» на строку из PHP. Атрибут type="button" не даст кнопке случайно отправить форму, если она окажется внутри тега <form>.

Когда нужен wp_localize_script

wp_localize_script() изначально предназначен для переводов, но часто используется и для небольших наборов данных. Он автоматически создаёт глобальный JavaScript-объект. Для произвольной конфигурации современная документация WordPress рекомендует рассмотреть wp_add_inline_script().

Куда вставить: вместо вызова wp_add_inline_script() в предыдущем PHP-примере. Подключение файла и массив $data оставьте без изменений.

<?php
wp_localize_script(
    $handle,
    'inkSiteData',
    $data
);

Разбор после кода

Второй аргумент — имя объекта без window.. Оно должно быть допустимым именем JavaScript-переменной и совпадать с inkSiteData в JS-файле. Не используйте дефисы: имя ink-site-data вызовет ошибку.

Какие данные нельзя передавать

Всё, что попало в HTML страницы, посетитель может увидеть через инструменты разработчика. Поэтому нельзя передавать пароли, API secret, приватные ключи и другие серверные секреты. Nonce тоже виден пользователю: это защита от поддельного запроса, а не способ авторизации.

Права пользователя всегда проверяйте на сервере через подходящую capability, а входящие значения очищайте и проверяйте. Если данные берутся из ACF, используйте подходящее экранирование при выводе — примеры есть в руководстве по безопасному выводу ACF-полей.

Что должно получиться

WordPress подключит site.js в подвале страницы. Перед ним появится объект window.inkSiteData с AJAX URL, nonce и текстом. Кнопка сменит подпись на «Проверить данные», а после клика в консоли появятся переданные значения.

Как проверить

1. Откройте страницу с кнопкой и обновите её с очисткой кэша.
2. Убедитесь, что надпись «Загрузка…» сменилась на «Проверить данные».
3. Нажмите F12, откройте вкладку Console и выполните window.inkSiteData. Браузер должен показать объект с тремя свойствами.
4. Нажмите кнопку. В консоли должны появиться AJAX URL и nonce без красных ошибок.
5. Во вкладке Network найдите site.js: ответ должен иметь статус 200.
6. Если файл не подключается, сравните решение со статьёй о правильном подключении CSS и JS через wp_enqueue.

Если не работает

• В консоли написано inkSiteData is undefined. Проверьте одинаковый handle в двух PHP-функциях и наличие параметра 'before'.
• site.js возвращает 404. Проверьте путь assets/js/site.js, регистр букв в имени файла и активность дочерней темы.
• Кнопка не меняется. Убедитесь, что в разметке есть data-ink-action, а в Console нет синтаксической ошибки.
• Изменения JS не видны. Очистите кэш WordPress, CDN и браузера. Проверьте, что версия файла меняется через filemtime().
• После вставки PHP сайт показывает критическую ошибку. Верните резервную копию файла и проверьте скобки и точки с запятой. Используйте инструкцию по поиску причины критической ошибки WordPress.
• AJAX отвечает ошибкой nonce. Имя действия в wp_create_nonce() и серверной проверке должно совпадать. После долгого простоя обновите страницу, чтобы получить новый nonce.
• Правки пропали после обновления темы. Размещайте код в дочерней теме или собственном плагине.

Официальные источники

Сверяйте параметры с документацией WordPress: wp_add_inline_script(), wp_localize_script(), wp_json_encode() и wp_enqueue_script().

По теме

• WordPress AJAX: обработчик, nonce и JSON-ответ2026
• Как подключить CSS и JavaScript в WordPress через wp_enqueue2026
• ACF: безопасный вывод полей в шаблоне WordPress2026
• Как создать дочернюю тему WordPress без потери изменений2026