Таким образом, вы обучили себя в качестве веб-инженера, и теперь хотите построить пылающий быстрый интернет-магазин для ваших клиентов. Список продуктов должен появиться в одно мгновение, и поиск должен тратить не более чем на долю секунды либо. Это вещи мечты?
Только не это. Ну, по крайней мере, это ничего, что не может быть достигнуто с сочетанием WordPress’ REST API и React, современная библиотека JavaScript.
Подожди, что? WordPress REST API?
Да, WordPress REST API поможет вам построить задний конец фундамент для вашего веб-приложения. Это хороший выбор для технологии бэк-энда вашего веб-приложения, если вы строите решение, управляемое контентом. WordPress будет бесперебойно работать с другими технологиями, а также; Вы можете использовать Node.js в качестве фокуса вашего приложения для подключения к другим службам RESTful.
WordPress REST API является игра-чейнджер для WordPress, который теперь можно смело называть веб-приложений — не только CMS. Теперь, когда передний и задний конец полностью отделены, WordPress может быть использован в качестве мобильного приложения бэк-эндили или в качестве бэк-энда для любой системы упором на содержание.
Но почему WordPress? Причина: Вы будете поражены функциональными возможностями, которые возникают из коробки с WordPress. Вы получите обширное управление пользователями, управление средствами массовой информации и невероятно удобный для разработчиков набор AA для расширения вашей работы.
В этой статье я проведу вас через создание SPA (Одностраничное приложение) WordPress тему с помощью библиотеки JavaScript называется React, подключение к WP REST API.
Давайте перейти в строительство темы
Эта статья предполагает, что вы уже знакомы с различными существующими WordPress AIS, в частности те, которые управляют развитием тем для эстетики вашего сайта, и функциональности для плагинов вашего сайта. Я также предполагаю, что вы создали платформу разработки для WordPress, такие как стек LAMP в среде Linux или MacOS.
Для простоты, однако, я буду ссылаться только на абсолютные пути, как видимые с платформой XAMPP, которая используется с Windows.
Теперь, давайте создадим экземпляр WordPress в нашем localhost, назвав его «Небесный». Это название темы WordPress мы собираемся использовать, чтобы помочь нам установить направление для создания будущих тем, готовых к использованию с веб-приложений питание от WordPress REST API. Возможно, вы уже знакомы с очень любимой иерархией шаблонов WordPress, но с REST API у вас есть возможность открыть для себя что-то другое!
Затем нам нужно создать папку для темы в wp-contentthemes папке. Перейдите к C:xampphtdocscelestialwp-contentthemes (или эквиваленту) и создайте celestial папку. Добавьте эти файлы в celestial папку темы:
index.php Универсальный файл для темы.
style.css Это содержит информацию о теме (а не фактической CSS).
functions.php Написать функциональность и импорт файлов CSS и JS.
Добавьте файл изображения с именем, screenshot.jpg если требуется изображение для вашей темы, отображаемый внутри приборной панели.
Примечание: Код для каждого файла состоит из нескольких строк длиной и может быть найден на GitHub.
Далее, войдите в свой WordPress Dashboard, над головой к внешний вид и темы и выберите «Небесный» в качестве темы. Теперь, когда фонд на месте, давайте на создание темы.
Вы можете выбрать тему «Небесная», созданную вами из панели Тем на панели мониторинга.
Начало работы с реагировать и Webpack для темы
React — это очень популярная библиотека uI, поддерживаемая и поддерживаемая Facebook. Согласно результатам опроса разработчиков Stack Overflow 2017, «React является самым любимым среди разработчиков».
React: Библиотека JavaScript для создания пользовательских интерфейсов.
Для запуска проекта необходимо инициализировать проект как проект NPM (менеджер пакетов узлов). Это делается с командой npm init в терминале (после установки Node.js и NPM на вашем компьютере). Инициализация проекта подскажет вам определенную информацию о конфигурации. После успешной инициализации NPM создаст файл package.json в корневом каталоге темы. Этот файл будет содержать сведения о проекте и все зависимости проекта.
React теперь находится под лицензией MIT, поэтому мы будем использовать версию 16 React в качестве библиотеки JavaScript для этого проекта. React имеет некоторые интересные функции под капотом, такие как виртуальный DOM (представление документа в памяти) и имеет множество инструментов, окружающих его, таких как маршрутизатор react. React также используется в проекте WordPress ‘ Calypso — приборной панели для WordPress.com.
Теперь мы установим необходимые пакеты NPM для проекта:
Введите npm install --save react react-dom терминал и нажмите введите для установки пакетов. Использование npm для установки реагировать и реагировать-дом.
Поскольку мы строим тему как одностраничное приложение (SPA), нам нужна помощь такого инструмента, как Webpack. Мы будем писать код как различные компоненты, и Webpack поможет нам упаковать их все вместе и вывести их в виде единого файла .js или .css. Короче говоря, это модуль расслоение.
Webpack сначала будет установлен глобально на вашем компьютере. Для этого мы снова можем использовать NPM.
Введите npm install -g webpack команду, чтобы получить последнюю стабильную версию Webpack, установленную глобально в вашей системе.
Далее мы установим пакеты NPM, поддерживающие Webpack, в нашем приложении.
Перейти к package.json файл в моем git репо и скопировать остальные зависимости оттуда в ваш раздел зависимых package.json’s. Затем npm install снова запустите, чтобы установить все пакеты в рамках package.json.
Важно:Пожалуйста, обратите внимание, что module.exportsmodule я может rules[3]usepublicPath изменяться в зависимости от того, где ваши изображения dist вашего проекта расположены в localhost. Если это неправильно, изображения могут не отображаться правильно в веб-приложении.
После этого эти команды могут быть использованы для компиляции проекта:
webpackили npm run build для компиляции проекта, или
webpack --watchили npm run watch для компиляции проекта и просмотра изменений.
Примечание: Чтобы получить лучшее понимание Webpack, прочитайте эту статью Джозефа Циммермана на Smashing Magazine.
Расширение API WordPress REST
WordPress REST API поставляется с множеством различных конечных точек для извлечения сообщений, страниц, средств массовой информации и так далее. Тем не менее, они не всегда могут иметь все детали в своем ответе. Например, метод публикаций не дает URL-адрес изображения или имени автора. Поэтому мы должны делать отдельные вызовы для каждого из этих элементов.
Доступ к данным сайта WordPress с помощью простого в использовании HTTP REST API.
Но что делать, если вы хотите, чтобы ваши собственные данные появляются в сообщениях ответ? Вот где магия расширения REST API приходит дюйма Следующий код добавит две дополнительные переменные в ответ на запрос сообщений, а именно author_name и featured_image_src . Код находится в файле functions.php:
Расширение REST API дополнительными переменными в файле functions.php.
Глобальная переменная JavaScript
Есть определенные константы WordPress (или известный как «переменные»), которые мы будем использовать во всем приложении React. Это будет информация о различных маршрутах приложения (а затем быть WooCommerce конкретных них).
Эта переменная определена в файле functions.php. Он будет называться «CelestialSettings» и быть приложен к celestial-scripts , ручка для enqueued app.js файл:
Передача переменных WordPress (PHP) на передний конец.Вышеприведенный код показывает пример получения WordPress (PHP) переменных на переднем конце, важный и очень полезный метод при создании разъединение темы. Эта переменная объекта содержит название сайта, путь, URL для API и root и три переменные, относящиеся к WooCommerce (объясняется позже).
Реагировать и JSX
React отличается от остальных основных библиотек JavaScript. Я имею в виду, что мы обычно пишем JavaScript в нашем HTML. Однако, когда дело доходит до React, мы пишем HTML внутри нашего кода JavaScript. Чтобы быть более точным, мы пишем JSX внутри JS. JSX очень похож на HTML, но имеет несколько отличий. classАтрибут написан className как, например. Затем он преобразуется в простой JavaScript через Webpack и Babel и сохраняется в рамках app.js.
Есть, однако, несколько ограничений с написанием JSX. Например, в нашем методе может быть только один render() ребенок, который будет служить корневым элементом компонента. Однако преимущество в том, что отладить легче. Мы можем точно знать, где мы сделали ошибку, в то время как в обычном HTML наша ошибка, как правило, не будет отображаться явно. Мы будем писать JSX для этого проекта, и, следовательно, JavaScript файлы будут иметь расширение .jsx . Тем не менее, это также может быть, .js если вы предпочитаете так.
Создайте следующие файлы в src папке:
index.jsx(основной файл и тот, который содержит конфигурации маршрутизатора React)
header.jsx(компонент заголовка)
footer.jsx(компонент колонтитула)
posts.jsx(для архива сообщений)
post-list.jsx(компонент для отдельной должности в posts.jsx пределах)
post.jsx(для одного поста)
products.jsx(содержит все продукты из WooCommerce)
product.jsx(отображает один продукт от WooCommerce)
style.scss(содержать весь код CSS в формате SASS)
Структура папки SRC в Небесном проекте.
ReactDOM.render()
Файл index.jsx является корнем проекта. То, что я имею в виду, что это, index.jsx содержит компонент App, который оказывается DOM.
import { render } from 'react-dom'; // importing render from ReactDOM
const App = () => ( // defining the routes
<div id="page-inner">
<Header />
<div id="content">
<Switch>
<Route exact path={CelestialSettings.path} component={Posts} /> // the root path
</Switch>
</div>
<Footer />
</div>
);
// React Router
const routes = (
<Router>
<Route path="/" component={App} />
</Router>
);
render( // rendering to the DOM by replacing #page with the root React component
(routes), document.getElementById('page') // rendering the route
);
Остальные компоненты указаны в маршрутизаторе React и будут загружены при посещении различных маршрутов.
Так мы пишем модульные компоненты, где все различные компоненты в конечном счете заканчиваются на index.jsx.
Состояние против безастяных компонентов
Вы заметили бы компоненты, написанные в любом из следующих двух способов:
const App = () => (
class Post extends React.Component {
Первый способ заключается в том, как мы пишем агатовые компоненты, а второй является примером государственных компонентов. Апоприс означает, что компонент не имеет в нем «состояния». «состояние» — это, по сути, переменная, соотвествующие в компоненте, и каждый раз, когда переменная изменяется, компонент переиздарен. Компоненты состояния также известны как «умные компоненты». Таким образом, переменные состояния используются для внутренней коммуникации внутри этого компонента.
Второй тип, компоненты без гражданства, не имеют в них переменной состояния, а иногда и называются «Компоненты Тупого». Однако, как Испотечие Компоненты, они имеют «реквизиты», которые являются свойствами, передаваемыми им из родительских компонентов.
Компоненты состояния имеют методы жизненного цикла React, в то время как у Аабеза есть только render() метод, который является для него методом по умолчанию.
Методы реагирования на жизненный цикл
Это методы, называемые на разных стадиях жизненного цикла компонента, которые мы можем переопределить для запуска нашего собственного кода в этих случаях. Мы исследуем следующие методы в нашем приложении:
constructor() Вызывается перед установкой компонента.
componentDidMount() Вызывается сразу после установки компонента.
render() Метод, который называется визуализацией содержимого JSX (HTML).
componentDidUpdate() Вызывается при обновлении компонента.
componentWillUnmount() Вызывается при удалении компонента.
Мы собираемся использовать JavaScript Promises для получения данных из нашего API WordPress REST. Во-первых, у нас есть URL к REST API в наших функциях.php, где мы приложили его как переменную JavaScript, к которой мы можем получить доступ с переднего конца.
Мы будем использовать метод API получения API JavaScript для получения данных из различных конечных точек. Мы добавляем погрузчик, чтобы показать пользователю во время получения содержимого:
getMorePosts() {
var that = this;
var totalPages;
// adding a loader
jQuery("#loader").addClass("active");
this.setState({ page: this.state.page + 1 });
fetch(CelestialSettings.URL.api + "/posts/?page=" + this.state.page)
.then(function (response) {
for (var pair of response.headers.entries()) {
// getting the total number of pages
if (pair[0] == 'x-wp-totalpages') {
totalPages = pair[1];
}
if (that.state.page >= totalPages) {
that.setState({ getPosts: false })
}
}
if (!response.ok) {
throw Error(response.statusText);
}
return response.json();
})
.then(function (results) {
var allPosts = that.state.posts.slice();
results.forEach(function (single) {
allPosts.push(single);
})
that.setState({ posts: allPosts });
// removing the loader
jQuery("#loader").removeClass("active");
}).catch(function (error) {
console.log('There has been a problem with your fetch operation: ' + error.message);
jQuery("#loader").remove();
});
}
Получение данных из различных конечных точек с помощью погрузчика для обозначения процесса.
Использование маршрутизатора реакции
React Router — это библиотека, которая будет обрабатывать маршрутизм на стороне клиента для нашего приложения. Маршрутирование на стороне сервера возможно с помощью WordPress, но для достижения действительно SPA опыт нам нужна помощь React Router.
Начиная с версии 4, React Router был разбит на три пакета: react-routerreact-router-dom , и react-router-native . Мы будем использовать react-router-dom для этого проекта, так как это тот, который используется в веб-приложений.
Поскольку react-router-dom мы уже установлены, мы можем написать конфигурацию маршрутизатора внутри файла index.jsx. Код будет следующим:
Конфигурация маршрутизатора в файле index.jsx.Вышеупомянутый код будет заботиться обо всех размываниях, обрабатываемых в клиентской стороне. *В последней строке говорится, что любой другой маршрут, не упомянутый выше, приведет пользователя к странице ‘404 Not Found’.
<Link to="">Тег используется вместо <a href=””> тега для соединения между различными страницами с помощью маршрутизатора React:
Использование <Link to=""> тега для соединения между различными страницами.
Получение тестовых данных
Теперь, когда вы создали тему, пришло время добавить некоторые данные. Одним из способов добавления данных является создание собственного контента. Тем не менее, есть более простой (и лучше) способ добавить данные на наш сайт WordPress. Этот метод импортирует данные заполнителя из внешнего источника:
После установки импортера WordPress нажмите на Run Importer.
Нажмите «Выбрать файл» в импортере
Выберите загруженный файл и импортируйте данные теста WordPress Theme Unit
Теперь вы должны выбрать тему-единица-тест-data.xml файл и все содержание заполнителя в настоящее время на вашем сайте.
При правильном импортировании всех данных.
ВуКоммерция Интеграция
Теперь мы готовы к власти нашего магазина с помощью React. Для этой цели мы будем использовать файлы products.jsx и product.jsx, чей код похож на posts.jsx и post.jsx соответственно.
Мы добавим еще три переменные к CelestialSettings под ‘woo’ (см. Глобальную переменную JavaScript):
Url
consumer_key
consumer_secret
Потребительский ключ и секрет потребителя должны быть сгенерированы из панели мониторинга » WooCommerce — Настройки — API— Ключи/приложения.
Для Ву URL, вы должны вручную добавить его (так как WooCommerce позволяет передавать только по SSL, добавить URL с https, т.е.). https://localhost/celestial/wp-json/wc/v2/
Копируйте ключ потребителя и секрет потребителя и вставьте их в соответствующих местах в рамках functions.php. Это будет служить в качестве аутентификации для доступа к WooCommerce через aPI вызова.
Для получения дополнительной информации о API можно найти документацию WooCommerce REST API. В файле products.jsx есть код для заполнения магазина продуктами. Продукты могут быть добавлены админ омнитом с панели мониторинга. Просто перейдите на панель мониторинга и продукты : Добавить новые и ввести детали продукта.
Добавить новый продукт через приборную панель.
При нажатии на определенный продукт, вы будете приняты на странице product.jsx:
Индивидуальная страница продукта, отображаемый на основе файла product.jsx
Код для вышеуказанной страницы аналогичен post.jsx:
Код для файла product.jsx» alt'»Код для файла product.jsx
Постоянные
Для того, чтобы тема работала правильно, мы должны установить следующие постоянные ссылки в Dashboard — Настройки:
В соответствии с общими настройками и пользовательской структурой:http://localhost/celestial/posts/%postname%/
Под продуктами непостоянные ссылки — пользовательская база:/products/
Если вы не установите permalinks как выше, то тема не может работать как пожелано.
WooCommerce Исправить
Когда вы переходите к localhost / небесных / продуктов,скорее всего, вы получите пустое пространство, где продукты должны быть загружены. Это происходит потому, что WooCommerce нуждается в аутентифицированных запросах, в то время как наш localhost не https. Чтобы устранить проблему:
WooCommerce требует аутентифицированных запросов и покажет предупреждение, если localhost не https
Нажмите на ADVANCED
Теперь, если вы вернетесь к странице продуктов, элементы будут отображаться правильно.
Примечание:Если вы находитесь на Valet на Mac, вы должны запустить Valet Secure на вашем сайте, чтобы обеспечить местный сайт с сертификатом TLS. Это еще один способ решения проблемы.
Что такое ScrollMagic?
ScrollMagic — это библиотека, которая позволяет выполнять определенные действия при прокрутке страницы. Для использования ScrollMagic мы будем enqueue библиотеки ScrollMagic JavaScript в functions.php. Мы используем ScrollMagic для двух экземпляров в этом проекте:
Для ленивых загрузок в компоненте posts.jsx:
componentDidMount() {
var that = this;
window.onbeforeunload = function () { window.scrollTo(0, 0); }
// init ScrollMagic Controller
that.state.controller = new ScrollMagic.Controller();
// build scene
var scene = new ScrollMagic.Scene({ triggerElement: "#colophon", triggerHook: "onEnter" })
.addTo(that.state.controller)
.on("enter", function (e) {
if (that.state.getPosts && that.getMorePosts !== null) {
that.getMorePosts();
}
});
}
Ленивые погрузки постов в компоненте posts.jsx
Чтобы показать увядание в анимации для сообщений, появляющихся путем прокрутки сообщений и продуктов в posts.jsx и products.jsx компонентов соответственно:
componentDidUpdate() {
var FadeInController = new ScrollMagic.Controller();
jQuery('.posts-container .col-md-4.card-outer').each(function () {
// build a scene
var FadeInScene = new ScrollMagic.Scene({
triggerElement: this.children[0],
reverse: false,
triggerHook: 1
})
.setClassToggle(this, 'fade-in')
.addTo(FadeInController);
});
}
Применение увядание в анимации для сообщений, которые появляются как прокрутка происходит
Теперь мы готовы смотреть нашу тему с фронта. Перейдите к localhost/небесной в вашем веб-браузере и посмотрите вашу тему в действии.
И погладить себя по спине, потому что вы уже успешно создали тему!
Другие темы WordPress с библиотеками JavaScript
Если вы нашли это полезным, вы можете взглянуть на другие удивительные отделены WordPress темы, построенные с использованием современных библиотек JavaScript / рамки:
Foxhound: Первый отделен тему, чтобы сделать его в WordPress темы репозитория. Автор Келли Дван, эта тема использует React, Redux и React Router.
Anadama React:Другая тема того же автора, но с помощью Flux вместо Redux, и страница вместо реактивного маршрутизатора.
Уоллес: Автор Кирби, эта тема использует Angular с WordPress REST API.
Пикард: Написано Automattic себя, чтобы продемонстрировать возможности WordPress REST API.
Реагировать стих: Реагировать и Redux тему я написал на основе Foxhound.
Следующие шаги
Основные разделы, которые я хотел показать вам, уже сделали. Вы можете продолжить строительство проекта для получения дополнительных знаний. Вот некоторые рекомендации, которые вы могли бы продолжить:
Полноценный магазин с плагином WooCommerce, включая кассу и корзину;
Великолепный, сокрушительный, разящий (см. перевод smashing) независимый журнал о веб-разработке. Основан в 2006 году в Германии. Имеет няшный дизайн и кучу крутых авторов, которых читают 2 млн человек в месяц.
