Почему важна работа с актуальными данными в WordPress
Когда вы разрабатываете сложные сайты на WordPress, часто возникает задача получать и отображать данные, которые меняются мгновенно: количество просмотров, комментариев, статусов заказов, или динамическую информацию из внешних API. Стандартный кэш, будь то серверный или плагин кэширования, может задерживать обновление этих данных, что приводит к устаревшей информации на сайте.
Поэтому необходимо уметь выводить снимок данных в реальном времени, обходя кэш, чтобы посетители видели максимально свежую информацию.
В этой статье мы рассмотрим основные подходы к реализации такой функциональности, примеры плагинов, а также приведём примеры кода для создания собственного решения.
Подходы к выводу актуальных данных: AJAX и REST API
Самый распространённый способ получить актуальную информацию без перезагрузки страницы и не полагаться на кэш — использовать AJAX-запросы, обращающиеся к серверу за свежими данными. WordPress с версии 4.7 имеет полноценный REST API, который можно использовать для этих целей.
AJAX в WordPress: основные моменты
WordPress уже содержит встроенный механизм для обработки AJAX-запросов через admin-ajax.php, который позволяет вам создавать обработчики, вызываемые с фронтенда.
Для примера, создадим функцию, которая будет возвращать текущий счётчик просмотров записи в реальном времени.
add_action('wp_ajax_wp-kurs_get_post_views', 'wp_kurs_get_post_views_callback');
add_action('wp_ajax_nopriv_wp-kurs_get_post_views', 'wp_kurs_get_post_views_callback');
function wp_kurs_get_post_views_callback() {
$post_id = intval($_POST['post_id']);
$views = get_post_meta($post_id, 'wp_kurs_post_views', true);
if (!$views) {
$views = 0;
}
wp_send_json_success(array('views' => $views));
}Здесь мы регистрируем два хука — для авторизованных и неавторизованных пользователей. Функция читает мета-данные поста с ключом wp_kurs_post_views и возвращает их в формате JSON.
Для вызова с фронтенда используем JavaScript:
jQuery(document).ready(function($) {
var postId = $('#post-id').val();
$.post(wp_kurs_ajax.ajax_url, {
action: 'wp-kurs_get_post_views',
post_id: postId
}, function(response) {
if (response.success) {
$('#views-count').text(response.data.views);
}
});
});Не забудьте локализовать скрипт для передачи URL AJAX:
wp_enqueue_script('wp-kurs-ajax', get_template_directory_uri() . '/js/wp-kurs-ajax.js', array('jquery'), null, true);
wp_localize_script('wp-kurs-ajax', 'wp_kurs_ajax', array(
'ajax_url' => admin_url('admin-ajax.php')
));Использование REST API WordPress
REST API позволяет создавать собственные маршруты и возвращать данные по HTTP-запросу. Это более современный и гибкий способ, чем admin-ajax.php.
Пример регистрации маршрута для получения количества просмотров:
add_action('rest_api_init', function() {
register_rest_route('wp-kurs/v1', '/post_views/(?P<id>\d+)', array(
'methods' => 'GET',
'callback' => 'wp_kurs_rest_get_post_views',
'permission_callback' => '__return_true',
));
});
function wp_kurs_rest_get_post_views($request) {
$post_id = $request['id'];
$views = get_post_meta($post_id, 'wp_kurs_post_views', true);
if (!$views) {
$views = 0;
}
return new WP_REST_Response(array('views' => $views), 200);
}Теперь на фронтенде можно получить данные с помощью fetch API:
fetch('/wp-json/wp-kurs/v1/post_views/123')
.then(response => response.json())
.then(data => {
document.getElementById('views-count').textContent = data.views;
});Примеры практических плагинов для работы с реальными данными
Среди популярных плагинов, которые используют вывод данных в реальном времени, можно выделить:
- WP Live Stats — показывает статистику посещений в реальном времени с помощью AJAX и WebSocket;
- WooCommerce Live Sales Notifications — выводит уведомления о продажах в режиме реального времени;
- WP Activity Log — отслеживает действия пользователей и обновляет логи онлайн.
Если у вас задача — реализовать собственный плагин для вывода динамических данных, рекомендуем использовать REST API или AJAX с минимизацией нагрузки и обязательным кешированием там, где это возможно.
Управление кэшированием для актуальных данных
Кэширование — главный враг вывода данных в реальном времени. Но полностью отключать кэш не всегда рационально. Можно применить подход, когда большая часть страницы кэшируется, а динамические блоки обновляются отдельно через AJAX или REST.
Например, если у вас установлен плагин кэширования, такой как WP Super Cache или W3 Total Cache, вы можете исключить определённые AJAX-запросы из кэша с помощью настроек плагина.
Также можно использовать JavaScript для периодического обновления данных, чтобы пользователь всегда видел свежий контент без полной перезагрузки.
Пример функции для частичного обновления счетчика
function wp_kurs_update_views_periodically(postId, interval) {
setInterval(function() {
fetch('/wp-json/wp-kurs/v1/post_views/' + postId)
.then(response => response.json())
.then(data => {
document.getElementById('views-count').textContent = data.views;
});
}, interval);
}Вызывайте эту функцию с ID поста и интервалом обновления в миллисекундах, например, 5000 для обновления каждые 5 секунд.
Обработка ошибок и безопасность при работе с динамическими данными
При реализации подобных функций важно не забывать про безопасность. Всегда проверяйте и валидируйте входящие данные. В AJAX-обработчиках используйте nonce для защиты от CSRF-атак.
function wp_kurs_enqueue_scripts() {
wp_enqueue_script('wp-kurs-ajax', get_template_directory_uri() . '/js/wp-kurs-ajax.js', array('jquery'), null, true);
wp_localize_script('wp-kurs-ajax', 'wp_kurs_ajax', array(
'ajax_url' => admin_url('admin-ajax.php'),
'nonce' => wp_create_nonce('wp_kurs_nonce')
));
}
add_action('wp_enqueue_scripts', 'wp_kurs_enqueue_scripts');
add_action('wp_ajax_wp-kurs_get_post_views', 'wp_kurs_get_post_views_callback');
add_action('wp_ajax_nopriv_wp-kurs_get_post_views', 'wp_kurs_get_post_views_callback');
function wp_kurs_get_post_views_callback() {
check_ajax_referer('wp_kurs_nonce', 'nonce');
$post_id = intval($_POST['post_id']);
$views = get_post_meta($post_id, 'wp_kurs_post_views', true);
if (!$views) {
$views = 0;
}
wp_send_json_success(array('views' => $views));
}Фронтенд должен передавать nonce в запросах:
jQuery.post(wp_kurs_ajax.ajax_url, {
action: 'wp-kurs_get_post_views',
post_id: postId,
nonce: wp_kurs_ajax.nonce
}, function(response) {
// обработка ответа
});