Создание и использование пользовательских атрибутов data в WordPress

В современных проектах на WordPress часто возникает необходимость хранения и передачи дополнительных данных в HTML-элементах для дальнейшей обработки на клиентской стороне с помощью JavaScript. HTML5 ввел стандартные пользовательские атрибуты data-*, которые идеально подходят для этой задачи.

Что такое атрибуты data и зачем они нужны в WordPress

Атрибуты data-* позволяют хранить произвольные данные в любом HTML-элементе без нарушения валидности разметки. В WordPress это удобно для динамического взаимодействия с элементами страницы, например, для реализации кастомных скриптов, AJAX-запросов, интерактивных интерфейсов.

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

Пример использования атрибутов data в шаблоне WordPress

Предположим, у вас есть кастомный тип записи «product», и вы хотите добавить к каждой карточке товара атрибут data-product-id с ID товара, чтобы потом использовать его в скриптах.

<?php
function wplab_get_product_card() {
    $products = get_posts(array('post_type' => 'product', 'numberposts' => 5));
    foreach ($products as $product) {
        $id = $product->ID;
        $title = esc_html($product->post_title);
        echo '<div class="product-card" data-product-id="' . $id . '">';
        echo '<h3>' . $title . '</h3>';
        echo '</div>';
    }
}
?wplab_get_product_card();

Здесь мы динамически подставляем ID товара в атрибут data-product-id, который затем можно легко получить в JS.

Доступ к атрибутам data с помощью JavaScript в WordPress

После того как атрибуты установлены, их можно читать и изменять через стандартные методы JavaScript или jQuery.

Пример с использованием чистого JS:

document.querySelectorAll('.product-card').forEach(function(card) {
    card.addEventListener('click', function() {
        var productId = this.dataset.productId; // Получаем значение data-product-id
        alert('Вы кликнули по товару с ID: ' + productId);
    });
});

Если на сайте используется jQuery, то:

jQuery(document).ready(function($) {
    $('.product-card').on('click', function() {
        var productId = $(this).data('product-id');
        alert('Вы кликнули по товару с ID: ' + productId);
    });
});

Пример расширенного применения: AJAX-запрос с data-атрибутами

Рассмотрим пример, когда при клике на кнопку с атрибутом data-post-id отправляется AJAX-запрос для получения дополнительной информации о записи.

В PHP добавим скрипт в фронтенд и настроим обработчик AJAX:

function wplab_enqueue_scripts() {
    wp_enqueue_script('wplab-ajax-js', get_template_directory_uri() . '/js/wplab-ajax.js', array('jquery'), null, true);
    wp_localize_script('wplab-ajax-js', 'wplab_ajax_obj', array(
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce' => wp_create_nonce('wplab_ajax_nonce')
    ));
}
add_action('wp_enqueue_scripts', 'wplab_enqueue_scripts');

// AJAX handler
function wplab_ajax_get_post_data() {
    check_ajax_referer('wplab_ajax_nonce', 'nonce');
    $post_id = intval($_POST['post_id']);
    if (!$post_id) {
        wp_send_json_error('Неверный ID поста');
    }
    $post = get_post($post_id);
    if (!$post) {
        wp_send_json_error('Пост не найден');
    }
    wp_send_json_success(array(
        'title' => $post->post_title,
        'content' => apply_filters('the_content', $post->post_content)
    ));
}
add_action('wp_ajax_wplab_get_post_data', 'wplab_ajax_get_post_data');
add_action('wp_ajax_nopriv_wplab_get_post_data', 'wplab_ajax_get_post_data');

В файле js/wplab-ajax.js напишем скрипт:

jQuery(document).ready(function($) {
    $('.load-post-info').on('click', function() {
        var postId = $(this).data('post-id');
        $.ajax({
            url: wplab_ajax_obj.ajax_url,
            method: 'POST',
            dataType: 'json',
            data: {
                action: 'wplab_get_post_data',
                post_id: postId,
                nonce: wplab_ajax_obj.nonce
            },
            success: function(response) {
                if (response.success) {
                    alert('Заголовок: ' + response.data.title);
                    // Здесь можно вывести или использовать контент
                } else {
                    alert('Ошибка: ' + response.data);
                }
            }
        });
    });
});

В шаблоне выводим кнопку с атрибутом:

<button class="load-post-info" data-post-id="<?php echo $post->ID; ?>">Загрузить данные</button>

Полезные плагины для работы с кастомными атрибутами и мета-данными

Хотя атрибуты data-* легко добавлять вручную, некоторые плагины облегчают работу с мета-данными и их выводом в разметку:

• Advanced Custom Fields (ACF) — позволяет создавать метаполя для постов и выводить их легко с помощью функций. Для добавления в атрибуты data можно использовать get_field().
• Clearfy Pro — плагин оптимизации, который помогает убрать лишние данные из разметки, но при этом можно настроить добавление пользовательских атрибутов через хуки.
• WPGPT — если вы хотите динамически изменять атрибуты с помощью AI, можно связать данные с GPT-генерацией.

Советы и лучшие практики при работе с data-атрибутами в WordPress

При использовании data-* атрибутов важно соблюдать несколько правил:

• Имена атрибутов должны быть в нижнем регистре и без специальных символов, например, data-product-id, а не data-ProductID.
• Для безопасности экранируйте выводимые данные функциями esc_attr() или esc_html() в PHP.
• Не храните в атрибутах большие объемы данных — только минимально необходимые для логики страницы.
• Для сложных данных лучше использовать JSON в data-* с последующим парсингом в JS.

Пример передачи JSON через data-атрибут и обработка в JavaScript

Иногда нужно передать набор данных, например, параметры товара:

<div class="product-card" data-product-info='<?php echo esc_attr(json_encode(array('id' => $id, 'price' => 1999, 'in_stock' => true))); ?>'></div>

В JS для получения и использования:

var info = document.querySelector('.product-card').dataset.productInfo;
var productInfo = JSON.parse(info);
console.log(productInfo.id, productInfo.price, productInfo.in_stock);