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

Автор: Олеся Игнатьева | Опубликовано: 17.12.2025

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

Что такое REST API в WordPress и зачем он нужен

REST API — это интерфейс прикладного программирования, который позволяет отправлять запросы к серверу и получать структурированные данные. В WordPress REST API предоставляет доступ к записям, пользователям, комментариям и другим сущностям. Это открывает возможности для создания одностраничных приложений (SPA), кастомных фронтендов и интеграций с внешними сервисами.

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

Основы работы с REST API WordPress

По умолчанию REST API активирован на всех сайтах WordPress версии 4.7 и выше. Для получения списка записей можно отправить GET-запрос по адресу:

https://ваш-сайт.ru/wp-json/wp/v2/posts

В ответ вы получите JSON-массив с объектами записей. Аналогично доступны другие эндпоинты, например, для страниц, категорий, пользователей.

Для динамической загрузки контента на фронтенде рекомендуется использовать JavaScript и метод fetch или аналогичные библиотеки.

Пример запроса и вывода заголовков последних постов

function wpchecker_fetch_posts() {
  fetch('https://ваш-сайт.ru/wp-json/wp/v2/posts')
    .then(response => response.json())
    .then(data => {
      const postsContainer = document.getElementById('posts');
      postsContainer.innerHTML = '';
      data.forEach(post => {
        const postItem = document.createElement('h3');
        postItem.innerHTML = post.title.rendered;
        postsContainer.appendChild(postItem);
      });
    })
    .catch(error => console.error('Ошибка загрузки постов:', error));
}

wpchecker_fetch_posts();

Этот код загружает последние записи и выводит их заголовки в элемент с ID posts.

Как реализовать бесконечную прокрутку через REST API

Одна из популярных задач — подгрузка новых записей по мере прокрутки страницы. Для этого REST API поддерживает пагинацию через параметры page и per_page.

Пример запроса для второй страницы с 5 постами на странице:

https://ваш-сайт.ru/wp-json/wp/v2/posts?page=2&per_page=5

Реализуем простой скрипт, который при достижении низа страницы подгружает новые посты:

let currentPage = 1;
const postsContainer = document.getElementById('posts');

function wpchecker_loadMorePosts() {
  currentPage++;
  fetch(`https://ваш-сайт.ru/wp-json/wp/v2/posts?page=${currentPage}&per_page=5`)
    .then(response => {
      if (!response.ok) throw new Error('Нет больше постов');
      return response.json();
    })
    .then(data => {
      data.forEach(post => {
        const postItem = document.createElement('div');
        postItem.innerHTML = `<h3>${post.title.rendered}</h3><p>${post.excerpt.rendered}</p>`;
        postsContainer.appendChild(postItem);
      });
    })
    .catch(error => {
      window.removeEventListener('scroll', onScroll);
      console.log(error.message);
    });
}

function onScroll() {
  if (window.innerHeight + window.pageYOffset >= document.body.offsetHeight - 100) {
    wpchecker_loadMorePosts();
  }
}

window.addEventListener('scroll', onScroll);

Этот код автоматически подгружает по 5 постов при прокрутке страницы вниз, пока посты есть.

Использование кастомных эндпоинтов для REST API

Иногда нужно расширить стандартный API, добавив свои данные или логику. Для этого создадим кастомный эндпоинт в WordPress.

Добавим код в файл functions.php вашей темы или в собственный плагин:

add_action('rest_api_init', function () {
  register_rest_route('wpchecker/v1', '/custom-posts/', array(
    'methods' => 'GET',
    'callback' => 'wpchecker_get_custom_posts',
  ));
});

function wpchecker_get_custom_posts($request) {
  $args = array(
    'post_type' => 'post',
    'posts_per_page' => 5,
  );
  $query = new WP_Query($args);
  $posts = array();

  while ($query->have_posts()) {
    $query->the_post();
    $posts[] = array(
      'id' => get_the_ID(),
      'title' => get_the_title(),
      'excerpt' => get_the_excerpt(),
      'link' => get_permalink(),
    );
  }
  wp_reset_postdata();

  return rest_ensure_response($posts);
}

Теперь запрос по адресу https://ваш-сайт.ru/wp-json/wpchecker/v1/custom-posts/ вернёт 5 последних постов с выбранными полями. Это удобно для реализации специфичных запросов и оптимизации передачи данных.

Плагины для улучшения работы с REST API и динамическим контентом

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

Clearfy Pro — оптимизация и расширение возможностей WordPress, включая работу с API.
WPRemark — плагин для создания отзывов с динамической подгрузкой через API.
ABC Pagination — расширенные возможности пагинации, совместимы с REST API.

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

Безопасность и аутентификация при работе с REST API

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

WordPress поддерживает несколько методов аутентификации:

Cookie Authentication (для запросов с фронтенда при авторизованном пользователе)
OAuth
Basic Authentication через плагины
JWT (JSON Web Token) с помощью сторонних плагинов

Для примера, чтобы отправлять POST-запрос на создание записи от имени пользователя, нужно корректно передать авторизационные данные. Без этого сервер вернёт ошибку 401 Unauthorized.

Пример POST-запроса с Basic Authentication

fetch('https://ваш-сайт.ru/wp-json/wp/v2/posts', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Basic ' + btoa('username:password')
  },
  body: JSON.stringify({
    title: 'Новая статья через REST API',
    content: 'Содержимое статьи...',
    status: 'publish'
  })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Ошибка:', error));

Используйте подобные методы с осторожностью и обязательно через защищённое соединение HTTPS.

Итоги: динамический контент с REST API — практические советы

REST API — мощный инструмент для загрузки и управления контентом в WordPress. Для успешного использования:

Понимайте структуру REST API и используйте стандартные эндпоинты для публичных данных.
Для нестандартных задач создавайте свои кастомные эндпоинты.
Применяйте пагинацию и оптимизируйте запросы для экономии ресурсов.
Используйте современные JavaScript-инструменты для динамической подгрузки и отображения данных.
Обеспечьте безопасность при работе с приватными данными через аутентификацию.

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