Как создать динамический виджет в WordPress с использованием REST API

Автор: Виктор Орлов | Опубликовано: 15.12.2025

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

Что такое динамический виджет и зачем он нужен

Динамический виджет — это компонент, который выводит содержимое, обновляющееся без перезагрузки страницы, например, последние комментарии, курсы валют, статистику посещаемости и прочее. Классические виджеты в WordPress обычно выводят статический HTML, а динамические используют JavaScript и REST API для получения свежих данных.

Преимущества динамических виджетов:

Обновление данных в режиме реального времени
Снижение нагрузки на сервер за счет асинхронных запросов
Более интерактивный и современный пользовательский интерфейс

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

Создаем собственный виджет в WordPress

Для начала создадим простой виджет на PHP. Для этого регистрируем класс, наследующий WP_Widget. Ниже пример, который вы можете добавить в файл functions.php вашей темы или в отдельный плагин.

class Wpgenerate_Dynamic_Widget extends WP_Widget {  public function __construct() {    parent::__construct(      'wpgenerate_dynamic_widget', // ID виджета      'Динамический виджет Wpgenerate', // Название      ['description' => 'Динамический виджет с данными из REST API']    );  }  public function widget($args, $instance) {    echo $args['before_widget'];    echo '<div id="wpgenerate-dynamic-widget">Загрузка данных...</div>';    echo $args['after_widget'];  }  public function form($instance) {    // Здесь можно добавить настройки виджета в админке  }  public function update($new_instance, $old_instance) {    return $new_instance;  }}

Регистрация виджета в WordPress:

function wpgenerate_register_dynamic_widget() {  register_widget('Wpgenerate_Dynamic_Widget');}add_action('widgets_init', 'wpgenerate_register_dynamic_widget');

После добавления и активации виджета в админке он будет выводить простой контейнер с текстом "Загрузка данных...". Следующий шаг — написать JavaScript, который по REST API будет загружать данные и обновлять содержимое.

Использование REST API WordPress для получения данных

REST API в WordPress позволяет получить практически любую информацию из базы в формате JSON. Для примера мы возьмем последние 5 опубликованных постов.

URL запроса для получения постов:

https://example.com/wp-json/wp/v2/posts?per_page=5

Где example.com — адрес вашего сайта. В ответ придет массив объектов с информацией о постах.

В JavaScript мы воспользуемся функцией fetch для выполнения запроса и обновления виджета:

document.addEventListener('DOMContentLoaded', function() {  const container = document.getElementById('wpgenerate-dynamic-widget');  fetch('/wp-json/wp/v2/posts?per_page=5')    .then(response => response.json())    .then(posts => {      if (!posts.length) {        container.innerHTML = 'Посты не найдены';        return;      }      let html = '<ul>';      posts.forEach(post => {        html += `<li><a href="${post.link}">${post.title.rendered}</a></li>`;      });      html += '</ul>';      container.innerHTML = html;    })    .catch(error => {      container.innerHTML = 'Ошибка загрузки данных';      console.error('Wpgenerate Widget REST API error:', error);    });});

Подключение скрипта в WordPress правильно

Чтобы подключить этот JavaScript на фронтенде, нужно использовать стандартный способ через wp_enqueue_script:

function wpgenerate_enqueue_dynamic_widget_script() {  wp_enqueue_script(    'wpgenerate-dynamic-widget',    get_template_directory_uri() . '/js/wpgenerate-dynamic-widget.js',    ['jquery'],    null,    true  );}add_action('wp_enqueue_scripts', 'wpgenerate_enqueue_dynamic_widget_script');

В данном примере предполагается, что скрипт с кодом выше сохранен в файле js/wpgenerate-dynamic-widget.js вашей темы. Скрипт будет загружен в футере для ускорения загрузки страницы.

Расширяем функциональность: фильтрация и кэширование

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

Допустим, нужно выводить посты из конкретной категории. В виджете можно добавить поле для выбора категории, а в запрос REST API передавать параметр categories с ID категории.

Пример запроса с категорией ID 10:

/wp-json/wp/v2/posts?per_page=5&categories=10

В форму виджета добавим поле для ID категории и сохраним его, а в JavaScript передадим этот параметр динамически через объект локализации скрипта.

Кэширование данных для уменьшения нагрузки

Чтобы не нагружать сервер постоянными запросами, полезно добавить кэширование на стороне сервера. Например, можно создать собственный REST эндпоинт, который будет кешировать результаты WP_Query на 10 минут.

Пример добавления кастомного endpoint:

add_action('rest_api_init', function () {  register_rest_route('wpgenerate/v1', '/cached-posts', [    'methods' => 'GET',    'callback' => 'wpgenerate_get_cached_posts',  ]);} );function wpgenerate_get_cached_posts(WP_REST_Request $request) {  $cache_key = 'wpgenerate_cached_posts';  $posts = get_transient($cache_key);  if (!$posts) {    $query = new WP_Query([      'posts_per_page' => 5,      'post_status' => 'publish',    ]);    $posts = [];    if ($query->have_posts()) {      while ($query->have_posts()) {        $query->the_post();        $posts[] = [          'id' => get_the_ID(),          'title' => get_the_title(),          'link' => get_permalink(),        ];      }      wp_reset_postdata();    }    set_transient($cache_key, $posts, 10 * MINUTE_IN_SECONDS);  }  return rest_ensure_response($posts);}

Теперь в виджете можно обращаться к /wp-json/wpgenerate/v1/cached-posts и получать закешированные данные.

Полезные плагины для работы с REST API и виджетами

Для упрощения работы с REST API и созданием виджетов рекомендую обратить внимание на следующие плагины:

Clearfy Pro — для оптимизации и настройки API и безопасности.
WPCommunity — расширенные виджеты и элементы интерфейса.

Эти инструменты помогут сделать разработку более удобной и ускорить интеграцию.

Итоги и рекомендации по созданию динамического виджета

Создание собственного динамического виджета на базе REST API — отличный способ повысить интерактивность сайта и улучшить взаимодействие с пользователем. Главное — грамотно построить архитектуру, обеспечить безопасность запросов и по возможности кэшировать результаты.

При разработке учитывайте нагрузку на сервер и оптимизируйте запросы. Используйте стандартные хуки WordPress для подключения скриптов и регистрации виджетов, чтобы обеспечить совместимость с темой и плагинами.

Этот пример можно расширять под любые задачи: интеграция с внешними API, отображение пользовательских данных, создание аналитики и многое другое.