Автоматизация вывода виджетов в WordPress — частая задача, которая помогает улучшить динамичность и персонализацию сайта. В этой статье мы подробно разберём, как создавать автоматические виджеты, используя REST API WordPress, чтобы получать данные с сервера и отображать их в области сайдбара или других местах.
Что такое REST API в WordPress и зачем он нужен для виджетов
WordPress REST API — мощный инструмент, который позволяет получать, создавать, редактировать и удалять данные сайта через HTTP-запросы. Это открывает возможности для реализации динамического контента в виджетах без необходимости загружать всю страницу заново.
Используя REST API, можно, например, выводить последние записи, пользовательские данные, статистику или другую информацию в виде виджета, который будет автоматически обновляться и подгружаться на клиенте.
Это особенно полезно, если вы хотите уменьшить нагрузку на сервер, сделать интерфейс более отзывчивым либо интегрировать внешний сервис.
Как зарегистрировать кастомный REST API эндпоинт для виджета
Для начала создадим свой REST API эндпоинт, который будет выдавать данные для виджета. Это может быть список последних комментариев, популярных постов или любые другие данные.
Добавьте следующий код в файл functions.php вашей темы или в отдельный плагин:
add_action('rest_api_init', function () {
register_rest_route('wpcore/v1', '/popular-posts', array(
'methods' => 'GET',
'callback' => 'wpcore_get_popular_posts',
'permission_callback' => '__return_true',
));
});
function wpcore_get_popular_posts() {
$args = array(
'posts_per_page' => 5,
'meta_key' => 'post_views_count',
'orderby' => 'meta_value_num',
'order' => 'DESC',
'post_status' => 'publish',
);
$query = new WP_Query($args);
$posts = array();
if ($query->have_posts()) {
while ($query->have_posts()) {
$query->the_post();
$posts[] = array(
'id' => get_the_ID(),
'title' => get_the_title(),
'link' => get_permalink(),
);
}
wp_reset_postdata();
}
return $posts;
}В этом примере мы создаем эндпоинт /wp-json/wpcore/v1/popular-posts, который возвращает 5 популярных постов по мета-ключу post_views_count. Если у вас нет механизма подсчёта просмотров, можно заменить на любые другие параметры.
Создание виджета, который подгружает данные через REST API
Теперь создадим простой виджет, который будет подгружать данные с нашего REST API. Для этого зарегистрируем новый виджет и добавим туда JavaScript для запроса данных.
Пример регистрации виджета:
class WPCore_Auto_Widget extends WP_Widget {
public function __construct() {
parent::__construct(
'wpcore_auto_widget',
'WPCore Автоматический виджет'
);
add_action('wp_enqueue_scripts', array($this, 'wpcore_enqueue_scripts'));
}
public function widget($args, $instance) {
echo $args['before_widget'];
echo $args['before_title'] . 'Популярные записи' . $args['after_title'];
echo '<div id="wpcore-popular-posts">Загрузка...</div>';
echo $args['after_widget'];
}
public function wpcore_enqueue_scripts() {
wp_enqueue_script('wpcore-auto-widget', get_template_directory_uri() . '/js/wpcore-auto-widget.js', array('jquery'), null, true);
wp_localize_script('wpcore-auto-widget', 'wpcoreApi', array(
'url' => rest_url('wpcore/v1/popular-posts')
));
}
}
function wpcore_register_auto_widget() {
register_widget('WPCore_Auto_Widget');
}
add_action('widgets_init', 'wpcore_register_auto_widget');В этом классе мы выводим контейнер для данных и подключаем скрипт wpcore-auto-widget.js, который будет делать запрос к REST API.
JavaScript для подгрузки данных виджета
Создайте файл js/wpcore-auto-widget.js в вашей теме с таким содержимым:
jQuery(document).ready(function($) {
$.getJSON(wpcoreApi.url, function(data) {
if(data.length > 0) {
var html = '<ul>';
$.each(data, function(index, post) {
html += '<li><a href="' + post.link + '">' + post.title + '</a></li>';
});
html += '</ul>';
$('#wpcore-popular-posts').html(html);
} else {
$('#wpcore-popular-posts').html('Популярных записей не найдено.');
}
}).fail(function() {
$('#wpcore-popular-posts').html('Ошибка загрузки данных.');
});
});Этот код отправляет AJAX-запрос на созданный нами эндпоинт, получает список постов и формирует HTML-список с ссылками на популярные записи.
Как расширить функциональность автоматических виджетов
Вы можете создавать разные REST API маршруты для любых данных: комментарии, последние заказы, пользовательские метаданные и т.д. В виджете достаточно будет изменить URL и обработку данных.
Также можно добавить параметры для REST API, например, число выводимых записей, категории или фильтры. Тогда в виджете появятся настройки, которые будут передаваться в запрос.
Для более сложных случаев рассмотрите использование плагина Clearfy Pro, который позволяет оптимизировать REST API и добавлять пользовательские маршруты без лишнего кода — подробности на wpshop.ru.
Пример расширенного запроса с параметрами
Добавим параметр count в наш эндпоинт, чтобы контролировать количество постов:
register_rest_route('wpcore/v1', '/popular-posts', array(
'methods' => 'GET',
'callback' => 'wpcore_get_popular_posts',
'permission_callback' => '__return_true',
'args' => array(
'count' => array(
'required' => false,
'default' => 5,
'validate_callback' => function($param, $request, $key) {
return is_numeric($param) && $param > 0;
},
),
),
));
function wpcore_get_popular_posts($request) {
$count = $request->get_param('count');
$args = array(
'posts_per_page' => intval($count),
'meta_key' => 'post_views_count',
'orderby' => 'meta_value_num',
'order' => 'DESC',
'post_status' => 'publish',
);
// остальной код без изменений
}Теперь можно вызывать /wp-json/wpcore/v1/popular-posts?count=10 для получения 10 записей.
Заключение по созданию автоматических виджетов с REST API
Использование REST API для динамического наполнения виджетов — современный и гибкий подход. Он позволяет создавать интерактивные и персонализированные элементы интерфейса, минимизируя нагрузку и повышая удобство пользователя.
Если вам нужна более простая реализация или готовые решения, обратите внимание на плагины из WPShop, которые помогают быстро создавать и настраивать виджеты без глубокого погружения в код.