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

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

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

Что такое безголовый WordPress?

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

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

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

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

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

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

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

Как настроить сайт WordPress для ReactJS

Давайте начнем с настройки сайта 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 UI для создания пользовательских типов сообщений. Этот пользовательский пост будет отображаться, когда мы будем использовать WordPress с React на следующем шаге.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Что такое ReactJS

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

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

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

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

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

 Интерфейс приложения npx create-реагировать

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

 npm и аксиомы

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

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

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

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

Как визуализировать данные публикации на ReactJS

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

 импортировать React, {Компонент} из «реагировать»
импортировать аксиомы из 'axios';

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

 компонентDidMount () {
   axios.get('https://wordpress-179008-1030625.cloudwaysapps.com//wp-json/wp/v2/books/')
       .then(res => this.setState({
           книги: рез.данные,
           isLoaded: правда
       }))
       .catch(ошибка => console.log(ошибка))
   }


   оказывать() {
      console.log(это.состояние);
       возврат (
           <дел>
              
           </div>
       )
   }
}

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

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

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

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

приложение функции () {
 возврат (
   <div className="Приложение">
    <Книги/>
   </div>
 );
}

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

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

Как отобразить данные публикации на ReactJS

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

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

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

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

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

Теперь нам нужно вместо этого отобразить компонент BookItems.

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

 импортировать React, {Компонент} из «реагировать»
импортировать аксиомы из 'axios';
импортировать PropTypes из 'prop-types';

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

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

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

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

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

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

   состояние = {
       imgURL: '',
       автор: '',
       isLoaded: ложь
   }

   статические проптипы = {
       книга: PropTypes.object.isRequired
   }

   компонентDidMount () {
       const {featured_media, author} = this.props.book;
       const getImageUrl = axios.get(`https://wordpress-179008-1030625.cloudwaysapps.com//wp-json/wp/v2/media/${featured_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(разрешение);
           это.setState({
               imgUrl: res[0].data.media_details.sizes.full.source_url,
               автор: res[1].data.name,
               isLoaded: правда

           });
       });
    }
 
   оказывать() {
       const {название, выдержка} = this.props.book;
       const {автор, imgUrl, isLoaded} = this.state;
       возврат (
           <дел>
              <h2>{title.рендеринг</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 для своего следующего веб-проекта.