Ubuntu 18.04のWordPressにReactアプリケーションを埋め込む方法

作者はhttps://www.brightfunds.org/organizations/electronic-frontier-foundation-inc[Electronic Frontier Foundation]を選択して、https://do.co/w4do-cta [Write for DOnations]プログラム。

前書き

WordPressは人気のあるコンテンツ管理システムであり、W3Techs(Web Technology Surveys)によるとhttps://w3techs.com/technologies/details/cm-wordpress/all/all[overインターネット上のウェブサイトの33%]。 人気が高い理由の1つは、明確でわかりやすいドキュメントを簡単にセットアップできることです。 さらに、WordPress開発者をサポートする多くのコミュニティリソースがあります。 WordPressは、安価な、または無料のすぐに使えるソリューションで多くのユースケースを解決できます。 最後に、WordPressには明確に定義されたプラグインシステムが付属しており、開発者はカスタムコードを記述して独自の機能を追加できます。 このプラグインシステムは十分に文書化されており、機能します。このチュートリアルの後半で説明するように、使いやすいです。

最もリッチで最もインタラクティブなエクスペリエンスを提供したい開発者は、https://www.digitalocean.com/community/tutorial_series/how-to-code-in-javascript [JavaScript]を使用できます。これはhttps:// reactjsなどのフレームワークでサポートされています.org / [React]。 Reactは、開発者が一般的な静的ページまたはフォームを超える動的でインタラクティブなUIを簡単に作成できるように設計されたJavaScriptライブラリです。 Facebookによって作成され、セキュリティ、安定性、および使いやすさのために十分に維持されているReactは、優れたドキュメントと、ドキュメントとプラグインの確立されたコミュニティ主導のエコシステムを備えているため、人気があります。

このチュートリアルでは、ReactアプリケーションをWordPressサイトに埋め込むためのベストプラクティスを紹介します。 その例では、一般的なユースケースを使用します。複数のページに埋め込まれることを目的としたウィジェットを作成し、時にはページに複数回使用することもあります。 サーバー側では、https://codex.wordpress.org/Shortcode [WordPressショートコード]として実装されます。 ショートコードはHTMLタグに似ていますが、山括弧( + <…​> +)の代わりに角括弧( + […​] +)を使用します。 HTML要素を直接レンダリングする代わりに、PHP関数を呼び出します。PHP関数は、データベースからのデータで補間されたHTMLをレンダリングします。

このチュートリアルの終わりまでに、独自のショートコードを作成し、WP Adminのページに挿入して、そのページを公開します。 そのページで、ブラウザーに表示されるReactウィジェットを見ることができます。

前提条件

このチュートリアルを実行するには、次のものが必要です。

  • Ubuntu 18.04での初期サーバー設定チュートリアルでセットアップされたUbuntu 18.04サーバーは、ファイアウォールを設定しますサーバーとルート権限を持つ新しいユーザー。

  • 完全に登録されたドメイン名。 このチュートリアルでは、全体を通して例として「++」を使用します。 https://namecheap.com [Namecheap]でドメイン名を購入するか、http://www.freenom.com/en/index.html [Freenom]で無料で入手するか、選択したドメインレジストラを使用できます。 。

  • 次の両方のDNSレコードがサーバーに設定されています。 追加方法の詳細については、https://www.digitalocean.com/community/tutorials/an-introduction-to-digitalocean-dns [DigitalOcean DNSの概要]を参照してください。

  • サーバーのパブリックIPアドレスを指す「++」を持つAレコード。

  • サーバーのパブリックIPアドレスを指す「+ www。+」を持つAレコード。

  • サーバーへのApache、MySQL、およびPHPのインストール。 Linux、Apacheをインストールする方法、MySQL、Ubuntu 18.04上のPHP(LAMP)スタック

  • https://www.digitalocean.com/community/tutorials/how-to-secure-apache-with-let-s-encrypt-on-ubuntuに従って、https://letsencrypt.org/ [Let’s Encrypt]でApacheを保護しました-18-04 [Ubuntu 18.04でLet’s Encryptを使用してApacheを保護する方法]で無料のSSL証明書を生成します。

  • LAMPでWordPressをインストールする方法で取得できるWordPressインストールUbuntu 18.04]およびその前提条件。

  • https://www.digitalocean.com/community/tutorials/how-to-install-node-の「Installing using a PPA」オプションに従うことによるhttps://nodejs.org/en/[Node.js]のインストールjs-on-ubuntu-18-04#installing-using-a-ppa [Ubuntu 18.04にNode.jsをインストールする方法]。 このチュートリアルではバージョン「11.15.0」を使用するため、「+ curl 」を使用してインストールスクリプトをダウンロードする場合は、「 10.x 」を「 11.x +」に置き換えてこのチュートリアルの手順に従ってください。 。

手順1-ファイルシステムのアクセス許可の更新と構成

Ubuntu 18.04での初期サーバーセットアップ前提条件で作成された非ルートユーザーとしてログインすると、 WordPressディレクトリ内のファイルを表示または編集するアクセス権がありません。 後でファイルを追加および変更してWordPressプラグインとReactアプリケーションを作成するため、これは問題です。 この問題を解決するには、このステップでWordPress設定を更新して、WordPressファイルを編集するためのアクセス権を付与します。

非ルートユーザーの名前を「+」に、WordPressディレクトリ(前提条件で作成したApacheドキュメントルートフォルダー)へのパスを「 / var / www / +」に置き換えて、次のコマンドを実行します。 :

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

これらのファイルは、前提条件https:// wwwのhttps://wordpress.org/ [+ wordpress.org +]からダウンロードした `+ latest.tar.gz +`という名前のファイルのWordPressコアに含まれているファイルです。 .digitalocean.com / community / tutorials / how-to-embed-a-react-application-in-wordpress-on-ubuntu-18-04 [Ubuntu 18.04にLAMPでWordPressをインストールする方法]。 上記の出力のようにアクセス許可が表示される場合、これはファイルとディレクトリが正しく更新されていることを意味します。

このステップでは、WordPressのインストールを更新して、自分でファイルを編集できるようにしました。 次のステップでは、そのアクセスを使用して、WordPressプラグインを構成するファイルを作成します。

ステップ2-基本的なWordPressプラグインの作成

WordPressディレクトリ内のファイルを変更するためのアクセス権があるので、基本的なWordPressプラグインを作成し、インストールに追加します。 これにより、Reactはチュートリアルの後半でWordPressと対話できるようになります。

WordPressプラグインは次のように簡単にできます:

  1. `+ wp-content / plugins`内のディレクトリ。

  2. 同じディレクトリ内にあり、ファイル拡張子が「+ .php +」のディレクトリ内のファイル。

  3. WordPressに重要なプラグインメタデータを提供する、そのファイルの上部にある特別なコメント。

後で記述するReactコードのプラグインを作成するには、まずWordPressプラグインのディレクトリを作成します。 簡単にするために、このチュートリアルではプラグインに「」という名前を付けます。 次のコマンドを実行し、「」をApacheドキュメントルートに置き換えます。

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

次に、新しく作成したディレクトリに移動します。 後続のコマンドはここから実行されます。

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

今すぐプラグインファイルを作成しましょう。 このチュートリアルでは、すべてのファイルのコマンドラインテキストエディターとして、コマンド「+ nano +」で呼び出されるnanoを使用します。 また、https://en.wikipedia.org/wiki/Pico_(text_editor)[Pico]、https://www.digitalocean.com/community/tutorials/など、他の任意のテキストエディターを自由に使用することもできます。 vim-text-editor-on-a-cloud-server [Vim]、またはhttps://www.gnu.org/software/emacs/[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環境を介してロードされたことを確認できます。

次に、Webブラウザーを開き、ドメインの* Plugins *ページ( + https:/// wp-admin / plugins.php +)に移動します。 WordPressのデフォルトプラグインとともにプラグインがリストされます:

image:https://assets.digitalocean.com/articles/cart_65391/WP_Admin_Plugins_Page.png [WP管理プラグインページ]

[アクティブ化]をクリックして、プラグインを有効にします。

プラグインをアクティブにすると、プラグインを含む行が青色で強調表示され、左側に青い境界線が表示され、その下にある* Activate というリンクの代わりに、 Deactivate *という行が表示されます。

image:https://assets.digitalocean.com/articles/cart_65391/WP_Admin_Plugins_Page_After_Plugin_Activation.png [プラグインアクティベーション後のWP管理プラグインページ]

次に、プラグインの構造を確立します。

ターミナルに戻って `+ .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.' );

新しく追加された行で、3つの定数を定義しました。

  1. + ERW_WIDGET_PATH +-これはReactアプリケーションへのパスになります。

  2. + ERW_ASSET_MANIFEST +-これは、Reactアセットマニフェストへのパスです。これは、アプリケーションが機能するためにページに含める必要があるJavaScriptファイルとCSSファイルのリストを含むファイルです。

  3. + ERW_INCLUDES +-このサブディレクトリには、すべてのPHPファイルが含まれます。

各 `+ define()`は ` plugin_dir_path(FILE)+`を参照することに注意してください。 これは、そのファイルへのディレクトリパスを表します。

定数定義を追加したら、ファイルを保存してエディターを終了します。

他のPHPファイルを含む `+ includes / `フォルダーを作成するには、プラグインディレクトリの最上位レベルである ` / var / www // wp-content / plugins / +`から始めます。 次に、フォルダーを作成します。

mkdir includes

WordPressプラグインを作成するために必要なPHP関連のファイルとフォルダーを作成したので、Reactの初期ファイルとフォルダーを作成します。

ステップ3-Reactアプリケーションの初期化

この手順では、https://github.com/facebook/create-react-app [Create React App]を使用して、Reactアプリケーションを初期化します。

このチュートリアルは、React Appバージョン `+ 3.0.1 `を使用してテストされました。 バージョン ` 3.0.0 `は ` asset-manifest.json`の構造に重大な変更を加えました。この以前のバージョンは修正なしでこのチュートリアルと互換性がありません。 ここで想定されているバージョンを使用していることを確認するには、次のコマンドを実行してCreate React Appをインストールします。

sudo npm install --global [email protected]

このコマンドは、Create React Appのバージョン + 3.0.1 +`をインストールします。 `+-global +`フラグはシステム全体にインストールします。 システム全体にインストールすると、パスを指定せずに `+ create-react-app +(または + npx create-react-app +)を実行するときに、インストールしたバージョンが使用されます。

Create React Appをインストールしたら、それを使用してReactアプリケーションを作成します。 このチュートリアルでは、アプリに「++」という名前を付けます。

sudo create-react-app

このコマンドは、https://www.npmjs.com/package/npx [npx]を使用します。これは、https://www.npmjs.com/ [NPM]に同梱されているバイナリです。 NPMでホストされているCLIツールおよびその他の実行可能ファイルを簡単に使用できるように設計されています。 ローカルに見つからない場合、これらのツールがインストールされます。

`+ create-react-app`コマンドは、プロジェクトフォルダーと基本的なReactアプリに必要なすべてのファイルを生成します。 これには、JavaScript、CSS、テストファイルを開始する `+ index.html `ファイルと、プロジェクトと依存関係を定義するための ` 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 build command、 `+ npm run build `を使用してアプリケーションをビルドできるようになりました。 この「 build 」コマンドは、「 build 」という名前のスクリプトのキー「 scripts」の下にあるファイル「+ package.json」を調べます。

/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"
   ]
 }
}

これは、 + react-scripts`ノードモジュールによって提供される + react-scripts.js`実行可能ファイルを呼び出します。これは、 `+ create-react-app +`によって提供されるコアコンポーネントの1つです。 これにより、ビルドスクリプトが呼び出されます。ビルドスクリプトは、https://webpack.js.org/ [webpack]を使用して、プロジェクトファイルをブラウザが理解できる静的なアセットファイルにコンパイルします。 これを行うには:

  • 依存関係の解決。

  • SASSファイルをCSSとJSXに、またはhttps://www.typescriptlang.org/[TypeScript]をJavaScriptにコンパイルします。

  • ES6構文をhttps://www.w3schools.com/js/js_es5.asp[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は、アプリケーションをレンダリングするDOM内のHTML要素を使用します。 これは「+ target 」要素と呼ばれます。 デフォルトでは、この要素のIDは「 root 」です。 この「 root 」ノードが作成中のアプリであることを確認するには、「 src / index.js 」を変更して、名前空間の「 erw-root 」の「 target 」のIDを確認します。 これを行うには、まず ` 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 +`ファイルに2つの重要な変更を加えました。

  1. ターゲット要素を `+ <div id =" root "> </ div> `から ` <div id =" erw-root "> </ div> +`に変更したため、アプリケーションの名前空間になります。

  2. アプリが存在する場合にのみロードされるように、 `+ if(…​)`ステートメントで ` ReactDOM.render()+`の呼び出しを囲みました。

`+ src / +`ディレクトリのJavaScriptファイルまたはCSSファイルを変更した後、変更を組み込むためにアプリを再コンパイルすることが重要です。 アプリを再構築するには、次を実行します。

sudo npm run build

これで、 `+ build / +`ディレクトリにはJavaScriptファイルとCSSファイルの形式で動作するReactアプリケーションが含まれます。 次のステップでは、ページのJavaScriptとCSSをキューに入れるPHPファイルを設定します。

ステップ4-JavaScriptファイルとCSSファイルをキューに入れる

このステップでは、WordPressのアクションとフィルターを使用して次のことを行います。

  1. WordPressページのロードサイクルの適切な時点で、スクリプトエンキューコードを出力します。

  2. JavaScriptファイルとCSSファイルをキューに入れるページの読み込み速度に最も影響を与えない方法で。

WordPressはhttps://developer.wordpress.org/plugins/hooks/[actions and filters]を主要なフックとして使用します。 アクションを使用すると、ページの読み込みサイクルの指定された時間にコードを実行でき、フィルターは、他の方法では所有していない関数の戻り値を変更することで特定の動作を変更します。

これらのフックを使用するには、アセットマニフェストを解析するコードを含むPHPファイルを作成します。 これは、後ですべてのアセットをキューに入れるために使用するのと同じファイルであるため、スクリプトは `+ <head> +`タグに書き込まれます。

ファイルを作成する前に、次のコマンドを使用して、Reactアプリを含むディレクトリからトップレベルの `+ react-wordpress +`プラグインディレクトリに移動します。

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

`+ includes / `フォルダー内に ` enqueue.php +`ファイルを作成します:

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.' );

このファイルを保存して終了します。

次に、 `+ react-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' );

重要なタスクをチャンクに分割するために、 + includes / +`ディレクトリから他のPHPファイルを要求することは、WordPressプラグインの一般的なパターンです。 `+ require_once()+`関数は、引数として渡されたファイルのコンテンツを、そのファイルのPHPコードがインラインで直接記述されているかのように解析します。 同様のコマンド `+ include +`とは異なり、必要なファイルが見つからない場合、 `+ require +`は例外を発生させます。 (+ require()+ `とは対照的に) + require_once()+ を使用すると、ディレクティブ + require_once(ERW_INCLUDES)の場合、 `+ enqueue.php +`が複数回解析されないようになります。 '/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 +`フェーズで実行されます。

`+ script_loader_tag `フィルターを使用して ` <script> `タグの ` async `および ` defer +`属性を設定すると、DOMの構築とページレンダリングをブロックするのではなく、スクリプトを非同期に読み込むようにブラウザに指示します。

次に、 `+ wp_enqueue_scripts +`アクションがフロントエンドアイテムをエンキューします。 詳細については、https://codex.wordpress.org/Plugin_API/Action_Reference/wp_enqueue_scripts [このページ]を参照してください。

必ずファイルを書き込んで終了してください。

これで、WordPressにスクリプトおよびスタイルシートタグをページに書き込むように指示しました。 この次のステップでは、アセットマニフェストと呼ばれるファイルを解析します。 これにより、キューに入れる必要があるすべてのファイルへのパスが得られます。

ステップ5-資産マニフェストの解析

このステップでは、Reactビルドによって生成されたアセットマニフェストを解析して、JavaScriptファイルとCSSファイルのリストを作成します。

アプリケーションをビルドすると、Reactビルドスクリプトはプロジェクトを複数のJavaScriptおよびCSSファイルにビルドします。 各ファイルにはファイルのコンテンツのハッシュが含まれるため、ファイルの量と名前はビルドごとに異なります。 アセットマニフェストは、最後のビルドで生成された各ファイルの名前とそのファイルへのパスを提供します。 プログラムで解析することにより、ページに書き込むスクリプトとスタイルシートのタグは、名前が変わっても常に正しいファイルを指すことが保証されます。

最初に、 + cat`コマンドで + asset-manifest.json`を調べます:

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() {



























 });
});

完了したら、ファイルを作成して終了します。

強調表示されたコードは次のことを行います。

  1. 資産マニフェストファイルを読み取り、JSONファイルとして解析します。 キー `+ 'files' `に保存されているコンテンツにアクセスし、 ` $ asset_manifest +`変数に保存します。

  2. メインCSSファイルが存在する場合、キューに入れます。

  3. 最初にReactランタイムをエンキューし、次にメインJavaScriptファイルをエンキューし、ランタイムを依存関係として設定して、最初にページにロードされるようにします。

  4. `+ static / js / <hash> .chunk.js +`という名前のJavaScriptファイルのアセットマニフェストファイルリストを解析し、メインファイルの後のページでキューに入れます。

  5. `+ static / css / <hash> .chunk.css +`という名前のCSSファイルのアセットマニフェストファイルリストを解析し、メインCSSファイルの後のページでキューに入れます。

このステップでは、アプリで使用されるスクリプトとスタイルのファイルパスを分離しました。 次のステップでは、これらのファイルパスがReactアプリの `+ build +`ディレクトリを指していること、およびブラウザーからソースファイルにアクセスできないことを確認します。

ステップ6-静的ファイルの提供と保護

この時点で、WordPressにロードするJavaScriptファイルとCSSファイルとそれらの場所を指定しました。 ただし、ブラウザで「+ https:// +」にアクセスしてJavaScriptコンソールを見ると、HTTP 404エラーが表示されます。 (JavaScriptコンソールの使用方法の詳細については、https://www.digitalocean.com/community/tutorials/how-to-use-the-javascript-developer-console [この記事]を参照してください。)

image:https://assets.digitalocean.com/articles/cart_65391/404_Errors_in_the_JavaScript_Console.png [JavaScriptコンソールのエラー404]

これは、ファイルへのURLルート(たとえば、 + / static / js / main.2d1d08c1.chunk.js +)がファイルへの実際のパス(たとえば、 `+ / wp-content / plugins // / build / static / js / main.2d1d08c1.chunk.js + `)。

このステップでは、Reactにビルドディレクトリの場所を伝えることにより、この問題を修正します。 また、Apache書き換えルールを `+ .htaccess +`ファイルに追加して、ソースファイルがブラウザーで表示されないようにします。

Reactにアプリへの正しいパスを与えるには、Reactアプリケーションディレクトリ内で `+ package.json`を開きます。

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-react-app `に詳しい人は ` httpsにアクセスできます: /// wp-content / plugins /// src / index.js + `で、アプリのソースファイルの探索を開始します。 自分で試してみてください!

ユーザーがアクセスしたくないパスを保護するには、Apache書き換えルールをWordPressの `+ .htaccess +`ファイルに追加します。

nano /var/www//.htaccess

4つの強調表示された行を追加します。

/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エラーが表示されます。

Streamなど、リクエストアクティビティを監視し、404をログに記録するWordPressプラグインがあります。 ログには、ユーザーが404を受け取ったときにリクエストされたIPアドレスとページがリクエストに表示されます。 `+ totally-bogus-erw.php `を監視すると、特定のIPアドレスがReactアプリの ` src +`ディレクトリをクロールしようとしているかどうかがわかります。

必ずファイルを書き込んで終了してください。

JavaScriptファイルとCSSファイルをページに読み込むために必要なルーティングを確立したので、JavaScriptが対話してアプリをレンダリングするHTML要素をページに追加するショートコードを使用します。

ステップ7-ショートコードの作成

ショートコードを使用すると、非常にシンプルなページ内構文で、サーバー側のデータで補間された複雑なHTMLブロックを挿入できます。 このステップでは、WordPressショートコードを作成して登録し、それを使用してアプリケーションをページに埋め込みます。

プラグインのトップレベルに移動します。

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

ショートコードを含む新しいPHPファイルを作成します。

touch includes/shortcode.php

次に、メインのPHPファイルを編集して、プラグインの読み込み時に `+ includes / shortcode.php `が必要になるようにします。 最初に ` react-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 `というショートコードを登録し、呼び出されると、Reactアプリのルート要素である ` <div id =" erw-root "> </ div> +`をページに出力します。

保存して `+ shortcode.php`を終了します。

Reactアプリの動作を確認するには、新しいWordPressページを作成し、ショートコードを追加する必要があります。

Webブラウザーで `+ https:/// wp-admin +`に移動します。 ページの一番上に、左側にワードプレスのロゴが付いた黒いバーがあり、その後に家のアイコン、サイトの名前、コメントの吹き出しのアイコンと番号、* +という別のリンクがあります。新着*。 * +新規*ボタンにカーソルを合わせると、メニューがドロップダウンします。 [ページ]というメニュー項目をクリックします。

image:https://assets.digitalocean.com/articles/cart_65391/Create_a_Page.png [ページの作成]

画面がロードされると、カーソルが* Add title というテキストボックスにフォーカスされます。 そこをクリックして入力を開始すると、新しいページに関連するタイトルが付けられます。 このチュートリアルでは、 My React App *を使用します。

image:https://assets.digitalocean.com/articles/cart_65391/Giving_the_Page_a_Title.png [ページにタイトルを付ける]

WordPress Gutenbergエディターを使用していると仮定すると、ページ上部のタイトルの下に、書き込みを開始または/と入力して選択するテキスト行が表示されます。ブロック。 そのテキストにカーソルを合わせると、右側に3つのシンボルが表示されます。 ショートコードブロックを追加するには、「+ [/] +」に似た最も近いものを選択します。

image:https://assets.digitalocean.com/articles/cart_65391/Adding_a_Shortcode_Block.png [ショートコードブロックの追加]

新しく追加されたテキスト領域にショートコード「+ [erw_widget] +」を入力します。 次に、ウィンドウの右上隅にある青い[公開]ボタンをクリックし、[公開]を押して確認します。

image:https://assets.digitalocean.com/articles/cart_65391/Type_in_Your_Shortcode_and_Publish.png [ショートコードを入力して公開]

ページが公開されたことを確認する緑色のバーが表示されます。 *ページを表示*リンクをクリックします。

image:https://assets.digitalocean.com/articles/cart_65391/Click_Link_to_View_Page.png [リンクを表示してページを表示]

画面にアプリが表示されます:

image:https://assets.digitalocean.com/articles/cart_65391/Working_React_App.png [Working React App]

ページに基本的なReactアプリのレンダリングができたので、管理者がサーバー側で提供するオプションでそのアプリをカスタマイズできます。

ステップ8-サーバー生成設定の挿入

このステップでは、サーバー生成データとユーザー提供データの両方を使用して、アプリケーションに設定を注入します。 これにより、アプリケーションで動的データを表示し、ページ内でウィジェットを複数回使用できるようになります。

まず、 `+ index.js +`ファイルを開きます:

sudo nano /src/index.js

次に、 '。/ App'; + 行から + import 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アプリケーションが変更され、デフォルトのCreate React App画面を返す代わりに、 `+ 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!+」が表示されます。

image:https://assets.digitalocean.com/articles/cart_65391/Simplified_React_Application.png [Simplified React Application]

次に、ユーザーが指定した境界線の色とサイズで構成されるカスタム設定を追加します。 また、サーバーから現在のユーザーの表示名を渡します。

引数を受け入れるためのショートコードの更新

ユーザー提供の引数を渡すには、まずユーザーに引数を渡す方法を提供する必要があります。 ターミナルに戻り、プラグインのトップレベルに戻ります。

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 +`は、 `+ color +`属性が `+ [erw_widget] +`ショートコードに渡される可能性があることをWordPressに指示します。 配列値「+ black +」はデフォルト値を設定します。 すべてのショートコード属性は文字列としてショートコード関数に渡されるため、デフォルト値を設定したくない場合は、代わりに空の文字列( `+ '' +)を使用できます。 ページ内に複数の要素があることが予想されるため、最後の行はIDではなくクラスを使用するように変更されます。

ブラウザに戻り、「+ Hello、World!」ボックスの下にある「編集」ボタンをクリックします。 ブラウザのWordPressページを更新して、ショートコードの2番目のインスタンスを追加し、両方のインスタンスに色属性を追加します。 このチュートリアルでは、 ` [erw_widget color ="#cf6f1a "] `と ` [erw_widget color ="#11757e "] +`を使用します。

image:https://assets.digitalocean.com/articles/cart_65391/Add_a_Second_Widget.png [2番目のウィジェットを追加]

青い[更新]ボタンをクリックして保存します。

次に、編集のために `+ 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();

ファイルを書き込んで終了します。 更新された行は、クラス `+ erw-root +`で各インスタンスのReactアプリを呼び出します。 そのため、ショートコードを2回使用すると、ページに2つの正方形が表示されます。

最後に、編集のために `+ 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 [2つのウィジェット]

ウィジェットにはまだ境界線の色が表示されないことに注意してください。 これについては、今後のセクションで説明します。

各ウィジェットインスタンスを一意に識別する

各ウィジェットを一意に識別するために、サーバーからIDを渡す必要があります。 これは、ルート要素の `+ 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を生成します。 更新された行は、 ` data-id +`属性を使用してIDをReactルートにアタッチします。 これにより、ReactでIDにアクセスできるようになります。

ファイルを保存しますが、まだ終了しないでください。

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');
















});

これらの更新は、window-global設定オブジェクトを初期化し、WP Adminで提供されるデータを入力する各要素の前に、 `+ <script> +`ブロックを書き込みます。

ファイルを保存して終了します。

次に、https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Open_the_Inspector [inspect] WebブラウザーのWordPressページ。 これにより、ページのHTMLが表示されます。 `+ CTRL + F `で ` window.erwSettings +`を検索すると、ページのHTMLに次のように設定が書き込まれていることがわかります。

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

Reactから設定を取得する

Reactアプリでは、IDに基づいて設定を取得し、境界線の色の値をプロパティ( + prop +)として `+ App `コンポーネントに渡します。 これにより、 ` 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.erwSettings `オブジェクトの一意のIDを使用して設定を取得し、それらを ` App +`コンポーネントに渡します。 これを有効にするには、アプリケーションを再コンパイルします。

cd
sudo npm run build

この最後の手順を完了した後、ブラウザーでWordPressページを更新します。 ユーザーが提供する境界線の色とサーバーが提供する表示名がウィジェットに表示されます。

image:https://assets.digitalocean.com/articles/cart_65391/Widgets_with_Settings_Applied.png [設定が適用されたウィジェット]

結論

このチュートリアルでは、内部にReactアプリケーションを含む独自のWordPressプラグインを作成しました。 次に、WP Adminページビルダー内にアプリケーションを埋め込み可能にするためのブリッジとしてショートコードを構築し、最後にページ上のウィジェットをカスタマイズしました。

これで、配信メカニズムがすでに整っているという自信を持って、Reactアプリケーションを拡張できます。 WordPressのこの基盤により、クライアント側のエクスペリエンスに集中できるようになり、アプリケーションが拡大および成長するにつれて、WordPressのインストールで機能する本番指向のツールやテクニックを簡単に追加できます。

Reactの強固な基盤で何ができるかについてさらに読むには、次のチュートリアルのいずれかを試してください。

Related