Ubuntu18.04のWordPressにReactアプリケーションを埋め込む方法

投稿日: 2022-10-23 2022-10-23
タグ: Applications, Development, javascript, LAMP Stack, php, Programming Project, React, Ubuntu 18.04, wordpress

序章

WordPress は人気のあるコンテンツ管理システムであり、W3Techs（Web Technology Surveys）によると、インターネット上の33% of以上のWebサイトを強化しています。非常に人気がある理由の1つは、明確でわかりやすいドキュメントを簡単に設定できることです。さらに、WordPress開発者をサポートするコミュニティリソースがたくさんあります。 WordPressは、安価な、あるいは無料のすぐに使えるソリューションで多くのユースケースを解決できます。最後に、WordPressには明確に定義されたプラグインシステムが付属しており、開発者はカスタムコードを記述して独自の機能を追加できます。このプラグインシステムは十分に文書化されており、うまく機能します。このチュートリアルの後半で説明するように、使いやすいです。

最も豊かでインタラクティブな体験を提供したい開発者は、ReactなどのフレームワークでサポートされているJavaScriptを使用できます。 ReactはJavaScriptライブラリであり、開発者が一般的な静的ページやフォームを超えた動的でインタラクティブなUIを簡単に作成できるように設計されています。 Facebookによって作成され、セキュリティ、安定性、使いやすさのために十分に維持されているReactは、優れたドキュメントと、確立されたコミュニティ主導のドキュメントとプラグインのエコシステムを備えているため、人気があります。

このチュートリアルでは、WordPressサイトにReactアプリケーションを埋め込むためのベストプラクティスについて説明します。その例では、一般的なユースケースを使用します。複数のページに、場合によっては1つのページに複数回埋め込むことを目的としたウィジェットを作成します。サーバー側では、WordPressショートコードとして実装されます。ショートコードはHTMLタグに似ていますが、角かっこを使用します（[...]）山かっこの代わりに（<...>). HTML要素を直接レンダリングする代わりに、PHP関数を呼び出します。この関数は、データベースからのデータで補間されたHTMLをレンダリングします。

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

前提条件

このチュートリアルに従うには、次のものが必要です。

Ubuntu 18.04チュートリアルを使用した初期サーバーセットアップでセットアップされたUbuntu18.04サーバーは、root権限を持つ新しいユーザーとともにサーバーのファイアウォールを構成します。
完全に登録されたドメイン名。このチュートリアルでは、 your_domain 全体の例として。 Namecheap でドメイン名を購入するか、 Freenom で無料でドメイン名を取得するか、選択したドメイン登録事業者を使用できます。
次の両方のDNSレコードがサーバー用に設定されています。それらを追加する方法の詳細については、このDigitalOceanDNSの紹介に従ってください。
- とのAレコード your_domain サーバーのパブリックIPアドレスを指します。
- とのAレコード www.your_domain サーバーのパブリックIPアドレスを指します。
サーバーへのApache、MySQL、およびPHPのインストール。これは、 Linux、Apache、MySQL、PHP（LAMP）スタックをUbuntu18.04にインストールする方法に従って入手できます。
Ubuntu 18.04でLet’sEncryptを使用してApacheを保護する方法に従って、 Let’sEncryptを使用してApacheを保護して無料のSSL証明書を生成します。
WordPressのインストール。Ubuntu18.04にLAMPを使用してWordPressをインストールする方法とその前提条件に従って取得できます。
Ubuntu18.04にNode.jsをインストールする方法の「PPAを使用してインストールする」オプションに従ってNode.jsをインストールします。このチュートリアルではバージョンを使用します 11.15.0、使用する場合 curl インストールスクリプトをダウンロードするには、 10.x と 11.x このチュートリアルの手順に従ってください。

ステップ1—ファイルシステムのアクセス許可の更新と構成

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

次のコマンドを実行して、代わりに sammy root以外のユーザーの名前と /var/www/wordpress WordPressディレクトリ（前提条件で作成したApacheドキュメントルートフォルダ）へのパス：

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

このコマンドを分解してみましょう：

sudo —これにより、このコマンドを次のように実行できます。 root、ファイルを変更しているので sammy にアクセスできません。
chown —このコマンドは、ファイルの所有権を変更します。
-R —このフラグは、すべてのサブフォルダーとファイルを含め、所有権を再帰的に変更します。
sammy:www-data —これにより、所有者がroot以外のユーザーとして設定されます（sammy）そしてグループを www-data Apacheがファイルを提供するためにファイルにアクセスできるようにします。
/var/www/wordpress —これはWordPressディレクトリへのパスを指定します。これは、所有権が変更されるディレクトリです。

このコマンドが成功したことを確認するには、WordPressディレクトリの内容を一覧表示します。

ls -la /var/www/wordpress

ディレクトリの内容のリストが表示されます。

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

これらのファイルは、WordPressコアの名前のファイルに含まれているファイルです。 latest.tar.gz 前提条件Ubuntu18.04にLAMPを使用してWordPressをインストールする方法のwordpress.orgからダウンロードしたもの。前の出力のように権限が表示される場合、これはファイルとディレクトリが正しく更新されていることを意味します。

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

ステップ2—基本的なWordPressプラグインを作成する

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

WordPressプラグインは、次のように単純にすることができます。

内部のディレクトリ wp-content/plugins.
そのディレクトリ内にある同じ名前のファイル .php ファイル拡張子。
WordPressに重要なプラグインメタデータを提供する、そのファイルの上部にある特別なコメント。

後で作成するReactコードのプラグインを作成するには、WordPressプラグインのディレクトリを作成することから始めます。簡単にするために、このチュートリアルではプラグインに名前を付けます react-wordpress. 次のコマンドを実行して、置き換えます wordpress Apacheドキュメントルートを使用：

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

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

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

プラグインファイルを作成しましょう。このチュートリアルでは、コマンドで呼び出されるnanoを使用します nano、すべてのファイルのコマンドラインテキストエディタとして。 Pico 、 Vim 、 Emacs など、他の任意のテキストエディタを自由に使用することもできます。

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

上部のコメント付きセクションには、プラグインのメタデータと、プラグインをチェックする行が表示されます。 ABSPATH 定数は、悪意のあるアクターがURLによってこのスクリプトに直接アクセスするのを防ぎます。 ABSPATH WordPressのルートディレクトリへの絶対パスです。 ABSPATH が定義されている場合、ファイルがWordPress環境を介してロードされたことを確認できます。

注：プラグインのメタデータコメントには多くのフィールドを使用できますが、 Plugin Name 必要とされている。詳細については、WordPressドキュメントのヘッダー要件ページを参照してください。

次に、Webブラウザーを開き、ドメインのプラグインページに移動します（https://your_domain/wp-admin/plugins.php). プラグインがWordPressのデフォルトプラグインと一緒に一覧表示されます。

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

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

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

ターミナルに戻って開きます 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' );

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

ERW_WIDGET_PATH —これはReactアプリケーションへのパスになります。
ERW_ASSET_MANIFEST —これは、Reactアセットマニフェストへのパスです。このファイルには、アプリケーションが機能するためにページに含める必要のあるJavaScriptファイルとCSSファイルのリストが含まれています。
ERW_INCLUDES —このサブディレクトリには、すべてのPHPファイルが含まれます。

それぞれに注意してください define() を指します plugin_dir_path( __FILE__ ). これは、そのファイルへのディレクトリパスを表します。

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

注：定数を名前空間にすることが重要です。この場合、名前空間を使用しています ERW_、WordPressのEmbeddingReactの略です。この名前空間の前に変数を付けると、他のプラグインで定義されている定数と競合しないように、変数が一意になります。

を作成するには includes/ 他のPHPファイルを含むフォルダは、プラグインディレクトリの最上位から始まります。 /var/www/your_domain/wp-content/plugins/react-wordpress. 次に、フォルダを作成します。

mkdir includes

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

ステップ3—Reactアプリケーションを初期化する

このステップでは、 Create React App を使用して、Reactアプリケーションを初期化します。

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

sudo npm install --global [email protected]

このコマンドはバージョンをインストールします 3.0.1 CreateReactAppの The --global フラグはシステム全体にインストールします。システム全体にインストールすると、実行時に確実になります create-react-app （また npx create-react-app）パスを指定しない場合は、インストールしたバージョンを使用します。

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

sudo create-react-app widget

このコマンドは、NPMに付属するバイナリであるnpxを使用します。これは、NPMでホストされているCLIツールやその他の実行可能ファイルを簡単に使用できるように設計されています。それらがローカルで見つからない場合は、それらのツールをインストールします。

The create-react-app コマンドは、プロジェクトフォルダーと基本的なReactアプリに必要なすべてのファイルを生成します。これには、 index.html ファイル、JavaScript、CSS、およびテストファイルの開始、および package.json プロジェクトと依存関係を定義するため。追加のビルドツールをインストールして構成しなくても、本番用にアプリケーションをビルドできる依存関係とスクリプトが事前に含まれています。

設定したら widget アプリの場合、ターミナルの出力は次のようになります。

Output...
Success! Created widget at /var/www/wordpress/wp-content/plugins/react-wordpress/widget
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 widget
  npm start

Happy hacking!

次に、新しく作成されたディレクトリに移動します。

cd widget

これで、デフォルトのビルドコマンドを使用してアプリケーションをビルドできるようになります。 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",
    "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-scripts.js によって提供される実行可能ファイル react-scripts によって提供されるコアコンポーネントの1つであるノードモジュール create-react-app. これにより、ビルドスクリプトが呼び出され、 webpack を使用して、プロジェクトファイルがブラウザが理解できる静的アセットファイルにコンパイルされます。これは次の方法で行われます。

依存関係の解決。
SASS ファイルをCSSおよびJSXにコンパイルするか、TypeScriptをJavaScriptにコンパイルします。
ES6構文をES5構文に変換し、ブラウザー間の互換性を向上させます。

今、あなたは少し知っています build、ターミナルでコマンドを実行します。

sudo npm run build

コマンドが完了すると、次のような出力が表示されます。

Output
> widget@0.1.0 build /var/www/wordpress/wp-content/plugins/react-wordpress/widget
> 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 のIDを確認するには 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';

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

serviceWorker.unregister();

最後に、編集が完了したら、ファイルを保存して終了します。

このファイルでは、デフォルトに2つの重要な変更を加えました index.js ファイル：

ターゲット要素をから変更しました <div id="root"></div> に <div id="erw-root"></div> そのため、アプリケーションの名前空間になります。
あなたはへの呼び出しを同封しました ReactDOM.render() で if (...) アプリが存在する場合にのみアプリが読み込まれるようにするステートメント。

注：ウィジェットがすべてのページに存在することを期待する場合は、エラー処理の行を追加することもできます。これにより、IDを持つ要素がコンソールにメッセージを出力します。 erw-root 見つかりません。ただし、このチュートリアルではこの手順を省略します。このような行は、要素を含める予定のないページを含め、要素を含まないすべてのページでコンソールエラーを生成します。これらの複数のJavaScriptコンソールエラーは、サイトの検索エンジンのランキングを下げるリスクがあります。

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

sudo npm run build

今あなたの build/ ディレクトリには、JavaScriptおよびCSSファイルの形式で動作するReactアプリケーションが含まれています。次のステップでは、JavaScriptとCSSをページにエンキューするいくつかのPHPファイルを設定します。

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

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

WordPressページのロードサイクルの適切なタイミングでスクリプトエンキューコードを出力します。
ページの読み込み速度への影響が最も少ない方法でJavaScriptファイルとCSSファイルをキューに入れます。

WordPressは、プライマリフックとしてアクションとフィルターを使用します。アクションを使用すると、ページの読み込みサイクルの指定した時間にコードを実行できます。フィルターは、他の方法では所有していない関数の戻り値を変更することで、特定の動作を変更します。

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

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

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

を作成します 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.' );

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

次に、更新します 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' );

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

WordPressプラグインでは、他のPHPファイルを要求するのが一般的なパターンです。 includes/ 重要なタスクをチャンクに分割するためのディレクトリ。 The 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.' );

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

  });
});

に関数を追加する init アクションは、このコードが init テーマと他のプラグインがロードされた後のロードプロセスのフェーズ。

の設定 async と defer の属性 <script> を使用したタグ script_loader_tag filterは、DOMの構築とページのレンダリングをブロックするのではなく、スクリプトを非同期でロードするようにブラウザーに指示します。

The wp_enqueue_scripts 次に、アクションはフロントエンドアイテムをキューに入れます。詳細については、このページを参照してください。

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

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

ステップ5—アセットマニフェストの解析

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

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

まず、 asset-manifest.json とともに cat 指図：

cat widget/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() {

    $asset_manifest = json_decode( file_get_contents( ERW_ASSET_MANIFEST ), true )['files'];

    if ( isset( $asset_manifest[ 'main.css' ] ) ) {
      wp_enqueue_style( 'erw', get_site_url() . $asset_manifest[ 'main.css' ] );
    }

    wp_enqueue_script( 'erw-runtime', get_site_url() . $asset_manifest[ 'runtime~main.js' ], array(), null, true );

    wp_enqueue_script( 'erw-main', get_site_url() . $asset_manifest[ 'main.js' ], array('erw-runtime'), null, true );

    foreach ( $asset_manifest as $key => $value ) {
      if ( preg_match( '@static/js/(.*)\.chunk\.js@', $key, $matches ) ) {
        if ( $matches && is_array( $matches ) && count( $matches ) === 2 ) {
          $name = "erw-" . preg_replace( '/[^A-Za-z0-9_]/', '-', $matches[1] );
          wp_enqueue_script( $name, get_site_url() . $value, array( 'erw-main' ), null, true );
        }
      }

      if ( preg_match( '@static/css/(.*)\.chunk\.css@', $key, $matches ) ) {
        if ( $matches && is_array( $matches ) && count( $matches ) == 2 ) {
          $name = "erw-" . preg_replace( '/[^A-Za-z0-9_]/', '-', $matches[1] );
          wp_enqueue_style( $name, get_site_url() . $value, array( 'erw' ), null );
        }
      }
    }

  });
});

完了したら、ファイルを書き込んで終了します。

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

アセットマニフェストファイルを読み取り、JSONファイルとして解析します。キーに保存されているコンテンツにアクセスします 'files' に保存します $asset_manifest 変数。
メインのCSSファイルが存在する場合はそれをエンキューします。
最初にReactランタイムをエンキューし、次にメインのJavaScriptファイルをキューに入れ、ランタイムを依存関係として設定して、最初にページにロードされるようにします。
名前の付いたJavaScriptファイルのアセットマニフェストファイルリストを解析します static/js/<hash>.chunk.js メインファイルの後のページにそれらをエンキューします。
名前の付いたCSSファイルのアセットマニフェストファイルリストを解析します static/css/<hash>.chunk.css そして、メインのCSSファイルの後のページにそれらをエンキューします。

注：使用 wp_enqueue_script() と wp_enqueue_style 原因になります <script> と <link> エンキューされたファイルのタグがすべてのページに表示されます。最後の議論 true WordPressに、ファイルをページコンテンツフッターの下部ではなく、ページコンテンツフッターの下に配置するように指示します。 <head> エレメント。これは、JavaScriptファイルのロードによってページの残りの部分が遅くならないようにするために重要です。

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

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

この時点で、ロードするJavaScriptファイルとCSSファイルとそれらを見つける場所をWordPressに指示しました。ただし、訪問した場合 https://your_domain ブラウザでJavaScriptコンソールを見ると、HTTP404エラーが表示されます。（JavaScriptコンソールの使用方法の詳細については、この記事を確認してください。）

これは、ファイルへのURLルートが原因です（例： /static/js/main.2d1d08c1.chunk.js）がファイルへの実際のパスと一致しません（例： /wp-content/plugins/react-wordpress/widget/build/static/js/main.2d1d08c1.chunk.js).

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

Reactにアプリへの正しいパスを与えるには、 package.json Reactアプリケーションのディレクトリ内：

sudo nano widget/package.json

次に、強調表示されたものを追加します homepage ライン：

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

{
  "name": "widget",
  "version": "0.1.0",
  "private": true,
  "homepage": "/wp-content/plugins/react-wordpress/widget/build",
  "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アプリケーションを再構築します。のトップレベルに移動 widget/:

cd widget

次に、を実行します 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": "/wp-content/plugins/react-wordpress/widget/build/static/css/main.2cce8147.chunk.css",
    "main.js": "/wp-content/plugins/react-wordpress/widget/build/static/js/main.a28d856a.chunk.js",
    "main.js.map": "/wp-content/plugins/react-wordpress/widget/build/static/js/main.a28d856a.chunk.js.map",
    "runtime~main.js": "/wp-content/plugins/react-wordpress/widget/build/static/js/runtime~main.2df87c4b.js",
    "runtime~main.js.map": "/wp-content/plugins/react-wordpress/widget/build/static/js/runtime~main.2df87c4b.js.map",
    "static/js/2.9ca06fd6.chunk.js": "/wp-content/plugins/react-wordpress/widget/build/static/js/2.9ca06fd6.chunk.js",
    "static/js/2.9ca06fd6.chunk.js.map": "/wp-content/plugins/react-wordpress/widget/build/static/js/2.9ca06fd6.chunk.js.map",
    "index.html": "/wp-content/plugins/react-wordpress/widget/build/index.html",
    "precache-manifest.233e0a9875cf4d2df27d6280d12b780d.js": "/wp-content/plugins/react-wordpress/widget/build/precache-manifest.233e0a9875cf4d2df27d6280d12b780d.js",
    "service-worker.js": "/wp-content/plugins/react-wordpress/widget/build/service-worker.js",
    "static/css/main.2cce8147.chunk.css.map": "/wp-content/plugins/react-wordpress/widget/build/static/css/main.2cce8147.chunk.css.map",
    "static/media/logo.svg": "/wp-content/plugins/react-wordpress/widget/build/static/media/logo.5d5d9eef.svg"
  }
}

これにより、正しいファイルの場所がアプリに通知されますが、問題も発生します。アプリへのパスが公開されます。 src ディレクトリ、およびに精通している誰か create-react-app 訪問することができます https://your_domain/wp-content/plugins/react-wordpress/widget/src/index.js アプリのソースファイルの調査を開始します。自分で試してみてください！

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

nano /var/www/wordpress/.htaccess

ハイライトされた4行を追加します。

/var/www/wordpress/.htaccess

<IfModule mod_rewrite.c>
RewriteRule ^wp-content/plugins/react-wordpress/widget/(build|public)/(.*) - [L]
RewriteRule ^wp-content/plugins/react-wordpress/widget/* totally-bogus-erw.php [L]
</IfModule>

# 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/react-wordpress/widget/build/ また wp-content/react-wordpress/widget/public/. それ以外のものはにリダイレクトされます totally-bogus-erw.php. 名前の付いたファイルがない限り totally-bogus-erw.php トップレベルでは、このリクエストはWordPressによって処理され、404エラーが発生します。

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

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

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

ステップ7—ショートコードを作成する

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

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

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

ショートコードを含む新しい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' );
require_once( ERW_INCLUDES . '/shortcode.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://your_domain/wp-admin Webブラウザで。ページの最上部に、左側にWordPressのロゴが付いた黒いバーが表示され、その後に家のアイコン、サイトの名前、コメントのバブルアイコンと番号、[X203X ]+新規。 + New ボタンにカーソルを合わせると、メニューがドロップダウンします。 ページというメニュー項目をクリックします。

画面が読み込まれると、タイトルの追加というテキストボックスにカーソルが移動します。そこをクリックして入力を開始し、新しいページに関連するタイトルを付けます。このチュートリアルでは、 My ReactAppを使用します。

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

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

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

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

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

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

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

まず、 index.js ファイル：

sudo nano widget/src/index.js

次に、を削除します import App from './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 App = () => (
  <div className="App">
    <span className="App__Message">Hello,<br />World!</span>
  </div>
);

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

serviceWorker.unregister();

これにより、Reactアプリケーションが変更され、デフォルトのCreate React App画面を返す代わりに、次のような要素が返されるようになります。 Hello, World!.

ファイルを保存して終了します。次に開きます index.css 編集用：

nano widget/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 widget
sudo npm run build

ビルドが成功したら、更新します https://your_domain/index.php/my-react-app/ ブラウザで。これで、CSSでスタイル設定したボックスとテキストが表示されます。 Hello, World!:

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

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

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

cd ..

次に、 shortcode.php 編集用ファイル：

nano includes/shortcode.php

ショートコードファイルを更新して、次の強調表示された行を含めます。

<?php
[label /var/www/wordpress/wp-content/plugins/react-wordpress/includes/shortcode.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 );

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

ファイルを書き込んで終了します。コードがどのように追加されるかに注意してください 'color' => 'black' に $default_atts 配列。配列キー color WordPressに次のことを期待するように指示します color 属性がに渡される可能性があります [erw_widget] ショートコード。配列値、 black、デフォルト値を設定します。すべてのショートコード属性は文字列としてショートコード関数に渡されるため、デフォルト値を設定したくない場合は、空の文字列を使用できます（''）代わりは。ページ内に複数の要素が存在することが予想されるため、最後の行はIDの代わりにクラスを使用するように変更されます。

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

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

注：2番目のウィジェットはまだ表示されません。 IDで識別される単一のインスタンスではなく、クラスで識別される複数のインスタンスを期待するようにReactアプリを更新する必要があります。

次に、開く index.js 編集用：

sudo nano widget/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>
);

const targets = document.querySelectorAll('.erw-root');
Array.prototype.forEach.call(targets, target => ReactDOM.render(<App />, target));

serviceWorker.unregister();

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

最後に、開く index.css 編集用：

sudo nano widget/src/index.css

次の強調表示された行を含むようにファイルを更新します。

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

.erw-root { display: inline-block; }

.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 widget
sudo npm run build

ここで、ブラウザでページを更新すると、両方のウィジェットが表示されます。

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

各ウィジェットを一意に識別するには、サーバーから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 );
  $uniqid = uniqid('id');

  return "<div class='erw-root' data-id='{$uniqid}'></div>";
});

最初の新しい行は、プレフィックスが付いた一意のIDを生成します id. 更新された行は、IDを使用してReactルートに添付します data-id 属性。これにより、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');

  global $current_user;
  $display_name = $current_user ? $current_user->display_name : 'World';

  ob_start(); ?>
  <script>
  window.erwSettings = window.erwSettings || {};
  window.erwSettings["<?= $uniqid ?>"] = {
    'color': '<?= $args["color"] ?>',
    'name': '<?= $display_name ?>',
  }
  </script>
  <div class="erw-root" data-id="<?= $uniqid ?>"></div>

  <?php
  return ob_get_clean();
});

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

注：構文 <?= の省略形です <?php echo

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

次に、WebブラウザでWordPressページを検査します。これにより、ページのHTMLが表示されます。もし、あんたが CTRL+F と検索 window.erwSettings、ページのHTMLに次のように設定が書き込まれていることがわかります。

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

Reactから設定を取得する

Reactアプリでは、IDに基づいて設定を取得し、境界線の色の値を App プロパティとしてのコンポーネント（prop). これにより、 App コンポーネントは、値がどこから来たかを知る必要なしに値を使用します。

開ける index.js 編集用：

sudo nano widget/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 = ({ settings }) => (
  <div className="App" style={{borderColor: settings.color}}>
    <span className="App__Message">Hello,<br />{settings.name}!</span>
  </div>
);

const targets = document.querySelectorAll('.erw-root');
Array.prototype.forEach.call(targets, target => {
  const id = target.dataset.id;
  const settings = window.erwSettings[id];
  ReactDOM.render(<App settings={settings} />, target)
});

serviceWorker.unregister();

ファイルを保存して、テキストエディタを終了します。

これで、Reactアプリはウィンドウグローバルの一意のIDを使用します window.erwSettings 設定を取得してそれらをに渡すオブジェクト App 成分。これを有効にするには、アプリケーションを再コンパイルします。

cd widget
sudo npm run build

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

結論

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

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

堅実なReact基盤で何ができるかについてさらに読むには、次のチュートリアルの1つを調べてみてください。

Reactを使用してDigitalOceanAPIからデータを表示する方法は、Reactの楽しく実用的なユースケースを提供します。
ReactとTypeScriptを使用して顧客リスト管理アプリを構築する方法は、TypeScriptとともにReactのより高度な使用法を提供します。

getdocs

13036

序章

前提条件

ステップ1—ファイルシステムのアクセス許可の更新と構成

ステップ2—基本的なWordPressプラグインを作成する

ステップ3—Reactアプリケーションを初期化する

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

ステップ5—アセットマニフェストの解析

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

ステップ7—ショートコードを作成する

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

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

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

JavaScriptに設定を書き込む window 物体

Reactから設定を取得する

結論

getdocs

JavaScriptに設定を書き込む `window` 物体