wp-kurs.ru wordpress WP-Kurs

Снимок данных WordPress в реальном времени: как вывести актуальную информацию без кэширования

Почему важна работа с актуальными данными в 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) {
    // обработка ответа
});
×
Сделай свой сайт крутым!

Скидка -20% на премиум плагины WordPress

Выбрать плагин сейчас ⋙