Как встроить приложение React в WordPress в Ubuntu 18.04

_Автор выбрал Electronic Frontier Foundation, чтобы получить пожертвование как часть Write для DOnations программа.

Вступление

WordPress - это популярная система управления контентом, которая, согласно W3Techs (Обзоры веб-технологий), обеспечивает https://w3techs.com/technologies/details/cm-wordpress/all/all[over 33% сайтов в Интернете. Одна из причин, по которой он так популярен, заключается в том, что его легко настроить с помощью простой и понятной документации. Кроме того, существует множество ресурсов сообщества, поддерживающих разработчиков WordPress. WordPress может решить множество вариантов использования с помощью недорогого или даже бесплатного готового решения. Наконец, WordPress поставляется с четко определенной системой плагинов, которая позволяет разработчикам писать собственный код для добавления их собственных функций. Эта система плагинов хорошо документирована, работает хорошо, и, как вы увидите позже в этом руководстве, она проста в использовании.

Разработчики, которые хотят предоставить самые богатые и интерактивные возможности, могут использовать JavaScript, поддерживаемые такими платформами, как https: //actjs. .org / [React]. React - это библиотека JavaScript, которая разработана для того, чтобы облегчить разработчикам создание динамических интерактивных пользовательских интерфейсов, выходящих за рамки обычной статической страницы или формы. React, созданный Facebook и, следовательно, хорошо поддерживаемый для обеспечения безопасности, стабильности и простоты использования, популярен, потому что у него есть хорошая документация и хорошо развитая экосистема документации и плагинов, управляемая сообществом.

Из этого туториала вы узнаете, как внедрить приложение React на сайт WordPress. В своем примере он будет использовать общий вариант использования: создание виджета, предназначенного для встраивания на несколько страниц, а иногда и на страницу несколько раз. На стороне сервера это будет реализовано в виде короткого кода WordPress. Короткий код подобен тегу HTML, но он использует квадратные скобки (+ […] +) вместо угловых скобок (+ <…> +). Вместо прямой визуализации элемента HTML он вызывает функцию PHP, которая, в свою очередь, отображает HTML, интерполированный с данными из базы данных.

К концу этого урока вы создадите свой собственный шорткод, вставите его на страницу в WP Admin и опубликуете эту страницу. На этой странице вы сможете увидеть свой виджет React, отображаемый браузером.

Предпосылки

Чтобы следовать этому уроку, вы должны иметь:

Сервер Ubuntu 18.04, настроенный с помощью учебника Initial Настройка сервера с Ubuntu 18.04 для настройки брандмауэра для вашего сервер вместе с новым пользователем, который имеет привилегии root.
Полностью зарегистрированное доменное имя. Этот урок будет использовать ++ в качестве примера повсюду. Вы можете приобрести доменное имя на https://namecheap.com [Namecheap], получить его бесплатно на Freenom или использовать регистратор домена по вашему выбору. ,
Обе следующие записи DNS настроены для вашего сервера. Вы можете следовать this вводная информация о DNS DigitalOcean для получения подробной информации о том, как их добавить.
Запись A с ++, указывающая на публичный IP-адрес вашего сервера.
Запись A с + www. +, Указывающая на публичный IP-адрес вашего сервера.
Установки Apache, MySQL и PHP на вашем сервере. Вы можете получить это, следуя Как установить Linux, Apache , MySQL, стек PHP (LAMP) в Ubuntu 18.04.
Защищенный Apache с Let’s Encrypt, следуя https://www.digitalocean.com/community/tutorials/how-to-secure-apache-with-let-s-encrypt-on-ubuntu -18-04 [Как обезопасить Apache с Let’s Encrypt в Ubuntu 18.04] для создания бесплатного SSL-сертификата.
Установка WordPress, которую вы можете получить, следуя Как установить WordPress с помощью LAMP на Ubuntu 18.04 и его предпосылки.
Установка Node.js с помощью параметра «Установка с использованием PPA» в https://www.digitalocean.com/community/tutorials/how-to-install-node- js-on-ubuntu-18-04 # Установка-использование-a-ppa [Как установить Node.js в Ubuntu 18.04]. В этом руководстве будет использоваться версия + 11.15.0 +, поэтому при использовании + curl + для загрузки сценария установки замените + 10.x + на + 11.x +, чтобы выполнить процедуру, описанную в этом руководстве. ,

Шаг 1 - Обновление и настройка разрешений файловой системы

Когда вы вошли в систему как пользователь без полномочий root, созданный в предварительном условии https://www.digitalocean.com/community/tutorials/initial-server-setup-with-ubuntu-18-04[Initial Server Setup с Ubuntu 18.04, вы не будет иметь доступа для просмотра или редактирования каких-либо файлов в каталоге WordPress. Это проблема, так как вы будете добавлять и изменять файлы позже, чтобы создать плагин WordPress и приложение React. Чтобы решить эту проблему, на этом шаге вы обновите конфигурацию WordPress, чтобы у вас был доступ для редактирования файлов WordPress.

Запустите следующую команду, подставив ++ для имени вашего пользователя без полномочий root и + / var / www / + для пути к вашему каталогу WordPress (который является корневой папкой документов Apache, которую вы создали в предварительном условии) :

sudo chown -R :www-data /var/www/

Давайте разберем эту команду:

+ sudo + - это позволяет вам выполнить эту команду как + root +, так как вы изменяете файлы, к которым у ++ не имеется доступа.
+ chown + - эта команда меняет владельца файла.
+ -R + - Этот флаг рекурсивно меняет владельца, включая все подпапки и файлы.
+: www-data + - устанавливает владельца как пользователя без полномочий root (++) и сохраняет группу как + www-data +, так что Apache все еще может обращаться к файлам для их обслуживания.
+ / var / www / + - указывает путь к вашему каталогу WordPress. Это каталог, в котором будет меняться владелец.

Чтобы убедиться, что эта команда выполнена успешно, перечислите содержимое каталога WordPress:

ls -la /var/www/

Вы увидите список содержимого каталога:

Outputtotal 216
drwxr-x---  5  www-data  4096 Apr 13 15:42 .
drwxr-xr-x  4 root  root      4096 Apr 13 15:39 ..
-rw-r-----  1  www-data   235 Apr 13 15:54 .htaccess
-rw-r-----  1  www-data   420 Nov 30  2017 index.php
-rw-r-----  1  www-data 19935 Jan  1 20:37 license.txt
-rw-r-----  1  www-data  7425 Jan  9 02:56 readme.html
-rw-r-----  1  www-data  6919 Jan 12 06:41 wp-activate.php
drwxr-x---  9  www-data  4096 Mar 13 00:18 wp-admin
-rw-r-----  1  www-data   369 Nov 30  2017 wp-blog-header.php
-rw-r-----  1  www-data  2283 Jan 21 01:34 wp-comments-post.php
-rw-r-----  1  www-data  2898 Jan  8 04:30 wp-config-sample.php
-rw-r-----  1  www-data  3214 Apr 13 15:42 wp-config.php
drwxr-x---  6  www-data  4096 Apr 13 15:54 wp-content
-rw-r-----  1  www-data  3847 Jan  9 08:37 wp-cron.php
drwxr-x--- 19  www-data 12288 Mar 13 00:18 wp-includes
-rw-r-----  1  www-data  2502 Jan 16 05:29 wp-links-opml.php
-rw-r-----  1  www-data  3306 Nov 30  2017 wp-load.php
-rw-r-----  1  www-data 38883 Jan 12 06:41 wp-login.php
-rw-r-----  1  www-data  8403 Nov 30  2017 wp-mail.php
-rw-r-----  1  www-data 17947 Jan 30 11:01 wp-settings.php
-rw-r-----  1  www-data 31085 Jan 16 16:51 wp-signup.php
-rw-r-----  1  www-data  4764 Nov 30  2017 wp-trackback.php
-rw-r-----  1  www-data  3068 Aug 17  2018 xmlrpc.php

Эти файлы включены в ядро WordPress в файле с именем + latest.tar.gz +, который вы скачали с https://wordpress.org/ [+ wordpress.org +] в предварительном условии https: // www .digitalocean.com / community / tutorials / how-to-to-embed-a-реагировать-приложение-в-wordpress-on-ubuntu-18-04 [Как установить WordPress с LAMP на Ubuntu 18.04]. Если разрешения отображаются так же, как и в предыдущем выводе, это означает, что ваши файлы и каталоги были обновлены правильно.

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

Шаг 2 - Создание базового плагина WordPress

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

Плагин WordPress может быть простым:

Каталог внутри + wp-content / plugins.
Файл внутри этого каталога с тем же именем и расширением + .php +.
Специальный комментарий в верхней части этого файла, который предоставляет WordPress важные метаданные плагина.

Чтобы создать плагин для кода React, который вы напишете позже, начните с создания каталога для плагина WordPress. Для простоты этот урок будет называть плагин `. Запустите следующую команду, заменив ` на ваш корень документа Apache:

mkdir /var/www//wp-content/plugins/

Затем перейдите к вновь созданному каталогу. Последующие команды будут выполнены отсюда.

cd /var/www//wp-content/plugins/

Давайте создадим файл плагина сейчас. В этом руководстве будет использоваться nano, вызываемый командой + nano +, в качестве текстового редактора командной строки для всех файлов. Вы также можете свободно использовать любой другой текстовый редактор по вашему выбору, например Pico, https://www.digitalocean.com/community/tutorials/. установка-и-использование-vim-text-editor-on-a-cloud-server [Vim] или Emacs.

Откройте + .php + для редактирования:

nano .php

Добавьте следующие строки в ваш файл, чтобы создать начало плагина:

/var/www/wordpress/wp-content/plugins/react-wordpress/react-wordpress.php

<?php
/**
* @wordpress-plugin
* Plugin Name:       Embedding React In Wordpress
*/

defined( 'ABSPATH' ) or die( 'Direct script access disallowed.' );

Раздел с комментариями вверху предоставляет метаданные для плагина, а строка, которая проверяет константу + ABSPATH +, предотвращает доступ плохого субъекта к этому сценарию напрямую по его URL. + ABSPATH + - это абсолютный путь к корневому каталогу WordPress, поэтому, если определено + ABSPATH +, вы можете быть уверены, что файл был загружен через среду WordPress.

Затем откройте веб-браузер и перейдите на страницу * Plugins * вашего домена (+ https: /// wp-admin / plugins.php +). Вы увидите свой плагин в списке вместе с плагинами WordPress по умолчанию:

изображение: https: //assets.digitalocean.com/articles/cart_65391/WP_Admin_Plugins_Page.png [Страница плагинов для WP Admin]

Нажмите * Активировать *, чтобы включить плагин.

После того, как вы активировали свой плагин, строка, содержащая ваш плагин, будет подсвечена синим цветом, с синей рамкой слева, и вместо ссылки под ней с надписью * Activate * будет одна, которая скажет * Deactivate *:

изображение: https: //assets.digitalocean.com/articles/cart_65391/WP_Admin_Plugins_Page_After_Plugin_Activation.png [Страница плагинов WP Admin после активации плагина]

Далее вы установите структуру вашего плагина.

Вернитесь к своему терминалу, чтобы открыть + .php:

nano .php

Затем обновите его, добавив следующие выделенные строки, которые определяют полезные константы:

/var/www/wordpress/wp-content/plugins/react-wordpress/react-wordpress.php

<?php
/**
* @wordpress-plugin
* Plugin Name:       Embedding React In Wordpress
*/

defined( 'ABSPATH' ) or die( 'Direct script access diallowed.' );

Во вновь добавленных строках вы определили три константы:

+ ERW_WIDGET_PATH + - это путь к приложению React.
+ ERW_ASSET_MANIFEST + - это путь к манифесту ресурса React, файлу, который содержит список файлов JavaScript и CSS, которые необходимо включить на страницу, чтобы ваше приложение работало.
+ ERW_INCLUDES + - Этот подкаталог будет содержать все файлы PHP.

Обратите внимание, что каждый + define () + ссылается на + plugin_dir_path (FILE) +. Это означает путь к каталогу к этому файлу.

После добавления постоянных определений сохраните файл и выйдите из редактора.

Чтобы создать папку + includes / +, которая будет содержать другие файлы PHP, начните с верхнего уровня каталога плагинов, + / var / www // wp-content / plugins / +. Затем создайте папку:

mkdir includes

Теперь, когда вы создали файлы и папки, связанные с PHP, необходимые для создания плагина WordPress, вы создадите исходные файлы и папки для React.

Шаг 3 - Инициализация приложения React

На этом этапе вы будете использовать Create React App, чтобы инициализировать ваше приложение React.

Этот учебник был протестирован с использованием приложения Create React App + 3.0.1 +. Версия + 3.0.0 + внесла критические изменения в структуру + asset-manifest.json, поэтому эта более ранняя версия не совместима с этим руководством без изменений. Чтобы убедиться, что вы используете версию, ожидаемую здесь, запустите эту команду для установки Create React App:

sudo npm install --global [email protected]

Эта команда установит версию + 3.0.1 + приложения Create React. Флаг + - global + установит его для всей системы. Установка всей системы гарантирует, что при запуске + create-реагировать-app + (или + npx create-реагировать-app +) без указания пути вы будете использовать версию, которую вы только что установили.

После установки Create React App используйте его для создания приложения React. Это руководство будет называть приложение ++:

sudo create-react-app

Эта команда использует npx, двоичный файл, поставляемый с NPM. Он разработан, чтобы упростить использование инструментов CLI и других исполняемых файлов, размещенных на NPM. Он установит эти инструменты, если они не найдены локально.

Команда + create-response-app + создаст папку проекта и все необходимые файлы для базового приложения React. Сюда входит файл + index.html +, запускающий JavaScript, CSS и тестовые файлы, и + package.json + для определения вашего проекта и зависимостей. Он включает в себя зависимости и сценарии, которые позволяют создавать приложение для работы без необходимости устанавливать и настраивать какие-либо дополнительные инструменты сборки.

После того как вы настроите приложение ++, вывод в терминале будет выглядеть примерно так:

Output...
Success! Created  at /var/www//wp-content/plugins//
Inside that directory, you can run several commands:

 npm start
   Starts the development server.

 npm run build
   Bundles the app into static files for production.

 npm test
   Starts the test runner.

 npm run eject
   Removes this tool and copies build dependencies, configuration files
   and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

 cd
 npm start

Happy hacking!

Затем перейдите к недавно созданному каталогу:

cd

Теперь вы сможете создавать свое приложение, используя команду сборки default, + npm run build + , Эта команда + build + ищет файл + package.json под ключом` + scripts` для скрипта с именем + build +:

/var/www/wordpress/wp-content/plugins/react-wordpress/widget/package.json

{
 "name": "widget",
 "version": "0.1.0",
 "private": true,
 "dependencies": {
   "react": "^16.9.0",
   "react-dom": "^16.9.0",
   "react-scripts": "3.1.1"
 },
 "scripts": {
   "start": "react-scripts start",

   "test": "react-scripts test",
   "eject": "react-scripts eject"
 },
 "eslintConfig": {
   "extends": "react-app"
 },
 "browserslist": {
   "production": [
     ">0.2%",
     "not dead",
     "not op_mini all"
   ],
   "development": [
     "last 1 chrome version",
     "last 1 firefox version",
     "last 1 safari version"
   ]
 }
}

При этом вызывается исполняемый файл +act-scripts.js, предоставляемый модулем узла` act-scripts`, который является одним из основных компонентов, предоставляемых ` create-Reaction-app +`. Это, в свою очередь, вызывает скрипт сборки, который использует webpack для компиляции файлов вашего проекта в статические файлы ресурсов, которые понимает ваш браузер. Это делает это:

Разрешение зависимостей.
Компиляция файлов SASS в CSS и JSX или TypeScript в JavaScript.
Преобразование ES6 в синтаксис ES5 с улучшенной кросс-браузерной совместимостью.

Теперь, когда вы немного узнали о + build +, запустите команду в своем терминале:

sudo npm run build

После завершения команды вы получите вывод, подобный следующему:

Output> @0.1.0 build /var/www//wp-content/plugins//
> react-scripts build

Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

 36.83 KB (+43 B)  build/static/js/2.6efc73d3.chunk.js
 762 B (+44 B)     build/static/js/runtime~main.a8a9905a.js
 710 B (+38 B)     build/static/js/main.2d1d08c1.chunk.js
 539 B (+44 B)     build/static/css/main.30ddb8d4.chunk.css

The project was built assuming it is hosted at the server root.
You can control this with the homepage field in your package.json.
For example, add this to build it for GitHub Pages:

 "homepage" : "http://myname.github.io/myapp",

The build folder is ready to be deployed.
You may serve it with a static server:

 npm install -g serve
 serve -s build

Find out more about deployment here:

 https://bit.ly/CRA-deploy

Ваш проект уже создан, но перед переходом к следующему шагу рекомендуется убедиться, что приложение загружается только при его наличии.

React использует элемент HTML в DOM, внутри которого он отображает приложение. Это называется элементом + target +. По умолчанию этот элемент имеет идентификатор + root +. Чтобы убедиться, что этот узел + root + является приложением, которое вы создаете, измените + src / index.js +, чтобы проверить идентификатор + target + для пространства имен + erw-root +. Для этого сначала откройте + src / index.js:

sudo nano src/index.js

Измените и добавьте выделенные строки:

/var/www/wordpress/wp-content/plugins/react-wordpress/widget/src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';




serviceWorker.unregister();

Наконец, сохраните и закройте файл, когда закончите редактирование.

В этом файле вы сделали два важных изменения в файле + index.js + по умолчанию:

Вы изменили целевой элемент с + <div id =" root "> </ div> + на + <div id =" erw-root "> </ div> +, чтобы он был пространством имен для вашего приложения.
Вы заключили вызов + ReactDOM.render () + в оператор + if (…) +, чтобы приложение загружалось только при его наличии.

После изменения любого файла JavaScript или CSS в вашем каталоге + src / + важно перекомпилировать ваше приложение, чтобы ваши изменения были включены. Чтобы восстановить приложение, запустите:

sudo npm run build

Теперь ваш каталог + build / + содержит работающее приложение React в форме файлов JavaScript и CSS. Следующий шаг включает настройку некоторых файлов PHP, которые будут ставить в очередь ваши JavaScript и CSS на странице.

Шаг 4 - Постановка в очередь файлов JavaScript и CSS

На этом этапе вы будете использовать действия и фильтры WordPress для:

Вывести код сценария в нужное время в цикле загрузки страницы WordPress.
Enqueue ваши файлы JavaScript и CSS таким образом, чтобы как можно меньше влиять на скорость загрузки страницы.

WordPress использует actions and filters в качестве основных хуков. Действия позволяют выполнять код в указанное время в цикле загрузки страницы, а фильтры изменяют определенное поведение, изменяя возвращаемое значение функций, которыми вы иначе не владеете.

Чтобы использовать эти ловушки, вы создадите файл PHP, который будет содержать код, который анализирует манифест актива. Это тот же файл, который вы будете использовать позже для постановки в очередь всех ресурсов, поэтому сценарии записываются в тег + <head> +.

Перед созданием файла используйте следующую команду, чтобы перейти из каталога, содержащего ваше приложение React, в каталог подключаемого модуля + реагировать-wordpress + верхнего уровня:

cd /var/www//wp-content/plugins/

Создайте файл + enqueue.php + внутри папки + includes / +:

nano includes/enqueue.php

Начните с размещения открывающего тега + <? Php в верхней части файла. Также добавьте строку, которая проверяет наличие + ABSPATH +, что, как обсуждалось ранее, является лучшей практикой в каждом файле PHP:

/var/www/wordpress/wp-content/plugins/react-wordpress/includes/enqueue.php

<?php
// This file enqueues scripts and styles

defined( 'ABSPATH' ) or die( 'Direct script access disallowed.' );

Сохраните и выйдите из этого файла.

Затем обновите + response-wordpress.php +, чтобы потребовать + enqueue.php + из проекта. Сначала откройте файл для редактирования:

nano react-wordpress.php

Добавьте следующую выделенную строку:

/var/www/wordpress/wp-content/plugins/react-wordpress/react-wordpress.php

<?php
/**
* @wordpress-plugin
* Plugin Name:       Embedding React In Wordpress
*/

defined( 'ABSPATH' ) or die( 'Direct script access diallowed.' );

define( 'ERW_WIDGET_PATH', plugin_dir_path( __FILE__ ) . '/widget' );
define( 'ERW_ASSET_MANIFEST', ERW_WIDGET_PATH . '/build/asset-manifest.json' );
define( 'ERW_INCLUDES', plugin_dir_path( __FILE__ ) . '/includes' );

В плагинах WordPress распространен шаблон, требующий, чтобы другие файлы PHP из каталога + includes / + разделяли важные задачи на куски. Функция + require_once () + анализирует содержимое файла, переданного в качестве аргумента, как если бы PHP-код этого файла был написан прямо в строке. В отличие от аналогичной команды + include +, + require + вызовет исключение, если файл, который вы пытаетесь запросить, не найден. Использование + require_once () + (в отличие от просто + require () +) гарантирует, что + enqueue.php + не будет анализироваться несколько раз, если директива `+ require_once (ERW_INCLUDES. '/enqueue.php'); + `дается несколько раз.

Сохраните и выйдите из файла.

Теперь снова откройте + includes / enqueue.php:

nano includes/enqueue.php

Затем добавьте следующий выделенный код:

/var/www/wordpress/wp-content/plugins/react-wordpress/includes/enqueue.php

<?php
// This file enqueues scripts and styles

defined( 'ABSPATH' ) or die( 'Direct script access diallowed.' );

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

Установка атрибутов + async + и + defer + в тегах + <script> + с использованием фильтра + script_loader_tag + указывает браузеру загружать сценарии асинхронно, а не блокировать построение DOM и рендеринг страницы.

Действие + wp_enqueue_scripts + затем ставит в очередь элементы интерфейса. Смотрите this page для более подробной информации.

Обязательно напишите файл и выйдите.

Теперь вы сказали WordPress писать на страницу теги скрипта и таблицы стилей. На следующем шаге вы проанализируете файл, называемый манифестом актива. Это даст вам пути ко всем файлам, которые вам нужно поставить в очередь.

Шаг 5 - Анализ манифеста активов

На этом этапе вы проанализируете манифест ресурса, сгенерированный сборкой React, в список файлов JavaScript и CSS.

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

Сначала рассмотрим + asset-manifest.json с помощью команды` + cat`:

cat /build/asset-manifest.json

Это будет выглядеть примерно так:

Output{
 "files": {
   "main.css": "/static/css/main.2cce8147.chunk.css",
   "main.js": "/static/js/main.a284ff71.chunk.js",
   "main.js.map": "/static/js/main.a284ff71.chunk.js.map",
   "runtime~main.js": "/static/js/runtime~main.fa565546.js",
   "runtime~main.js.map": "/static/js/runtime~main.fa565546.js.map",
   "static/js/2.9ca06fd6.chunk.js": "/static/js/2.9ca06fd6.chunk.js",
   "static/js/2.9ca06fd6.chunk.js.map": "/static/js/2.9ca06fd6.chunk.js.map",
   "index.html": "/index.html",
   "precache-manifest.e40c3c7a647ca45e36eb20f8e1a654ee.js": "/precache-manifest.e40c3c7a647ca45e36eb20f8e1a654ee.js",
   "service-worker.js": "/service-worker.js",
   "static/css/main.2cce8147.chunk.css.map": "/static/css/main.2cce8147.chunk.css.map",
   "static/media/logo.svg": "/static/media/logo.5d5d9eef.svg"
 }
}

Для его анализа ваш код будет искать ключи объекта, которые заканчиваются на + .js и` + .css`.

Откройте файл + enqueue.php +:

nano includes/enqueue.php

Добавьте выделенный фрагмент:

/var/www/wordpress/wp-content/plugins/react-wordpress/includes/enqueue.php

<?php
// This file enqueues scripts and styles

defined( 'ABSPATH' ) or die( 'Direct script access disallowed.' );

add_action( 'init', function() {

 add_filter( 'script_loader_tag', function( $tag, $handle ) {
   if ( ! preg_match( '/^erw-/', $handle ) ) { return $tag; }
   return str_replace( ' src', ' async defer src', $tag );
 }, 10, 2 );

 add_action( 'wp_enqueue_scripts', function() {



























 });
});

Когда вы закончите, напишите и выйдите из файла.

Выделенный код выполняет следующие действия:

Считывает файл манифеста актива и анализирует его как файл JSON. Он обращается к содержимому, хранящемуся в ключе + 'files' +, и сохраняет его в переменной + $ asset_manifest +.
Ставит в очередь основной файл CSS, если он существует.
Сначала ставит в очередь среду выполнения React, затем основной файл JavaScript, устанавливая среду выполнения в качестве зависимости, чтобы гарантировать, что она сначала загружается на страницу.
Анализирует список файлов манифеста актива для любых файлов JavaScript с именем + static / js / <hash> .chunk.js + и помещает их в список после основного файла.
Анализирует список файлов манифеста актива для любых файлов CSS с именем + static / css / <hash> .chunk.css + и помещает их в очередь после основного файла CSS.

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

Шаг 6 - Обслуживание и защита статических файлов

В этот момент вы сообщили WordPress, какие файлы JavaScript и CSS следует загружать и где их искать. Однако, если вы зайдете в браузер + https: // + и посмотрите на консоль JavaScript, вы увидите ошибки HTTP 404. (Ознакомьтесь с this article для получения дополнительной информации о том, как использовать консоль JavaScript.)

изображение: https: //assets.digitalocean.com/articles/cart_65391/404_Errors_in_the_JavaScript_Console.png [404 ошибки в консоли JavaScript]

Это связано с тем, что маршрут URL к файлу (например, + / static / js / main.2d1d08c1.chunk.js +) не соответствует фактическому пути к файлу (например, `+ / wp-content / plugins // / строить / статические / JS / main.2d1d08c1.chunk.js + `).

На этом шаге вы исправите эту проблему, сообщив React, где находится каталог сборки. Вы также добавите правило перезаписи Apache в файл + .htaccess +, чтобы защитить исходные файлы от просмотра в браузере.

Чтобы дать React правильный путь к вашему приложению, откройте + package.json внутри вашего каталога приложений React:

sudo nano /package.json

Затем добавьте выделенную строку + homepage +:

/var/www/wordpress/wp-content/plugins/react-wordpress/widget/package.json

{
 "name": "widget",
 "version": "0.1.0",
 "private": true,

 "dependencies": {
   "react": "^16.9.0",
   "react-dom": "^16.9.0",
   "react-scripts": "3.1.1"
 },
 "scripts": {
   "start": "react-scripts start",
   "build": "react-scripts build",
   "test": "react-scripts test",
   "eject": "react-scripts eject"
 },
 "eslintConfig": {
   "extends": "react-app"
 },
 "browserslist": {
   "production": [
     ">0.2%",
     "not dead",
     "not op_mini all"
   ],
   "development": [
     "last 1 chrome version",
     "last 1 firefox version",
     "last 1 safari version"
   ]
 }
}

Написать и выйти из файла. Затем перестройте приложение React. Перейти на верхний уровень + / +:

cd

Затем выполните команду + build:

sudo npm run build

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

cat build/asset-manifest.json

Вы увидите, что пути к файлам изменились:

/var/www/wordpress/wp-content/plugins/react-wordpress/widget/build/asset-manifest.json

{
 "files": {
   "main.css": "static/css/main.2cce8147.chunk.css",
   "main.js": "static/js/main.a28d856a.chunk.js",
   "main.js.map": "static/js/main.a28d856a.chunk.js.map",
   "runtime~main.js": "static/js/runtime~main.2df87c4b.js",
   "runtime~main.js.map": "static/js/runtime~main.2df87c4b.js.map",
   "static/js/2.9ca06fd6.chunk.js": "static/js/2.9ca06fd6.chunk.js",
   "static/js/2.9ca06fd6.chunk.js.map": "static/js/2.9ca06fd6.chunk.js.map",
   "index.html": "index.html",
   "precache-manifest.233e0a9875cf4d2df27d6280d12b780d.js": "precache-manifest.233e0a9875cf4d2df27d6280d12b780d.js",
   "service-worker.js": "service-worker.js",
   "static/css/main.2cce8147.chunk.css.map": "static/css/main.2cce8147.chunk.css.map",
   "static/media/logo.svg": "static/media/logo.5d5d9eef.svg"
 }
}

Это сообщает вашему приложению, где искать правильные файлы, но также представляет проблему: оно раскрывает путь к каталогу + src + вашего приложения, и любой, кто знаком с + create-Reaction-app +, может посетить `+ https: /// wp-content / plugins /// src / index.js + `и начинаем изучать исходные файлы для вашего приложения. Попробуй сам!

Чтобы защитить пути, к которым вы не хотите, чтобы пользователи обращались, добавьте правило переписывания Apache в файл WordPress + .htaccess +.

nano /var/www//.htaccess

Добавьте четыре выделенные строки:

/var/www/wordpress/.htaccess

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

# END WordPress

Это говорит Apache о разрешении запросов браузера на что-либо из + wp-content / plugins /// build / + или + wp-content /// public / +. Все остальное будет перенаправлено на + totally-bogus-erw.php +. Если у вас нет файла с именем + totally-bogus-erw.php + на верхнем уровне, этот запрос будет обработан WordPress, который выдаст ошибку 404.

Существуют плагины WordPress, такие как Stream, которые будут отслеживать активность запросов и регистрировать 404. В журналах запрос покажет IP-адрес и страницу, запрошенную, когда пользователь получил 404. Отслеживание + totally-bogus-erw.php + покажет вам, пытается ли определенный IP-адрес сканировать каталог вашего приложения React + src +.

Обязательно напишите и выйдите из файла.

Теперь, когда вы установили маршрутизацию, необходимую для загрузки файлов JavaScript и CSS на страницу, пришло время использовать шорткод для добавления элементов HTML на страницу, с которой JavaScript будет взаимодействовать, для визуализации вашего приложения.

Шаг 7 - Создание шорткода

Шорткоды позволяют вставлять сложные блоки HTML, интерполированные с данными на стороне сервера, с очень простым внутристраничным синтаксисом. На этом этапе вы создадите и зарегистрируете шорткод WordPress и будете использовать его для встраивания своего приложения в страницу.

Перейдите на верхний уровень вашего плагина:

cd /var/www//wp-content/plugins//

Создайте новый файл PHP, который будет содержать шорткод:

touch includes/shortcode.php

Затем отредактируйте ваш основной файл PHP так, чтобы при загрузке вашего плагина требовалось + include / shortcode.php +. Сначала откройте + реагировать-wordpress.php:

nano react-wordpress.php

Затем добавьте следующую выделенную строку:

/var/www/wordpress/wp-content/plugins/react-wordpress/react-wordpress.php

<?php
/**
* @wordpress-plugin
* Plugin Name:       Embedding React In Wordpress
*/

defined( 'ABSPATH' ) or die( 'Direct script access diallowed.' );

define( 'ERW_WIDGET_PATH', plugin_dir_path( __FILE__ ) . '/widget' );
define( 'ERW_ASSET_MANIFEST', ERW_WIDGET_PATH . '/build/asset-manifest.json' );
define( 'ERW_INCLUDES', plugin_dir_path( __FILE__ ) . '/includes' );

require_once( ERW_INCLUDES . '/enqueue.php' );

Написать и выйти из файла.

Теперь откройте только что созданный файл шорткода:

nano includes/shortcode.php

Добавьте следующий код:

/var/www/wordpress/wp-content/plugins/react-wordpress/includes/shortcode.php

<?php
// This file enqueues a shortcode.

defined( 'ABSPATH' ) or die( 'Direct script access disallowed.' );

add_shortcode( 'erw_widget', function( $atts ) {
 $default_atts = array();
 $args = shortcode_atts( $default_atts, $atts );

 return "<div id='erw-root'></div>";
});

Этот код содержит в основном шаблон. Он регистрирует шорткод с именем + erw_widget +, который при вызове выводит на страницу + <div id =" erw-root "> </ div> +, корневой элемент приложения React.

Сохраните и выйдите из + shortcode.php.

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

Перейдите к + https: /// wp-admin + в веб-браузере. В самом верху страницы вы увидите черную полосу с логотипом WordPress слева, за которой следуют значок дома, название вашего сайта, значок и номер комментария, а также еще одна ссылка с надписью * + New *. Наведите указатель мыши на кнопку * + New *, и появится меню. Нажмите на пункт меню с надписью * Page *.

изображение: https: //assets.digitalocean.com/articles/cart_65391/Create_a_Page.png [Создать страницу]

Когда экран загрузится, ваш курсор будет сфокусирован в текстовом поле с надписью * Добавить заголовок *. Нажмите там и начните вводить, чтобы дать новой странице соответствующий заголовок. Этот урок будет использовать * My React App *:

изображение: https: //assets.digitalocean.com/articles/cart_65391/Giving_the_Page_a_Title.png [Задание заголовка страницы]

Предполагая, что вы используете WordPress Gutenberg editor, вы увидите строку текста в верхней части страницы, под заголовком, которая гласит: * Начните писать или введите /, чтобы выбрать блок *. Когда вы наводите курсор на этот текст, справа появятся три символа. Выберите ближайший, похожий на + [/] +, чтобы добавить блок шорткода:

изображение: https: //assets.digitalocean.com/articles/cart_65391/Adding_a_Shortcode_Block.png [Добавление блока шорткода]

Введите короткий код + [erw_widget] + во вновь добавленную текстовую область. Затем нажмите синюю кнопку * Опубликовать… * в верхнем правом углу окна, затем нажмите * Опубликовать * для подтверждения.

изображение: https: //assets.digitalocean.com/articles/cart_65391/Type_in_Your_Shortcode_and_Publish.png [введите свой шорткод и опубликуйте]

Вы увидите зеленую полосу, подтверждающую, что страница была опубликована. Нажмите на ссылку * Просмотр страницы *:

изображение: https: //assets.digitalocean.com/articles/cart_65391/Click_Link_to_View_Page.png [Щелкните ссылку, чтобы просмотреть страницу]

На экране вы увидите свое приложение:

изображение: https: //assets.digitalocean.com/articles/cart_65391/Working_React_App.png [рабочее приложение React]

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

Шаг 8 - Внедрение серверных настроек

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

Сначала откройте файл + index.js +:

sudo nano /src/index.js

Затем удалите + import App из строки './App'; + и обновите содержимое + index.js следующими выделенными строками:

/var/www/wordpress/wp-content/plugins/react-wordpress/widget/src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import * as serviceWorker from './serviceWorker';







const target = document.getElementById('erw-root');
if (target) { ReactDOM.render(<App />, target); }

serviceWorker.unregister();

Это изменяет ваше приложение React так, чтобы вместо возврата экрана создания приложения React по умолчанию он возвращал элемент с надписью + Hello, World! +.

Сохраните и выйдите из файла. Затем откройте + index.css + для редактирования:

nano /src/index.css

Замените содержимое + index.css + следующим кодом:

/var/www/wordpress/wp-content/plugins/react-wordpress/widget/src/index.css

.App {
 width: 100px;
 height: 100px;
 border: 1px solid;
 display: inline-block;
 margin-right: 20px;
 position: relative;
}

.App .App__Message {
 font-size: 15px;
 line-height: 15px;
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 text-align: center;
 width: 100%;
}

Стили для + .App будут отображать квадрат размером 100 пикселей со сплошной рамкой, а стили для` + .App_ Message + `будут отображать текст, центрированный внутри квадрата как по вертикали, так и по горизонтали.

Запишите и закройте файл, затем пересоберите приложение:

cd
sudo npm run build

Как только сборка будет успешной, обновите + https: /// index.php // + в вашем браузере. Теперь вы увидите поле, стилизованное под CSS, вместе с текстом + Hello, World! +:

изображение: https: //assets.digitalocean.com/articles/cart_65391/Simplified_React_Application.png [Упрощенное приложение React]

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

Обновление шорткода для принятия аргументов

Чтобы передать предоставленный пользователем аргумент, вы должны сначала дать пользователю способ передать аргумент. Вернувшись в терминал, вернитесь на верхний уровень вашего плагина:

cd ..

Затем откройте файл + shortcode.php для редактирования:

nano includes/shortcode.php

Обновите файл шорткода, чтобы он содержал следующие выделенные строки:

/var/www/wordpress/wp-content/plugins/react-wordpress/includes/shortcode.php

<?php
// This file enqueues your shortcode.

defined( 'ABSPATH' ) or die( 'Direct script access disallowed.' );

add_shortcode( 'erw_widget', function( $atts ) {

 $args = shortcode_atts( $default_atts, $atts );


});

Написать и выйти из файла. Обратите внимание, как код добавляет + 'color' ⇒ 'black' + в массив + $ default_atts +. Ключ массива + color + указывает WordPress ожидать, что атрибут + color + может быть передан в короткий код + [erw_widget] +. Значение массива + black + устанавливает значение по умолчанию. Все атрибуты шорткода передаются в функцию шорткода в виде строк, поэтому, если вы не хотите устанавливать значение по умолчанию, вы можете вместо этого использовать пустую строку (+ '' +). Последняя строка изменяется, чтобы использовать класс вместо идентификатора, поскольку ожидается, что на странице будет более одного элемента.

Теперь вернитесь в браузер и нажмите кнопку * Edit * под окном + Hello, World! +. Обновите страницу WordPress в своем браузере, чтобы добавить второй экземпляр шорткода и добавить атрибут цвета в оба экземпляра. В этом руководстве будут использоваться + [erw_widget color =" # cf6f1a "] + и + [erw_widget color =" # 11757e "] +:

изображение: https: //assets.digitalocean.com/articles/cart_65391/Add_a_Second_Widget.png [Добавить второй виджет]

Нажмите синюю кнопку * Обновить *, чтобы сохранить.

Затем откройте + index.js для редактирования:

sudo nano /src/index.js

Обновите его следующим:

/var/www/wordpress/wp-content/plugins/react-wordpress/widget/src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import * as serviceWorker from './serviceWorker';

const App = () => (
 <div className="App">
   <span className="App__Message">Hello,<br />World!</span>
 </div>
);




serviceWorker.unregister();

Написать и выйти из файла. Обновленные строки будут вызывать приложение React для каждого экземпляра с классом + erw-root +. Таким образом, если шорткод используется дважды, на странице появятся два квадрата.

Наконец, откройте + index.css + для редактирования:

sudo nano /src/index.css

Обновите файл, чтобы он содержал следующую выделенную строку:

/var/www/wordpress/wp-content/plugins/react-wordpress/widget/src/index.css

.App {
 width: 100px;
 height: 100px;
 border: 1px solid;
 display: inline-block;
 margin-right: 20px;
 position: relative;
}

.App .App__Message {
 font-size: 15px;
 line-height: 15px;
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 text-align: center;
 width: 100%;
}

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

Сохраните и выйдите из файла.

Теперь перекомпилируйте приложение React:

cd
sudo npm run build

Теперь, если вы обновите страницу в своем браузере, вы увидите оба виджета:

изображение: https: //assets.digitalocean.com/articles/cart_65391/Two_Widgets.png [Два виджета]

Обратите внимание, что виджеты по-прежнему не отображают цвет границы. Это будет рассмотрено в следующем разделе.

Уникальная идентификация каждого экземпляра виджета

Чтобы уникально идентифицировать каждый виджет, необходимо передать идентификатор с сервера. Это можно сделать с помощью атрибута + data-id + корневого элемента. Это важно, так как каждый виджет на странице может иметь разные настройки.

Для этого вернитесь в каталог плагинов верхнего уровня и откройте + shortcode.php для редактирования:

cd ..
nano includes/shortcode.php

Обновите его, чтобы иметь следующие выделенные строки:

/var/www/wordpress/wp-content/plugins/react-wordpress/includes/shortcode.php

<?php
// This file enqueues your shortcode.

defined( 'ABSPATH' ) or die( 'Direct script access disallowed.' );

add_shortcode( 'erw_widget', function( $atts ) {
 $default_atts = array( 'color' => 'black' );
 $args = shortcode_atts( $default_atts, $atts );



});

Первая новая строка генерирует уникальный идентификатор с префиксом + id +. Обновленная строка присоединяет ID к корню React с помощью атрибута + data-id +. Это сделает ID доступным в React.

Сохраните файл, но пока не выходите из него.

Записать настройки в объект JavaScript `+ window`

В файле шорткода вы будете записывать настройки на страницу в глобальном окне JavaScript-объекта. Использование объекта + window + обеспечивает доступ к нему из React.

Когда + shortcode.php + все еще открыт, обновите его, чтобы он содержал следующее:

/var/www/wordpress/wp-content/plugins/react-wordpress/includes/shortcode.php

<?php
// This file enqueues your shortcode.

defined( 'ABSPATH' ) or die( 'Direct script access disallowed.' );

add_shortcode( 'erw_widget', function( $atts ) {
 $default_atts = array( 'color' => 'black' );
 $args = shortcode_atts( $default_atts, $atts );
 $uniqid = uniqid('id');
















});

Эти обновления записывают блок + <script> + перед каждым элементом, который инициализирует объект глобальных настроек окна и заполняет его данными, предоставленными в WP Admin.

Сохраните и выйдите из файла.

Теперь inspect страницу WordPress в вашем веб-браузере. Это покажет вам HTML для вашей страницы. Если вы + CTRL + F + и выполните поиск + window.erwSettings +, вы увидите, что настройки записываются в HTML-код вашей страницы следующим образом:

...
 window.erwSettings = window.erwSettings || {};
 window.erwSettings["id"] = {
   'color': '#cf6f1a',
   'name': '',
 }
...

Получить настройки из React

В приложении React вы получите настройки на основе идентификатора и передадите значение цвета границы компоненту + App + в качестве свойства (+ prop +). Это позволяет компоненту + App + использовать значение без необходимости знать, откуда оно взято.

Откройте + index.js для редактирования:

sudo nano /src/index.js

Обновите его так, чтобы он содержал следующие выделенные строки:

/var/www/wordpress/wp-content/plugins/react-wordpress/widget/src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import * as serviceWorker from './serviceWorker';




 </div>
);

const targets = document.querySelectorAll('.erw-root');






serviceWorker.unregister();

Сохраните файл и выйдите из текстового редактора.

Ваше приложение React теперь будет использовать уникальный идентификатор из объекта window + global + window.erwSettings + для получения настроек и передачи их компоненту + App +. Чтобы реализовать это, перекомпилируйте ваше приложение:

cd
sudo npm run build

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

image: https: //assets.digitalocean.com/articles/cart_65391/Widgets_with_Settings_Applied.png [Виджеты с примененными настройками]

Заключение

В этом руководстве вы создали собственный плагин WordPress с приложением React внутри него. Затем вы создали шорткод в качестве моста, чтобы сделать ваше приложение встраиваемым в конструктор страниц WP Admin, и, в конце концов, вы настроили свой виджет на странице.

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

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

How для отображения данных из API DigitalOcean с React дает удовольствие и практично сценарий использования React.
How для создания приложения для управления списком клиентов с помощью React и TypeScript предлагает более расширенное использование React наряду с TypeScript.

TOC

Как встроить приложение React в WordPress в Ubuntu 18.04

Вступление

Предпосылки

Шаг 1 - Обновление и настройка разрешений файловой системы

Шаг 2 - Создание базового плагина WordPress

Шаг 3 - Инициализация приложения React

Шаг 4 - Постановка в очередь файлов JavaScript и CSS

Шаг 5 - Анализ манифеста активов

Шаг 6 - Обслуживание и защита статических файлов

Шаг 7 - Создание шорткода

Шаг 8 - Внедрение серверных настроек

Обновление шорткода для принятия аргументов

Уникальная идентификация каждого экземпляра виджета

Записать настройки в объект JavaScript `+ window`

Получить настройки из React

Заключение

Related

TOC

Как встроить приложение React в WordPress в Ubuntu 18.04

Вступление

Предпосылки

Шаг 1 - Обновление и настройка разрешений файловой системы

Шаг 2 - Создание базового плагина WordPress

Шаг 3 - Инициализация приложения React

Шаг 4 - Постановка в очередь файлов JavaScript и CSS

Шаг 5 - Анализ манифеста активов

Шаг 6 - Обслуживание и защита статических файлов

Шаг 7 - Создание шорткода

Шаг 8 - Внедрение серверных настроек

Обновление шорткода для принятия аргументов

Уникальная идентификация каждого экземпляра виджета

Записать настройки в объект JavaScript + window

Получить настройки из React

Заключение

Related

Записать настройки в объект JavaScript `+ window`