ОБНОВЛЕНИЕ 16.06.2017:
Я обновил проект, чтобы использовать ReactRouter 4 и Webpack 2. Некоторые части были переработаны и упрощены. Включены ссылки на демонстрацию фронтенда React и бэкенда Wordpress.
WordPress - мощный инструмент для управления контентом. Но когда дело доходит до разработки на вершине, это может быть довольно неприятно. Безумная смесь циклов HTML и PHP в WordPress часто может оказаться трудной для понимания и сложной в обслуживании.
Но в конце туннеля есть свет! Начиная с версии 4.7 WordPress поставляется со встроенным REST API, и плагины больше не требуются. Это упрощает использование WordPress строго в качестве внутреннего хранилища данных или CMS, позволяя при этом создавать полностью настраиваемое клиентское решение по вашему выбору.
Вам больше не нужно иметь локальную установку WordPress и заниматься настройкой vhosts. Ваш локальный процесс разработки может быть ограничен созданием внешнего интерфейса, который связан с установкой WordPress, размещенной на удаленном сервере.
В этой статье я собираюсь использовать ReactJS для создания клиентской части приложения, React Router для маршрутизации и Webpack для объединения всего этого вместе. Я также покажу вам, как интегрировать расширенные настраиваемые поля, для тех из нас, кто полагается на него как на инструмент для создания интуитивно понятного решения для наших клиентов.
Стек выглядит так:
- ReactJs
- React Router v4
- Alt (для реализации Flux)
- Webpack v2
Репозиторий GitHub: https://github.com/DreySkee/wp-api-react
URL демонстрации веб-интерфейса React: http: // wp- api-react.surge.sh/
URL демонстрации серверной части Wordpress: http://andreypokrovskiy.com/projects/wp-api-react/wp-admin
Пользователь: демонстрация
Пройти: wp-react-demo
Настройка проекта
Назовем проект wp-api-react. Чтобы продолжить, первое, что вам нужно сделать, это включить это в свой package.json и запустить npm install:
Установите также webpack и webpack-dev-server глобально, если вы этого еще не сделали:
npm i webpack webpack-dev-server -g
Теперь в папке проекта создайте wepack.dev.js для конфигурации разработки и webpack.production.js с конфигурацией для сборки проекта для производства.
Вставьте это в webpack.dev.config.js:
А это в webpack.production.config.js:
Создайте папку «src» в корне проекта и создайте в ней index.html. Файл index.html будет включать этот фрагмент кода:
Теперь давайте добавим в проект еще несколько папок. Внутри папки «src» создайте папку «scripts», а внутри «scripts» создайте «components», «flux» и index.js файл. Такая структура поможет упорядочить файлы.
К настоящему моменту структура папок должна выглядеть так:
wp-api-react /
- node_modules /
- src /
- - скрипты /
- - - компоненты /
- - - flux /
- - - index. js
- - index.html
- package.json
- webpack.config.js
index.js - это точка входа для Webpack, которая будет содержать все маршруты для проекта. Давайте включим в файл React, React Router и базовую структуру маршрутизации:
index.js ссылается на компонент Home в импорте. Нам нужно создать его в папке «компоненты». Home.js будет компонентом шаблона для домашней страницы. Включите это в файл:
Если вы запустите npm start в терминале внутри папки проекта и откроете http: // localhost: 8080 / в браузере, вы увидите сообщение Hello world! сообщение. Если вы начнете изменять файлы, Webpack перезагрузит страницу за вас.
Флюс с Alt
Пришло время реализовать поток с помощью Alt. Вам нужно будет создать три новые папки внутри папки flux: alt, store и actions:
wp-api /
- node_modules /
- src /
- - scripts /
- - - поток /
- - - - alt /
- - - - действия /
- - - - магазины /
- - - компоненты /
- - - - Дома. js
- - - index.js
- - index.html
- package.json < br /> - webpack.config.js
Создайте Alt.js внутри папки «alt» и вставьте это в файл:
Все, что делает этот файл, - это экспорт экземпляра Alt, который мы будем использовать в магазинах и действиях.
Создайте DataActions.js в папке действия. В этом файле будет вся логика для получения данных из конечных точек WordPress REST API. Для разговора с API мы будем использовать axios. Включите это в DataActions.js:
Не забудьте заменить URL-адрес примера установки WordPress своим.
Создайте DataStore.js в папке «магазины». Этот файл будет прослушивать getSuccess() метод DataActions.js, который возвращает данные из WordPress API. Затем он будет хранить и обрабатывать данные. Вставьте это в DataStore.js:
Чтобы получить данные из API WordPress и сделать их доступными для приложения, вам нужно включить DataActions.js в index.js и обернуть функцию рендеринга в DataActions.getPages(). Возвращенный ответ позже будет использоваться для динамического создания маршрутов:
Теперь каждый раз, когда приложение запускается, DataActions.getPages() вызывает конечную точку WordPress API и сохраняет возвращенные данные в DataStore.js.
Чтобы получить к нему доступ, просто включите DataStore.js в любой компонент и вызовите соответствующий метод. Например, давайте поместим все данные в Home.js файл и console.log он:
После того, как Webpack обновит страницу, вы должны увидеть возвращенный объект данных в консоли:
Object {pages: Array[1], posts: Array[1]}
Динамические маршруты
В настоящее время в приложении не задано никаких маршрутов, кроме индексного маршрута. Если у вас есть несколько страниц, созданных в бэкэнде WordPress, скорее всего, вы хотите, чтобы они были доступны для внешнего интерфейса. Чтобы динамически добавлять маршруты в React Router, нам нужно добавить еще один метод в index.js, назовем его buildRoutes():
Включите {this.buildRoutes(response)} в React Router сразу после <Route path=”/” component={ Home } exact />. Метод просто перебирает все страницы, возвращаемые API WordPress, и возвращает новые маршруты. Обратите внимание, как для каждого маршрута добавляется компонент «Дом». Это означает, что компонент «Дом» будет использоваться для каждого маршрута.
Допустим, в WordPress есть страница с меткой «about ». Если вы перейдете к маршруту для этой страницы «/ about», он загрузится, но вы все равно увидите то же сообщение «Hello World». В случае, если вам нужен только один шаблон для каждой страницы, вы можете оставить его как есть и получить данные для конкретной страницы, вызвав DataStore.getPageBySlug(slug) и предоставив текущий слаг страницы.
Однако в большинстве случаев вам понадобится несколько шаблонов для разных страниц.
Шаблоны страниц
Чтобы использовать шаблоны страниц, нам нужно сообщить React, какой шаблон использовать с той или иной страницей. Мы можем использовать ярлык страницы, который возвращается API, для сопоставления шаблонов с разными маршрутами.
Предположим, у нас есть две страницы с ярлыками «главная» и «о». Нам нужно создать объект, который сопоставляет ярлыки страниц с путями компонентов React. Назовем шаблоны объектов и включим их в index.js:
Мы также внесли изменения в метод buildRoutes(), чтобы требовать правильный компонент. Не забудьте создать компонент About.js для сопоставления заголовка «about».
Чтобы получить данные для конкретной страницы, все, что вам нужно сделать, это вызвать метод DataStore.getPageBySlug(slug) и предоставить текущий ярлык страницы:
render() {
let page = DataStore.getPageBySlug(‘about’);
return (
<div>
<h1>{page.title.rendered}</h1>
</div>
);
}
Динамическая навигация
Теперь мы собираемся добавить глобальную навигацию, которая будет отражать все ссылки на серверные страницы WordPress. Сначала создайте Header.js компонент в папке «components»:
Мы получаем все страницы из WordPress с помощью DataStore.getAllPages(), затем сортируем их по «menu_order» с lodash и просматриваем их в цикле, чтобы выплюнуть <Link /> маршрутизатора React. Обратите внимание, что маршрут домашней страницы исключается из массива allPages и включается в качестве отдельной ссылки.
Включите компонент Header.js в index.js, и вы увидите динамическую навигацию на каждой странице:
Расширенные настраиваемые поля
Большинство разработчиков WordPress знакомы с плагином Advanced Custom Fields. Это делает WordPress CMS полностью настраиваемой и удобной для пользователя. К счастью, получить доступ к данным ACF с помощью WordPress API очень просто.
Для получения данных ACF от конечных точек API нам необходимо установить еще один плагин под названием ACF to REST API. Это будет включать свойство acf в объект, возвращаемый API WordPress. Вы можете получить доступ к полям acf следующим образом:
render() {
let page = DataStore.getPageBySlug(‘about’);
let acf = page.acf; // Advanced Custom Fields data
return (
<div>
<h1>{acf.yourCustomFieldName}</h1>
</div>
);
}
Следующие шаги
Хорошо, мы рассмотрели наиболее распространенный вариант использования администратора WordPress CMS вместе с интерфейсом React.
Следующими шагами может быть добавление стиля для проекта в Less или Sass. Или, возможно, расширение файла DataAction.js путем добавления дополнительных вызовов конечных точек API для получения дополнительных данных, таких как комментарии, категории и таксономии.
Я настоятельно рекомендую ознакомиться с официальным Руководством по WordPress REST API, где функциональность API хорошо документирована. Там вы найдете информацию о CRUD, разбивке на страницы, аутентификации, запросах, создании пользовательских конечных точек и многом другом. Эти ресурсы помогут расширить то, что мы здесь создали.
Андрей Покровский - старший разработчик в Гигариф
Если вы зашли так далеко, вы могли бы стать разработчиком, который отлично подошел бы Gigareef. В настоящее время мы ищем талантливых разработчиков для работы над проектами, включающими проекты ReactJS / MEAN Stack / Handlebars / Node.
Отправьте электронное письмо на адрес [email protected] и расскажите нам немного о себе.
Гигариф, где процветают технологии
