Почему WordPress и React?

Последние несколько лет выявили тенденцию к улучшению разработки пользовательского интерфейса в среде WordPress с помощью таких фреймворков Frontend, как React и Vue. Помните об этом, когда видите ошибку React в консоли своего сайта. Источником ошибки может быть сторонний плагин React-app, а не ваши собственные усилия по разработке!

React уже давно используется для сторонних плагинов, например, плагин Yoast для SEO отображает виджеты на страницах администрирования WordPress с помощью приложения React. Теперь возможность разрабатывать приложения React в WordPress была облегчена с запуском Gutenberg. В основе редактора блоков Гутенберга лежит React.

В этой статье рассказывается, как добавить отдельное приложение React Create на свой сайт WordPress, а не о блоках Gutenberg React.

Контент React WordPress Headless и приложение React на существующей странице WordPress

Возможно, вы читали о безголовых проектах WordPress и React, которые позволяют отображать веб-сайт как приложение React из конечных точек WordPress API. Этот процесс не следует путать с предметом данной статьи. Здесь мы сосредоточены на рендеринге приложения React Create на определенной странице WordPress в админке WordPress или во внешнем интерфейсе сайта. В этой демонстрации мы «берем на себя» div, который уже определен внутри страницы.

Итак, чем отличается типичная установка развертывания React-App с приложением React, встроенным в WordPress? В обычном приложении сервер будет обслуживать файл index.html из папки «build», который содержит тег скрипта для загрузки пакета JavaScript приложения. Однако внутри среды WordPress HTML создается динамически из файлов PHP.

Для этого требуется два шага для создания типичной интеграции WordPress и React:

  1. Добавление тега сценария в HTML для загрузки файлов JavaScript приложения.
  2. Добавление div с селектором, который мы можем сопоставить с корневым селектором приложения для рендеринга внутри. (Однако мы можем пропустить этот шаг, если захватим существующий div, как в этой демонстрации).

Пользовательский код в плагине по сравнению с темой

Мы можем добавить функциональность в нашу установку WordPress одним из двух способов:

  1. Добавьте код в дочернюю тему (или основную тему, если мы ее поддерживаем).
  2. Напишите собственный плагин.

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

Создание плагина WordPress

Давайте запустим эти строки в нашем Терминале:

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

Убедитесь, что плагин загружен

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

Найдите селектор корневого каталога приложения

Начнем с загрузки приложения React на главной странице панели управления в панели администратора WordPress.

Селектор '#wpbody .wrap’ поместит приложение на вашу панель инструментов и заменит виджеты WordPress по умолчанию.

Поиск файлов приложения React

Приложение React выводит файлы ресурсов CSS и JavaScript фрагментами в папки build/assets/js и build/assets/css . Как мы видим в папке сборки, у нас есть файлы фрагментов ресурсов со случайными именами.

Это создает проблемы, такие как, как мы можем загрузить правильные файлы ресурсов, если имена каждой сборки могут меняться? Нужно ли нам обновлять после каждой сборки имена новых файлов ресурсов?

Один из способов обойти это - отключить разделение кода, изменив настройки сборки Webpack. Таким образом, мы всегда загружаем один файл CSS и один файл JavaScript с именами, которые мы определили в настройках Webpack.

Поскольку мы можем получить список файлов из react-app/build/asset-manifest.jsonfile, мы продолжим разбиение кода, поэтому нам не нужно будет изменять какие-либо настройки Webpack по умолчанию.

Сводка задачи:

  1. Теперь мы хотим загрузить файлы `entryload` из файла react-app/build/asset-manifest.json.
  2. Настройте наше приложение React для загрузки в `#wpbody .wrap` на главной странице панели инструментов WordPress.

Измените файлы плагина

React-Plugin.php

Наш код будет добавлен после комментария «Ваш код начинается здесь».

Добавьте логику для анализа файла asset-manifest.json, переберите найденные файлы записей и загрузите их на главную страницу администратора WordPress:

react-app / src / index.js

Измените файл, чтобы получить корень селектора из window.rpReactPlugin:

react-app / package.json

Если мы создадим приложение на этапе withyarn build, приложение загрузится, а наше изображение - нет. Поскольку приложение ищет изображение в папке основного домена, а не в папке приложения React.

Чтобы исправить это, мы должны добавить запись inreact-app/package.jsonthe:

`домашняя страница`:` / wp-content / plugins / wp-create-response-app-concept / react-app / build`

Теперь мы можем запустить yarn build, и приложение должно отображаться правильно.

Загрузка приложения во внешнем интерфейсе

Для этой демонстрации мы загрузим приложение в нижний колонтитул главной страницы сайта.

Путь будет очень похожим с небольшими изменениями.

  1. Мы загружаем файлы в wp_enqueue_scriptshook вместо admin_enqueue_scripts хука, который мы использовали в панели управления WordPress.
  2. Условием для проверки того, находимся ли мы на правильной странице, является вспомогательная функция is_front_end()WordPress, а не ловушка администратора, которую мы использовали для проверки текущего экрана администратора на панели инструментов WordPress.
  3. Мы обновим селектор в main.js до правильного корневого селектора приложения #site-footer

После yarn build мы должны увидеть приложение в нижнем колонтитуле главной страницы внешнего интерфейса сайта.

Представляем плагин класса

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

Обертка нашего кода в подключаемый модуль класса дает два основных преимущества:

  1. Наш код инкапсулирован в классе, поэтому нам не нужно добавлять собственные префиксы к именам наших функций.
  2. Проще повторно использовать один и тот же класс для загрузки кода во внешнем интерфейсе и в админке WordPress.

Примечания к коду:

  • Код был написан на PHP 7.4.
  • «Способ WordPress» для получения файлов - wp_remote_get. Мы использовали здесь file_get_contents для упрощения демонстрации.

Ниже перечислены 3 ветки с 3 версиями кода. Не забудьте запустить yarn && yarn build в папке react-app, чтобы собрать пакет.

Версия функции github wp-admin

Https://github.com/BenBroid/wp-create-react-app-concept/tree/function-version-wp-admin

Версия интерфейсной функции Github

Https://github.com/BenBroid/wp-create-react-app-concept/tree/front-end-function-version

Версия класса Github

Https://github.com/BenBroid/wp-create-react-app-concept/tree/class-plugin