Как создать динамические скрипты в теме WordPress: практическое руководство

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

В современном веб-разработке часто требуется, чтобы JavaScript скрипты в теме WordPress подстраивались под разные условия — параметры страницы, пользовательские настройки, данные из базы. Статичные скрипты, подключённые напрямую, не могут гибко реагировать на изменения контента или настроек, что ограничивает функциональность.

Динамические скрипты позволяют передавать из PHP в JavaScript переменные, формировать логику на основе настроек темы или содержимого сайта, а также оптимизировать загрузку, подключая скрипты только там, где они действительно нужны.

В этой статье рассмотрим, как создавать динамические скрипты, передавать им данные из PHP и подключать их в теме WordPress правильно и эффективно.

Основные способы создания и подключения динамических скриптов

1. Использование `wp_localize_script` для передачи данных из PHP в JavaScript

Функция wp_localize_script часто используется не только для локализации, но и для передачи любых данных из PHP в JavaScript. Она создаёт объект с переменными, доступный в подключённом скрипте.

Пример подключения динамических данных:

function wp_themes_enqueue_scripts() {
    wp_enqueue_script('wp-themes-dynamic-js', get_template_directory_uri() . '/js/dynamic.js', array('jquery'), '1.0', true);

    $data = array(
        'ajaxUrl' => admin_url('admin-ajax.php'),
        'siteName' => get_bloginfo('name'),
        'userId' => get_current_user_id()
    );

    wp_localize_script('wp-themes-dynamic-js', 'wpThemesData', $data);
}
add_action('wp_enqueue_scripts', 'wp_themes_enqueue_scripts');

В скрипте dynamic.js можно обратиться к объекту wpThemesData и использовать эти данные:

console.log(wpThemesData.siteName); // Выведет название сайта
console.log(wpThemesData.userId); // ID текущего пользователя

2. Генерация скрипта на лету с PHP

Иногда нужно сгенерировать JavaScript-код динамически, прямо из PHP, например, если логика сложная или данные формируются нестандартно. Для этого можно создать отдельный PHP-файл-скрипт, который выводит JS с заголовком Content-type: application/javascript.

Пример такого файла dynamic-script.php в корне темы:

<?php
header('Content-Type: application/javascript');

$user_id = get_current_user_id();
$custom_color = get_theme_mod('wp_themes_primary_color', '#0073aa');

?>

const userId = "<?php echo $user_id; ?>";
const primaryColor = "<?php echo $custom_color; ?>";

console.log('User ID:', userId);
console.log('Primary color:', primaryColor);

Подключаем этот скрипт в functions.php так:

function wp_themes_enqueue_dynamic_php_script() {
    wp_enqueue_script('wp-themes-dynamic-php', get_template_directory_uri() . '/dynamic-script.php', array(), null, true);
}
add_action('wp_enqueue_scripts', 'wp_themes_enqueue_dynamic_php_script');

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

3. Встраивание inline скриптов с динамическими данными

Если скрипт небольшой и нужен только на конкретной странице, можно вставить его прямо в шаблон через wp_add_inline_script или через вывод в шаблоне.

Пример с wp_add_inline_script:

function wp_themes_inline_dynamic_script() {
    wp_enqueue_script('jquery');

    $inline_js = 'const currentUserName = "' . esc_js(wp_get_current_user()->display_name) . '";';

    wp_add_inline_script('jquery', $inline_js);
}
add_action('wp_enqueue_scripts', 'wp_themes_inline_dynamic_script');

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

Примеры практического использования динамических скриптов

Динамическая подсветка активного пункта меню

Предположим, у вас в теме есть несколько меню, и вы хотите динамически подсвечивать активный пункт в зависимости от текущей категории или страницы. В PHP передаём ID текущей категории:

function wp_themes_pass_current_category() {
    wp_enqueue_script('wp-themes-menu-highlight', get_template_directory_uri() . '/js/menu-highlight.js', array('jquery'), '1.0', true);

    if (is_category()) {
        $cat_id = get_queried_object_id();
    } else {
        $cat_id = 0;
    }

    wp_localize_script('wp-themes-menu-highlight', 'wpMenuData', array(
        'currentCategoryId' => $cat_id
    ));
}
add_action('wp_enqueue_scripts', 'wp_themes_pass_current_category');

В menu-highlight.js реализуем логику:

jQuery(document).ready(function($) {
    if (wpMenuData.currentCategoryId) {
        $('nav li').each(function() {
            var catId = $(this).data('category-id');
            if (catId == wpMenuData.currentCategoryId) {
                $(this).addClass('active');
            }
        });
    }
});

Для этого в HTML в пунктах меню добавьте атрибут data-category-id с соответствующим ID категории, например через Walker.

Динамическая загрузка данных через AJAX с использованием переданных параметров

С помощью динамических скриптов удобно передавать URL для AJAX-запросов и nonce для безопасности.

function wp_themes_enqueue_ajax_script() {
    wp_enqueue_script('wp-themes-ajax', get_template_directory_uri() . '/js/ajax-handler.js', array('jquery'), '1.0', true);

    wp_localize_script('wp-themes-ajax', 'wpAjaxData', array(
        'ajaxUrl' => admin_url('admin-ajax.php'),
        'nonce' => wp_create_nonce('wp_themes_nonce')
    ));
}
add_action('wp_enqueue_scripts', 'wp_themes_enqueue_ajax_script');

В ajax-handler.js пример отправки AJAX:

jQuery(document).ready(function($) {
    $('#load-more').on('click', function() {
        $.ajax({
            url: wpAjaxData.ajaxUrl,
            method: 'POST',
            data: {
                action: 'wp_themes_load_more',
                nonce: wpAjaxData.nonce,
                page: $(this).data('page')
            },
            success: function(response) {
                if(response.success) {
                    $('#posts-container').append(response.data.html);
                    // Обновляем номер страницы
                }
            }
        });
    });
});

Не забудьте добавить обработчик в functions.php для wp_themes_load_more с проверкой nonce.

Оптимизация и безопасность динамических скриптов в теме

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

Использовать wp_localize_script для передачи данных — это безопаснее, чем встраивать данные напрямую в HTML.
Всегда экранировать данные с помощью esc_js() или аналогичных функций.
Подключать скрипты только на тех страницах, где они нужны, с помощью условных тегов is_page(), is_single() и подобных.
Использовать nonce для защиты AJAX-запросов.
По возможности минимизировать количество inline-скриптов, чтобы улучшить кэширование.

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

Заключение

Создание динамических скриптов в теме WordPress позволяет повысить интерактивность и адаптивность сайта. Использование wp_localize_script — самый простой и рекомендуемый способ передачи данных из PHP в JavaScript. При необходимости можно генерировать скрипты на лету или вставлять inline-код. Главное — соблюдать правила безопасности и оптимизации.

Освоив эти методы, вы сможете создавать сложные и гибкие темы, которые подстраиваются под любые задачи и условия.

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