Hello, WP REST API!

Сказать с полной уверенностью про то, что данная статья актуальна я не могу. Однако она была написана мной прямо по горячим следам — вот прямо только что начал изучать WP REST API. Причины, почему я начал это делать только сейчас, всего лишь две:

1. мне хватало стандартного (старого) функционала для запиливания нужного;
2. ещё полгода назад я практически не знал JS.

Да, я человек честный и ответственно заявляю, что до января сего года действительно его толком не изучал и имел отдалённое понятие о том, как оно работает (что, впрочем, не помешало мне написать некоторые статьи типа этой).

Но вернёмся к нашему REST’у. Первая его версия вышла аж в 2015 году в виде плагина, а уже в 2016 (вроде как) он вошёл в «коробку». Сейчас у нас уже версия 5.2 и он там 100% работает.

Теория

Что же представляет из себя WP REST API? По сути, это такой механизм, который предоставляет для разработчиков доступ к данным через определённые точки.

Если уйти в аллегорическое сравнение, то можно это представить как продавца в Макдаке за свободной кассой — вы ему посылаете определённый запрос (картошка фри, гамбургер и пепси), а он уже возвращает вам результат запроса.

Разработчиками WordPress такая точка входа:

https://yousitename.ru/wp-json/

Да, на каждом WordPress-сайте можно (если это не отключено) попробовать запросить json-данные.

Практика

Итак, начнем помаленьку. В тестировании и разработке будем использовать мой сайт, но в принципе, можно использовать любой, работающий на WordPress 5 версии.

Для начала посмотрим, что же нам даёт обращение по адресу https://anatolykulikov.ru/wp-json/

Капитан с мест сообщает, что мы получаем в ответ json-файл. Теперь нам нужно его получить с помощью js и разобрать на составляющие. Код достаточно простой:

var xhr = new XMLHttpRequest();
var response;
xhr.open('GET', 'https://anatolykulikov.ru/wp-json', false);
xhr.send();
if (xhr.status != 200) {
  console.log(xhr.status + ': ' + xhr.statusText);
} else {
  response = JSON.parse(xhr.responseText);
}
console.log(response);

С помощью данного запроса мы получаем всё тот же json-файл и с помощью функции JSON.parse() создаём новый объект. Теперь все намного понятнее!

Вот уже данные более-менее понятные данные, с которыми можно поработать. Они пока только в консоли, но это не беда. Вот только вернулись нам не данные с контентом/страницами/постами, а общая информация по данному блогу.

Это конечно круто, но нам бы инфы. А вот для того, чтобы получить посты/страницы, нужно обратиться по адресу https://anatolykulikov.ru/wp-json/wp/v2/posts.

Вот теперь мы получили уже массив объектов. На данном этапе предлагаю Вам остановиться и посмотреть, что мы получили на руки — какие данные, что может быть полезного из этого всего.

После знакомства с содержимым объектов предлагаю сделать то, ради чего мы тут собрались. Здесь опять же не будет крутого и классного кода, только рабочая «грязная» версия. Мы пройдёмся по массиву и из каждого объекта будем создавать новый элемент на странице.

const main = document.getElementById('main');
for (i = 0; i < response.length; i++) {
    let div = document.createElement('div');
        div.className = "post";
        div.innerHTML = '<h2>' + response[i].title.rendered + '</h2><article>' + response[i].excerpt.rendered + '</article><a target="_blank" href="' + response[i].link + '">Открыть</a>'
    main.appendChild(div);
}

Ничего сложного здесь не предлагаю — мы просто вытащим из объекта следующие данные:

• response[i].title.rendered — название поста
• response[i].excerpt.rendered — краткое описание
• response[i].link — ссылка

В тело нашего html-документа добавим контейнер, в который будут выводиться результаты:

<main id="main"></main>

Ещё я добавил немного css (по вкусу), но этот ингредиент здесь — не главный. Оставляю его на Ваше усмотрение. Перегружаем страницу и — вуаля!

Особенно внимательные мои читатели наверняка уже заметили, что постов мы получили всего лишь 10 штук (у меня в блоге их больше, я гарантирую это).

Для того, чтобы получить записей чуть больше, мы не будем пользоваться настройками через админ-панель, а допишем немножко запрос:

https://anatolykulikov.ru/wp-json/wp/v2/posts?per_page=20

Теперь мы получим целых 20 записей. Знакомый запрос, не правда ли? Кроме него мы имеем доступ к ещё нескольким параметрам, с помощью которых можно организовать пагинацию:

• ?page — страница пагинации; если постов больше, чем их запрашивается за один раз, то можно просто взять и календарь перевернуть послать запрос с ещё одной порцией данных;
• ?per_page — количество записей, возвращаемых в одном запросе (разработчики рекомендуют использовать от 1 до 100 и я их прекрасно понимаю);
• ?offset — количество записей, которые нужно пропустить;
• ?order — c помощью этого параметра мы задаём порядок постов — по возрастанию (asc) или убыванию (desc);
• ?orderby — сортировка постов по какому-либо параметру (их достаточно много, посмотреть можно здесь).

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

Итог

В общем порядке и достаточно кратко мы рассмотрели использование REST API на живом примере. Конечно, в данной статье мы не использовали все плюшки и возможности. Мы даже картинки к постам не вывели.

Однако возможности примерно поняли. Что нам это даёт? В первую очередь, мы можем собрать js-приложение, которое будет использовать WordPress как backend-составляющую. Такое приложение может быть более гибким и интересным в плане возможностей, которые мы привыкли видеть в стандартных темах (без плагинов). А учитывая то, что сейчас есть библиотеки (типа Electron), которые позволяют создавать нативные приложения, то спектр возможных вариантов использования достаточно широк.

Кстати, с помощью незатейливого скрипта можно подтягивать данные с других сайтов. Разумеется, если CORS не будет против. Либо такой вариант — если у вас имеется целая экосистема из поддоменов и одна главная страница на основном домене, тогда подтягивать различные данные с поддоменных ресурсов будет достаточно просто.

В любом случае инструмент очень полезный и открывает широкие возможности в старом любимом WordPress.