Как создать динамические скрипты в WordPress без плагинов

Автор: Сергей Савельев | Опубликовано: 03.03.2026

Часто при разработке тем или плагинов для WordPress возникает необходимость создавать динамические скрипты — то есть такие, которые генерируются на лету и зависят от настроек сайта, пользовательских данных или других условий. В этой статье мы подробно разберём, как создавать и правильно подключать динамические JavaScript и CSS файлы без использования сторонних плагинов, что позволит снизить нагрузку на систему и избежать излишних зависимостей.

Зачем нужны динамические скрипты в WordPress

Статичные скрипты и стили хорошо подходят для большинства задач, но бывают ситуации, когда нужно передать в JavaScript динамические параметры, например, URL REST API, nonce, настройки темы, или изменить CSS в зависимости от выбранных пользователем опций.

Примеры таких задач:

Передача данных из PHP в JavaScript (например, локализация скриптов).
Генерация CSS, зависящего от пользовательских настроек (цвета, отступы).
Создание скриптов, которые меняются в зависимости от ролей пользователя или страниц.

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

Подключение динамического JavaScript в WordPress

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

Самый простой и правильный способ добавить динамические данные в JavaScript — использовать функцию wp_localize_script. Несмотря на название, она не только локализует строки, но и позволяет передать любые данные из PHP в JS.

Пример:

function wpwp_enqueue_dynamic_scripts() {
    wp_enqueue_script('wpwp-main-script', get_template_directory_uri() . '/js/main.js', array('jquery'), '1.0', true);
    $dynamic_data = array(
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce' => wp_create_nonce('wpwp_nonce'),
        'user_role' => wpwp_get_current_user_role()
    );
    wp_localize_script('wpwp-main-script', 'wpwpData', $dynamic_data);
}
add_action('wp_enqueue_scripts', 'wpwp_enqueue_dynamic_scripts');

function wpwp_get_current_user_role() {
    if (!is_user_logged_in()) {
        return 'guest';
    }
    $user = wp_get_current_user();
    if (!empty($user->roles)) {
        return $user->roles[0];
    }
    return 'subscriber';
}

В вашем JavaScript-файле main.js можно обратиться к объекту wpwpData, например:

console.log('Ajax URL:', wpwpData.ajax_url);
console.log('User role:', wpwpData.user_role);

Генерация и подключение скрипта на лету

Если требуется создать целый JS-файл динамически, можно сделать отдельный PHP-скрипт с выводом JS-кода и подключить его как файл, например:

function wpwp_enqueue_dynamic_js_file() {
    wp_enqueue_script('wpwp-dynamic-js', get_template_directory_uri() . '/dynamic-script.php', array(), null, true);
}
add_action('wp_enqueue_scripts', 'wpwp_enqueue_dynamic_js_file');

В dynamic-script.php нужно указать заголовок и вывести JS-код:

<?php
header('Content-Type: application/javascript; charset=UTF-8');
$some_value = get_option('wpwp_option_value', 'default');
echo "console.log('Option value: ' . addslashes($some_value));";
?>

Минус — такой скрипт не кэшируется должным образом и может быть менее производительным.

Создание динамического CSS в WordPress

Подключение CSS с помощью inline стилей

Если CSS зависит от настроек сайта, самый простой способ — добавить его в <head> через wp_add_inline_style. Например:

function wpwp_dynamic_css() {
    $bg_color = get_theme_mod('wpwp_bg_color', '#ffffff');
    $custom_css = "
        body { background-color: {$bg_color}; }
        .wpwp-header { border-color: darken({$bg_color}, 10%); }
    ";
    wp_add_inline_style('wpwp-style-handle', $custom_css);
}
add_action('wp_enqueue_scripts', 'wpwp_dynamic_css');

Обратите внимание, что wp_add_inline_style добавляет CSS после указанного файла. Поэтому нужно убедиться, что 'wpwp-style-handle' — это хендл основного CSS темы или плагина.

Генерация CSS-файла на лету

Как и с JS, можно создать PHP-файл, который выводит CSS, например dynamic-style.php:

<?php
header('Content-Type: text/css; charset=UTF-8');
$color = get_option('wpwp_primary_color', '#3498db');
echo "
body { color: {$color}; }
";
?>

И подключить его:

function wpwp_enqueue_dynamic_css_file() {
    wp_enqueue_style('wpwp-dynamic-css', get_template_directory_uri() . '/dynamic-style.php');
}
add_action('wp_enqueue_scripts', 'wpwp_enqueue_dynamic_css_file');

Этот метод удобен для больших объёмов стилей, но также страдает от проблем с кэшированием.

Советы по оптимизации и безопасности

При работе с динамическими скриптами важно соблюдать несколько правил:

Всегда экранируйте данные, которые выводите в JS и CSS, чтобы избежать XSS и других уязвимостей.
Используйте wp_localize_script для передачи данных, если это возможно, вместо генерации целых файлов.
Добавляйте версии скриптов и стилей, чтобы браузеры корректно обновляли кэш.
Минимизируйте динамические скрипты, если это возможно, чтобы не замедлять загрузку страниц.
Если используете PHP-файлы для динамического вывода, настройте правильные заголовки кэширования.

Пример: динамическая смена цвета фона с передачей параметров в JS

Создадим небольшой пример, где цвет фона определяется в PHP и передаётся в JS, а JS применяет его к странице.

function wpwp_enqueue_scripts_example() {
    wp_enqueue_script('wpwp-bg-script', get_template_directory_uri() . '/js/bg-color.js', array(), '1.0', true);
    $bg_color = get_option('wpwp_bg_color', '#ff0000');
    wp_localize_script('wpwp-bg-script', 'wpwpColors', array(
        'background' => $bg_color
    ));
}
add_action('wp_enqueue_scripts', 'wpwp_enqueue_scripts_example');

В bg-color.js:

document.addEventListener('DOMContentLoaded', function() {
    if (typeof wpwpColors !== 'undefined') {
        document.body.style.backgroundColor = wpwpColors.background;
    }
});

Таким образом, вы добились динамического управления стилями через JavaScript, задаваемыми в настройках WordPress.

Дополнительные плагины для работы с динамическими скриптами

Если хотите использовать готовые решения, обратите внимание на плагины с расширенными возможностями оптимизации и управления скриптами:

Clearfy Pro — инструмент для оптимизации загрузки скриптов и стилей.
WPRemark — для управления отзывами с возможностями динамического обновления интерфейса.

Однако в большинстве случаев простое использование стандартных хуков и функций WordPress позволит вам гибко и эффективно работать с динамическими скриптами без привлечения сторонних расширений.