Иногда может быть полезно встроить приложение React на страницу WordPress (многоэтапный опрос, приложение погоды, система бронирования, внешний источник данных, примеры бесчисленны). Это вполне выполнимо, но может быть сложно из-за реализации React в WordPress.
Начиная с версии 5 (появление Гутенберга), WordPress включает React и позволяет разработчикам получать к нему доступ через уровень абстракции (подробности wp.element и причины его существования можно найти здесь), и вы необходимо обращаться к этой оболочке при разработке приложения React внутри WordPress, чтобы оно работало гладко.
В этой статье я постараюсь рассказать вам, как включить страницу React на сайт WordPress, добавить ее в шаблон или использовать плагин/шорткод.
Предпосылки
Чтобы продолжить, вам нужно как минимум:
- Локальная установка WordPress
- От базового до среднего понимания концепций WordPress, таких как пользовательские шаблоны, разработка плагинов, настройка темы.
- Базовые знания React и JS
- Базовые знания управления пакетами узлов, скриптов, webpack
Основы
Как упоминалось ранее, WordPress предлагает уровень абстракции React, который мы можем использовать, и пакет (@wordpress/scripts), который позволяет нам легко и просто интегрироваться.
Уровень абстракции уже содержит React, ReactDom, useEffect…и т. д., поэтому вам не нужно будет импортировать их в приложение, если вы правильно используете wp.element.
Кроме того, пакет Node будет содержать все скрипты, необходимые для создания приложения таким образом, чтобы WordPress мог правильно его использовать (например, в одном файле).
Подходы
Есть много способов включить приложение React на страницу WordPress, я подробно расскажу о двух методах, которые я использую в настоящее время:
- На основе шаблона: мы включим наше реагирующее приложение в нашу тему и добавим его с помощью
function.php. Этот подход полезен, если вам нужно, чтобы ваше приложение работало по всему сайту (например, в верхнем или нижнем колонтитуле) или если вы запускаете его внутри пользовательского шаблона страницы. - Плагин/шорткод: мы создадим (базовый) плагин, который предоставляет шорткод, который будет отображать приложение React. Этот метод можно использовать, если вам нужно, чтобы ваше приложение работало на большем количестве страниц или сообщений, и вам нужно немного больше гибкости (например, позиционирование).
Метод шаблона
Прежде всего, вам нужно перейти в основную папку шаблона и настроить package.json fille с помощью следующей команды:
npm init
После этого вы можете установить скрипты WP, используя:
npm install @wordpress/scripts --save-dev
Когда модули будут установлены, мы можем добавить сценарии сборки/компиляции в файл package.json.
Откройте package.json и добавьте следующее в раздел сценариев (позже мы увидим, как использовать эти сценарии:
Последнее, что вам нужно, все еще в папке вашей темы, это добавить совместимый с WordPress файл конфигурации веб-пакета webpack.config.js:
Теперь мы готовы приступить к кодированию нашего приложения React, создайте папку src в каталоге вашей темы и добавьте App.jsи index.jsфайлы.
В index.js мы используем метод рендеринга, который не импортируется из ReactDom, но мы получаем его из wp.element, остальное — базовый React, мы импортируем приложение и визуализируем его внутри элемента с помощью id 'мое-реагирующее-приложение'
В App.js мы пишем наше основное приложение React, не забывайте, что если вам нужно что-то из React или ReactDOM, вам не нужно будет это импортировать, но оно доступно из wp.element, например , если вам нужно useEffect или useState, вы просто используете:
const {useState, useEffect} wp.element
Теперь мы готовы отобразить наше минимальное приложение на странице WordPress.
Теперь мы скомпилируем его с помощью следующей команды:
npm run build
Это создаст наше приложение в одном файле index.js, который будет помещен в папку build, чтобы мы могли поставить его в очередь из function.php следующим образом:
Не забудьте часть [‘wp-element’], это зависимость Javascript, которая укажет, что вам понадобится React для внешнего интерфейса.
Последний бит — изменить шаблон страницы (или сообщения, или заголовка, или нижнего колонтитула), чтобы включить следующий фрагмент кода:
<div id="my-react-app"></div>
Где вы хотите, чтобы отображалось приложение React.
Разработка без перестроения
Во время разработки перестроение приложения для каждого изменения может быть утомительным, поэтому вы будете использовать следующий скрипт:
npm run start
Он будет постоянно проверять наличие изменений в вашей папке src и перестраивать приложение после сохраненных изменений, поэтому вам не нужно будет постоянно перестраивать приложение.
Метод плагина/шорткода
Используя этот метод, мы создадим базовый плагин, который выставит шорткод, приложение React будет отображаться там, где найден шорткод.
Прежде всего, вам нужно создать и активировать плагин-скелет:
перейти к папку вашего плагина и создайте каталог (например, reactplug), внутри этого каталога создайте файл reactplug.php и заполните его основной информацией о плагине:
<?php /** * Plugin. * * @package reactplug * @wordpress-plugin * * Plugin Name: React in WP * Description: Add React app via shortcode * Author: popeating * Author URL: https://popland.it * Version: 1.0 */ /**
Затем настройте среду, как в части «Шаблон», на этот раз работая с папкой вашего плагина, инициализируйте package.json, установите сценарии WP, добавьте раздел сценариев, создайте файл webpack.config.js, добавьте файлы App.js и index.js в новый создал папку src, собрал скрипт с npm run build
На этом этапе вернитесь к файлу вашего плагина и добавьте некоторые базовые функции, чтобы добавить шорткод в WordPress и поставить скрипты в очередь:
Как и прежде, мы ставим скрипт в очередь (с его зависимостью от wp-элемента) и регистрируем новый шорткод, который будет отображать <div id="my-react-app"></div>, который является точкой входа нашего приложения React.
Теперь вы можете использовать шорткод на странице (или в сообщении), где вы хотите, чтобы приложение React отображалось.
Как упоминалось ранее, во время разработки вы можете использовать
npm run start
Чтобы автоматически создавать приложение при изменении.
Что дальше
Отсюда можно многое улучшить, например, скрипты можно загружать условно (загружая их только для определенного типа поста, или если страница имеет определенное имя или шаблон). Вы можете передавать данные в приложение React через шорткод. Также с помощью этого шаблона вы можете преобразовать шорткод в виджет, который можно использовать на боковой панели или в нижнем колонтитуле.
Больше контента на plainenglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Получите эксклюзивный доступ к возможностям написания и советам в нашем сообществе Discord.
