Используйте WordPress с React для создания Headless CMS для вашего веб-приложения

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

В современных веб-приложениях система управления контентом также разработана для управления контентом веб-сайта. Это может добавить дополнительную нагрузку для разработчиков. Имея столько возможностей, которые предлагает Rest API , можно также подумать об использовании WordPress с React как автономной CMS для своих веб-приложений на основе JavaScript.

Так что же такое WordPress без головы?

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

Rest API позволяет разработчикам взаимодействовать с кросс-технологическими интерфейсами, если оба говорят на одном языке JSON. WordPress Rest API выдаёт данные в формате JSON, понятном для большого количества веб-технологий. JSON - это текстовое представление объектов JavaScript, которое содержит данные в паре "ключ-значение".

 "друзья": [
      {
        "id": 0,
        "name": "Гарриет Стэнли"
      },
      {
        "id": 1,
        "name": "Бентон Одом"
      },
      {
        "id": 2,
        "name": "Джеки Эдвардс"
      }
    ],

Сегодня я продемонстрирую мощь WordPress Rest API , используя его с React и WordPress в качестве автономной CMS для моего базового веб-приложения.

Преимущество использования Headless WordPress CMS

Платформа с открытым исходным кодом; WordPress предлагает большую гибкость для создания любого типа веб-сайта. Использование WordPress в качестве автономной CMS позволяет создавать интерфейс вашего веб-приложения с использованием любых веб-технологий и управлять его содержанием с помощью одной из самых популярных CMS.

Вы можете столкнуться с ситуацией, когда вам нужно добавить функцию блога в существующее веб-приложение, созданное с помощью React или Angular. Вместо того, чтобы кодировать полноценную систему управления контентом в нативном фреймворке; используйте безголовую WordPress CMS для управления контентом с помощью Rest API.

Настройка сайта WordPress

Начнем с настройки сайта WordPress, так как он будет действовать как источник данных для нашего внешнего приложения React.

Загрузите zip-файл плагина WP-Rest API из git и загрузите zip-папку в папку плагинов WordPress. После загрузки файла активируйте плагин. Это включит WordPress Rest API на вашем веб-сайте WordPress.

Теперь перейдите в «Настройки» → «Постоянные ссылки» и выберите «Название публикации» или «Пользовательская структура».

Поскольку мы работаем с вызовами API, загрузите расширение Chrome для Postman . В почтальоне введите URL-адрес в следующем формате:

https://example.com/wp-json/wp/v2/posts

Приведенный выше URL-адрес будет получать данные о записях на вашем сайте WordPress.

Загрузите плагин пользовательского интерфейса Custom Post Type для создания пользовательских типов сообщений. Этот пользовательский пост будет отображаться, когда мы будем использовать WordPress с React на следующем шаге.

Установите и активируйте плагин и продолжайте добавлять новый тип сообщения. В этом уроке я буду создавать собственный тип сообщения для Книги.

Внутри заголовка типа сообщения введите имя вашего настраиваемого сообщения.

Убедитесь, что для флажка Показать в REST API установлено значение true и также установлен базовый ярлык REST API. Это обязательно, если вы хотите использовать WordPress в качестве автономной CMS.

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

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

Я создал свою первую книгу, добавив образцы данных, а также отрывок из моего сообщения.

Чтобы убедиться, что данные доступны через API, нажмите URL-адрес внутри Postman.

Теперь URL-адрес должен выглядеть примерно так: https://exampe.com/wp-json/wp/v2/ books.

Мы также можем добавить дополнительные поля, такие как Publisher, с помощью ACF и ACF в плагины RestAPI .

Установите и активируйте оба плагина.

По умолчанию ACF не взаимодействует с WordPress Rest API, поэтому нам также необходимо загрузить плагин ACF REST API .

Используя плагин настраиваемых полей, я добавлю поле «Издатель» для своих книг.

Обязательно выберите нужный тип публикации из списка. После этого нажмите « Опубликовать ».

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

Начало работы с React

Что такое ReactJS

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

Настройка приложения React

Чтобы создавать приложения с помощью React, на вашем компьютере должны быть установлены следующие зависимости.

• NodeJS и NPM.
• Текстовый редактор, например Sublime или Visual Studio Code.
• Git для контроля версий (необязательно)

После настройки среды откройте командную строку и запустите следующий код, чтобы создать проект с ReactJS.

 npx создать-реагировать-приложение интерфейс

После создания приложения перейдите cd (смените каталог) в папку приложения и введите следующую команду, чтобы установить пакет Axios для вызовов API.

 нпм я аксиос

Теперь откройте папку в вашем любимом текстовом редакторе. Я использую код Visual Studio.

Запустите приложение, выполнив команду npm start.

Если все работает правильно, мы готовы создать наше веб-приложение с помощью React, используя WordPress в качестве автономной CMS.

Создайте новую папку « components » внутри папки src , а внутри папки « components » создайте новый файл « Books.js ».

Рендеринг данных публикации на ReactJS

Внутри файла Book.js мы будем получать данные из WordPress Rest API. Ниже приведен код, который запрашивает конечную точку Rest API - в моем случае это « / books » - и отображает данные в формате JSON.

 импортировать React, {Component} из 'react'
импортировать axios из 'axios';

экспортный класс Книги расширяет Компонент {
   state = {
       книги: [],
       isLoaded: ложь
   }

 componentDidMount () {
   axios.get ('https://wordpress-179008-1030625.cloudwaysapps.com//wp-json/wp/v2/books/')
       .then (res => this.setState ({
           книги: res.data,
           isLoaded: true
       }))
       .catch (err => console.log (err))
   }


   оказывать() {
      console.log (this.state);
       возвращение (
           <div>
              
           </div>
       )
   }
}

экспортировать книги по умолчанию

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

Теперь внутри файла App.js вызовите компонент " Книги", как показано ниже.

 импортировать React из React;
import './App.css';
импортировать книги из './components/Books';

function App () {
 возвращение (
   <div className = "App">
    <Книги />
   </div>
 );
}

экспортировать приложение по умолчанию;

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

Отображение данных публикации на ReactJS

Данные можно отобразить, добавив код внутри метода рендеринга.

 оказывать() {
       const {книги, isLoaded} = this.state;
       возвращение (
           <div>
               {books.map (book =>
               <h4> {book.title.rendered} </h4>
               )}
           </div>
       );
   }

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

Измените метод рендеринга внутри Bookk.js на что-то вроде:

 оказывать() {
       const {книги, isLoaded} = this.state;
       возвращение (
           <div>
               {books.map (book =>
               <BookItems key = {book.id} book = {book} />
               )}
           </div>
       );
   }

Теперь нам нужно отрендерить компонент BookItems.

Внутри BookItems.js добавьте следующий код:

 импортировать React, {Component} из 'react'
импортировать axios из 'axios';
импортировать PropTypes из 'prop-types';

класс экспорта BookItems расширяет компонент {
 
   оказывать() {
       const {название} = this.props.book;
       возвращение (
           <div>
              <h2> {title.rendered} </h2>
           </div>
       )
   }
}

экспорт BookItems по умолчанию

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

Примечание. Обязательно укажите ссылку на компонент BookItems внутри компонента «Книги».

Моя последняя версия BookItems.js выглядит примерно так:

 импортировать React, {Component} из 'react'
импортировать PropTypes из 'prop-types';
импортировать axios из 'axios';
класс экспорта BookItems расширяет компонент {

   state = {
       imgUrl: '',
       автор: '',
       isLoaded: ложь
   }

   static propTypes = {
       книга: PropTypes.object.isRequired
   }

   componentDidMount () {
       const {Feature_media, author} = this.props.book;
       const getImageUrl = axios.get (`https://wordpress-179008-1030625.cloudwaysapps.com//wp-json/wp/v2/media/$ {Feature_media}`);
       const getAuthor = axios.get (`https://wordpress-179008-1030625.cloudwaysapps.com//wp-json/wp/v2/users/$ {author}`);
      
       Promise.all ([getImageUrl, getAuthor]). Then (res => {

           console.log (res);
           this.setState ({
               imgUrl: res [0] .data.media_details.sizes.full.source_url,
               автор: res [1] .data.name,
               isLoaded: true

           });
       });
    }
 
   оказывать() {
       const {название, отрывок} = this.props.book;
       const {автор, imgUrl, isLoaded} = this.state;
       возвращение (
           <div>
              <h2> {title.rendered} </h2>
              <img src = {imgUrl} alt = {title.rendered} />
              <strong> {автор} </strong> <br/>
              <div опасноSetInnerHTML = {{__ html: excerpt.rendered}}> </div>
           </div>
       )
   }
}

экспорт BookItems по умолчанию

И вывод в браузере выглядит так:

Не самый красивый, правда? Ну, это потому, что стиль выходит за рамки этого урока.

Подведение итогов!

Сегодня я показал вам, как использовать WordPress с React в качестве автономной CMS для вашего веб-приложения. Код React также доступен на Git, чтобы вы могли его скачать. Однако это не ограничивается React. Вы также можете поэкспериментировать с VueJS, Angular или любым фреймворком JavaScript. С WordPress Rest API можно делать множество вещей. Нет предела, поэтому используйте WordPress для своего следующего веб-проекта.