Как отображать динамические данные в WordPress с помощью REST API и WPRemark

В современном WordPress-сайте часто возникает необходимость показывать динамические данные, например, отзывы пользователей или рейтинги товаров, без постоянной перезагрузки страницы. В этой статье подробно разберём, как реализовать динамическое отображение отзывов и оценок, используя REST API WordPress и плагин WPRemark.

Преимущества динамического отображения отзывов через REST API

REST API в WordPress – мощный инструмент, позволяющий работать с данными сайта в формате JSON, что открывает возможности для динамической подгрузки контента без перезагрузки страницы. Это улучшает UX, снижает нагрузку на сервер и повышает скорость работы сайта.

С помощью REST API можно реализовать:

• Подгрузку отзывов по мере прокрутки страницы (lazy load)
• Фильтрацию и сортировку отзывов на клиенте
• Динамическое обновление рейтингов при добавлении новых отзывов

Плагин WPRemark упрощает работу с отзывами и оценками, предоставляя удобный интерфейс и поддержку REST API, что идеально подходит для интеграции с кастомными front-end решениями.

Настройка WPRemark для работы с REST API

Для начала убедимся, что установлен и активирован плагин WPRemark. Он автоматически регистрирует необходимые REST API эндпоинты для работы с отзывами.

В админке WPRemark можно настроить параметры отображения отзывов, рейтингов и разрешить доступ к REST API. Это обеспечит возможность получения данных в формате JSON.

Если нужно добавить свои поля или фильтры к REST API, можно использовать хук rest_api_init и функцию register_rest_field. Пример для добавления поля "плюсы" отзыва:

add_action('rest_api_init', function() {
    register_rest_field('wpremark_review', 'pros', [
        'get_callback' => function($object) {
            return get_post_meta($object['id'], '_wpremark_pros', true);
        },
        'schema' => null,
    ]);
});

Получение и отображение отзывов на фронтенде

После настройки можно получить отзывы через REST API запросы. Пример запроса на получение последних 10 отзывов:

fetch('/wp-json/wpremark/v1/reviews?per_page=10')
  .then(response => response.json())
  .then(data => {
    // обработка данных
    console.log(data);
  });

Далее нужно вывести отзывы на странице, например, с помощью JavaScript и шаблонных строк:

function wpkit_renderReviews(reviews) {
  const container = document.getElementById('wpkit-reviews');
  container.innerHTML = '';
  reviews.forEach(review => {
    const html = `
      <div class="wpkit-review">
        <h3>${review.author_name}</h3>
        <p>${review.content}</p>
        <div class="rating">Рейтинг: ${review.rating}</div>
      </div>
    `;
    container.insertAdjacentHTML('beforeend', html);
  });
}

Этот код вставляет отзывы в контейнер с id wpkit-reviews. Такой подход позволяет динамически обновлять отзывы без перезагрузки.

Добавление пагинации и фильтров

Чтобы улучшить удобство, можно добавить пагинацию и фильтрацию отзывов. REST API поддерживает параметры page и per_page, а также кастомные параметры для фильтрации по рейтингу или дате.

Пример запроса с фильтром по минимальному рейтингу 4:

fetch('/wp-json/wpremark/v1/reviews?per_page=10&min_rating=4')
  .then(response => response.json())
  .then(data => {
    wpkit_renderReviews(data);
  });

Для реализации параметра min_rating потребуется расширить REST API плагина через фильтры. Это можно сделать так:

add_filter('wpremark_rest_query_args', function($args, $request) {
    if ($request->get_param('min_rating')) {
        $args['meta_query'][] = [
            'key' => '_wpremark_rating',
            'value' => intval($request->get_param('min_rating')),
            'compare' => '>=',
            'type' => 'NUMERIC'
        ];
    }
    return $args;
}, 10, 2);

Пример расширенного использования: динамическое обновление рейтинга товара

Представим, что на странице товара нужно отображать средний рейтинг, обновляемый сразу после добавления нового отзыва. Для этого:

1. При добавлении отзыва отправляем POST-запрос к REST API WPRemark.
2. После успешного ответа делаем новый GET-запрос для получения обновлённого среднего рейтинга.
3. Обновляем элемент рейтинга на странице без перезагрузки.

Пример отправки отзыва с помощью fetch:

fetch('/wp-json/wpremark/v1/reviews', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'X-WP-Nonce': wpApiSettings.nonce
  },
  body: JSON.stringify({
    post: productId,
    author_name: 'Иван',
    content: 'Отличный товар!',
    rating: 5
  })
})
.then(response => response.json())
.then(data => {
  if (data.id) {
    updateProductRating(productId);
  }
});

Функция updateProductRating может делать запрос к кастомному REST API эндпоинту, возвращающему средний рейтинг товара.

Итоги и рекомендации

Использование REST API совместно с WPRemark позволяет создавать современные, динамичные интерфейсы для отзывов и рейтингов в WordPress. Это значительно улучшает взаимодействие пользователей с сайтом и повышает его производительность.

Обязательно настройте правильные права доступа к REST API, используйте nonce для безопасности и кэширование при необходимости.

Для более сложных интеграций можно использовать React или Vue.js, получая данные из REST API и отображая их в виде компонентов.

Рекомендуем ознакомиться с документацией WPRemark на сайте WPSHOP для расширения функционала и адаптации под ваши задачи.