WordPress REST API: функция CMS следующего поколения

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

В чем секрет WordPress? Легко — это самый простой, но самый расширяемый способ управления вашим контентом. Однако какое-то время WordPress, казалось, отставал.

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

В то время как WordPress построен — и будет продолжать строиться — на PHP, WP REST API — это попытка создать мост между наследием ядра PHP WordPress и потенциалом и мощью веб-приложений JavaScript, а также нативных мобильных приложений. и настольные приложения.

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

Внедрение REST API в WordPress

Если вы думаете, что WP REST API появился из ниоткуда, вы ошибаетесь.

Добавление совершенно новой функции в WordPress — непростая задача. Будучи программным обеспечением с открытым исходным кодом, разработка WordPress зависит от сообщества в целом, чтобы добиться прогресса.

Разработка API началась несколько лет назад в виде отдельного подключаемого модуля, который позволял разработчикам экспериментировать с проектом и вносить в него свой вклад в контролируемой среде.

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

WordPress 4.4 под кодовым названием Clifford перенес начальную инфраструктуру проекта в ядро ​​WordPress, а конечные точки не появлялись до WordPress 4.7 под названием Vaughan.

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

Теперь, когда первоначальные конечные точки контента были объединены во все текущие версии WordPress, разработчики плагинов и авторы тем могут экспериментировать с новыми захватывающими способами получения, просмотра и изменения данных за пределами традиционного интерфейса wp-admin.

Разрушая аббревиатуры: от HTTP к JSON REST API

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

HTTP является основой для большей части веб-трафика, с которым мы сталкиваемся ежедневно. Если вы вводите URL-адрес в браузере, вы делаете запрос . Соответствующий сервер получает ваш запрос и предоставляет ответ . Эта транзакция лежит в основе почти всего, что мы делаем в Интернете. Браузеры отправляют запросы, а серверы предоставляют ответы.

Тип запроса, который мы делаем, может повлиять на тип ответа, который мы получаем. В большинстве случаев мы отправляем простой GET -запрос: «Окей, Google, ПОЛУЧИ мне свою целевую страницу». Гугл дает ответ.

По мере того, как Интернет становился более интерактивным, мы начали использовать преимущества других HTTP-запросов, включая PUT , POST и DELETE .

Например, мы заполняем строку поиска на веб-сайте: «Окей, Google, ОТПРАВЬТЕ мой адрес электронной почты и пароль на свою страницу входа». Google начинает новый сеанс для нас и предоставляет другой ответ.

Этот протокол является основной основой, на которой мы строим наши сайты WordPress.

Мы используем формы и PHP для получения и отправки данных в нашу базу данных. Вопреки распространенному мнению, эта базовая основа WordPress не изменится в ближайшее время. Все, что сейчас делает WordPress, — это предоставляет разработчикам новый способ взаимодействия с их данными WordPress через RESTful API.

Передача репрезентативного состояния (REST)

Разработчики WordPress должны быть знакомы с API в целом, такими как API Shortcode и API параметров. Эти API определяют функциональность компонентов, составляющих WordPress, поэтому авторы тем и плагинов могут расширять основные возможности WordPress. Однако WP REST API немного отличается.

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

Существование WP REST API, особенно после WordPress 4.7, означает, что весь контент вашего сайта, включая посты, страницы, комментарии и любые общедоступные метаданные, теперь доступен напрямую в виде необработанных данных. Это также означает, что вы можете вносить изменения в эти данные вне традиционного wp-admin, если хотите, возможно, через мобильное или настольное приложение.

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

JSON — что случилось с XML?

Ветераны WordPress имеют большой опыт работы с XML, распространенным форматом для обмена контентом между сайтами.

Подобно XML, JSON — это просто механизм, который позволяет нам легко передавать данные, объединяя их в определенный синтаксис. JSON на самом деле является строкой, текстовым представлением объекта JavaScript, хранящим ваши данные в наборе пар ключ-значение. Обычное JSON-представление записи WordPress может выглядеть так:

 { “id”: 1, “title”: { “rendered”: “Hello World” }, “content”: { “rendered”: “Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!” } }

(Вы можете использовать инструмент форматирования JSON для предварительного уточнения ответа JSON, если это необходимо.)

Полный ответ JSON через WP REST API будет содержать дополнительную информацию о сообщении, включая метаданные. Удобно объединяя эти данные в формат JSON, вы можете взаимодействовать с вашим контентом WordPress новыми и интересными способами.

Не случайно JSON лучше всего сочетается с JavaScript. По мере того, как все больше разработчиков WordPress начинают «глубоко изучать JavaScript», мы будем видеть все более и более продвинутое использование WordPress в качестве серверной части.

Как мы находим данные: следуйте маршруту до конечной точки

Доступ ко всем данным вашего сайта через REST API так же прост, как создание URL-адреса.

Для любого сайта WordPress с версией не ниже 4.7 добавьте следующую строку в конец URL-адреса вашего сайта: /wp-json/wp/v2 (например, http://example.com/wp-json/wp/v2 ). Вставьте этот URL в свой браузер и посмотрите, что появится.

Результат, вероятно, выглядит как большой беспорядок данных, если только вы не установили расширение для браузера, очищающее JSON. Этот большой беспорядок данных — это контент и метаинформация вашего конкретного сайта WordPress в формате JSON.

Загружая этот контент, вы только что определили маршрут и попросили свой браузер ПОЛУЧИТЬ его для вас.

Маршрут — это URL-адрес, сопоставленный с определенным методом. Ядро WordPress считывает этот маршрут, где каждая косая черта '/' представляет определенный путь или параметр, которому следует следовать.

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

Примером конечной точки может быть «/wp-json/wp/v2/posts/1», где мы добавили пути «/posts» и «/1». Эта конкретная конечная точка говорит нашему сайту просмотреть наши данные, получить наши сообщения и получить сообщение с идентификатором 1.

Что делает REST API таким полезным, так это тот факт, что он расширяемый, а это означает, что вы можете брать любые данные на своем веб-сайте и добавлять их в качестве конечной точки. Большая часть основных функций WordPress в настоящее время поддерживается (или скоро будет) поддерживаться.

Однако разработчики тем и плагинов могут начать добавлять свой собственный контент и настройки в качестве конечных точек, позволяя пользователям взаимодействовать со своими веб-сайтами по-новому.

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

Заголовки и аутентификация

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

Если вы перейдете к «инструментам разработчика» вашего браузера, вы сможете проверить заголовки HTTP на наличие любого ресурса, загруженного в окно браузера, включая файлы HTML, таблицы стилей CSS, изображения и многое другое.

Первый заголовок, который следует рассмотреть, — это Request Method , который напрямую соответствует тем HTTP-запросам, о которых мы узнали ранее. Здесь вы, скорее всего, увидите GET в качестве метода запроса, если мы просто просматриваем страницу.

Приложение, вызывающее ваш REST API, может изменить метод запроса заголовка на POST.

Метод POST говорит вашему веб-сайту ввести новые данные или изменить существующие данные в вашей базе данных WordPress. Отправляя информацию методом POST, другие приложения могут изменять ваши данные без входа в wp-admin.

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

ПРИМЕЧАНИЕ. Однако методы аутентификации вызовов вашего REST API еще не завершены, что делает аутентификацию самым большим препятствием для входа для разработчиков, желающих работать с REST API для добавления или изменения данных.

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

Пример приложения WP REST API

Что делает WP REST API таким мощным, так это тот факт, что он согласован, поэтому мы можем ожидать одних и тех же основных результатов от любого сайта, на котором работает WordPress 4.7 или выше. Тем не менее, WordPress — это распределенный API, а это означает, что нет единого места, откуда можно получить все данные.

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

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

Наконец, мы обязательно добавим ссылку, чтобы прочитать полный текст статьи на исходном веб-сайте.

Фаза 1: Получение последних сообщений

Мы начнем с быстрой настройки экземпляра Vue и подключения его к элементу. Мы также включим Bootstrap, чтобы у нас была сетка и основные стили для элементов формы, которые мы добавим позже.

Когда мы определяем данные, нам понадобится место для хранения имени сайта (которое не включено в ответ по умолчанию), URL-адрес и сообщения, как только мы их получим. Вот пример:

 { “name”: “wordpress.org”, “url”: “https://wordpress.org/news/wp-json/wp/v2/posts?per_page=3”, “posts”: [] }

Вы заметите, что мы также добавили наш первый параметр в конец URL, per_page . Как правило, WP REST API разбивает результаты на страницы по тем же правилам, что и в обычном цикле WP_Query. Мы ограничим наши запросы первыми тремя сообщениями.

Далее мы определим метод loadPosts() , который будет перебирать наш список источников, получать результаты с помощью vue-resource и заполнять пустой массив posts каждого источника результатами.

 loadPosts : function(){ var self = this; self.sources.forEach(function(source, index){ self.$delete(source, 'posts'); // Get API with vue-resource self.$http.get(source.url).then(function(response) { self.$set(source, 'posts', response.data); }, function(response) { console.log('Error'); }); }); }

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

 mounted : function(){ this.$nextTick(function(){ // Load posts on initial page load this.loadPosts(); }); }

Сохранение loadPosts() в качестве отдельного метода пригодится в будущем, когда мы начнем делать несколько вызовов API. В нашем HTML мы будем использовать простые директивы рендеринга списка Vue и синтаксис шаблона для вывода всех наших сообщений.

См. встроенную ручку для рабочей демонстрации:

См. Пример поиска Pen WP REST API (первый этап) Брайана Коордса (@bacoords) на CodePen.

Фаза 2: фильтрация результатов

Давайте добавим боковую панель и создадим фильтры для отображения/скрытия различных источников. Для этого мы добавим к объекту sources новое свойство, логическое значение, которое мы назовем on .

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

Мы будем использовать стороннюю библиотеку Moment.js для преобразования даты в более читаемый формат.

 filters: { // Using Moment.js to convert post date to a readable format prettyDate: function(value){ // Return if date is empty if(!value) return ''; // Convert date to Moment.js var date = moment.utc(value); // Return formatted date return date.format("MMM DD, YYYY,"); } },

См. встроенное перо для рабочей демонстрации:

См. Пример поиска Pen WP REST API (первый этап) Брайана Коордса (@bacoords) на CodePen.

Заключительный этап: поисковые запросы

Здесь мы добавим новый параметр в наш запрос API. Мы уже добавили параметр per_page=3 , чтобы ограничить количество результатов, которые мы получаем с каждого сайта. Если в строке поиска что-то написано, мы добавим это как дополнительный параметр.

Это позволит нам использовать встроенную функцию поиска каждого сайта, как если бы мы запрашивали панель поиска на этом веб-сайте.

Мы добавим панель поиска и привяжем ее к переменной с помощью директивы Vue v-model .

Вместо того, чтобы сразу вызывать все API, когда пользователь начнет печатать, мы добавим кнопку и привяжем событие к отправке формы. Затем мы добавим в наш экземпляр Vue метод, который добавляет параметры поиска (конечно, в кодировке URL) к URL-адресу.

 generateUrl : function(source){ var self = this; // Add search parameters. if(self.searchQuery){ return source.url + '&search=' + encodeURI(self.searchQuery); }else{ return source.url; } }

См. встроенное перо для рабочей демонстрации:

См. Пример поиска Pen WP REST API (первый этап) Брайана Коордса (@bacoords) на CodePen.

Хотя это простой пример WP REST API, мы могли бы представить потенциальное приложение для чего-то подобного в самом WordPress. Например, уже есть метабокс «Новости WordPress».

Мы могли бы легко преобразовать эту демонстрацию в плагин WordPress, отобразив ее на панели управления WordPress. Теперь мы интегрировали возможность поиска помощи на некоторых ведущих сайтах WordPress и учебных сайтах по веб-дизайну прямо с нашего собственного веб-сайта.

Будущий потенциал REST API

Хотя приведенный выше пример лишь поверхностно описывает возможности WP REST API, он должен передать некоторые возможности, которые начинают появляться, когда вы начинаете играть с данными. Независимо от того, используется ли он для улучшения взаимодействия с пользователем на самом веб-сайте или для сбора и обработки данных из внешнего источника, это мощный инструмент.

Хотя некоторые отраслевые эксперты выражают обеспокоенность по поводу возможности «удаления» вашего контента и его отображения в другом месте, важно помнить, что эта функция аналогична RSS-каналам, и для тех, кто поддерживает сайт, жизненно важно иметь четкий контроль над тем, какие данные есть и есть. не публичный.

По мере того, как WP REST API становится все более укоренившимся в структуре WordPress, мы начинаем видеть его эффекты, возможно, даже не осознавая этого. Примеры варьируются от простых (Chris Coyier's Quotes on Design) до сложных одностраничных приложений (сайт Guggenheim).

Еще один популярный вариант использования WP REST API — разработка мобильных приложений.

Поскольку контент доступен через REST API, разработчики могут создавать собственные приложения для iOS и Android и избегать дублирования источников данных.

Когда пользователи взаимодействуют с этими мобильными приложениями, они смогут извлекать и напрямую преобразовывать данные исходного веб-сайта, при этом разработчику не нужно создавать для этого какую-либо сложную инфраструктуру.

Однако эти ориентированные на посетителей приложения REST API — это только начало, поскольку реальные последствия гораздо глубже. Одна из целей основной команды разработчиков — начать использовать его во всем интерфейсе wp-admin.

С будущими обновлениями WordPress мы начнем заменять admin-ajax в пользу API, что, как мы надеемся, повысит скорость основных функций, таких как редактирование меню или публикация сообщений.

Потенциально это может идти рука об руку с повышенным вниманием WordPress к настройщику и редактору как к удобным отправным точкам для новичков в WordPress.

Хотя WP REST API чрезвычайно полезен сам по себе, многое еще предстоит сделать. API не завершен. Есть еще дополнительные функции и конечные точки, которые нужно добавить.

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

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