」のIDを確認します。src/index.js強調表示された行を変更して追加します。'./serviceWorker';serviceWorker.unregister();最後に、編集が完了したらファイルを保存して終了します。+`ファイルに2つの重要な変更を加えました。+`に変更したため、アプリケーションの名前空間になります。ReactDOM.render()+`の呼び出しを囲みました。+`ディレクトリのJavaScriptファイルまたはCSSファイルを変更した後、変更を組み込むためにアプリを再コンパイルすることが重要です。アプリを再構築するには、次を実行します。+`ディレクトリにはJavaScriptファイルとCSSファイルの形式で動作するReactアプリケーションが含まれます。次のステップでは、ページのJavaScriptとCSSをキューに入れるPHPファイルを設定します。ステップ4-JavaScriptファイルとCSSファイルをキューに入れるこのステップでは、WordPressのアクションとフィルターを使用して次のことを行います。WordPressページのロードサイクルの適切な時点で、スクリプトエンキューコードを出力します。JavaScriptファイルとCSSファイルをキューに入れるページの読み込み速度に最も影響を与えない方法で。filters]を主要なフックとして使用します。アクションを使用すると、ページの読み込みサイクルの指定された時間にコードを実行でき、フィルターは、他の方法では所有していない関数の戻り値を変更することで特定の動作を変更します。これらのフックを使用するには、アセットマニフェストを解析するコードを含むPHPファイルを作成します。+`タグに書き込まれます。+`プラグインディレクトリに移動します。`タグを配置することから始めます。+`をチェックする行を追加します。これは、前述のように、すべてのPHPファイルのベストプラクティスです。);このファイルを保存して終了します。編集用にファイルを開きます。react-wordpress.php次の強調表示された行を追加します。+`ディレクトリから他のPHPファイルを要求することは、WordPressプラグインの一般的なパターンです。require_once()+`関数は、引数として渡されたファイルのコンテンツを、そのファイルのPHPコードがインラインで直接記述されているかのように解析します。+`は例外を発生させます。+`が複数回解析されないようになります。`が複数回指定されています。ファイルを保存して終了します。enqueue.php`を再度開きます。includes/enqueue.php次に、強調表示された次のコードを追加します。+`フェーズで実行されます。+`属性を設定すると、DOMの構築とページレンダリングをブロックするのではなく、スクリプトを非同期に読み込むようにブラウザに指示します。+`アクションがフロントエンドアイテムをエンキューします。[このページ]を参照してください。ファイルを書き込んで終了してください。これで、WordPressにスクリプトおよびスタイルシートタグをページに書き込むように指示しました。この次のステップでは、アセットマニフェストと呼ばれるファイルを解析します。これにより、キューに入れる必要があるすべてのファイルへのパスが得られます。ステップ5-資産マニフェストの解析このステップでは、Reactビルドによって生成されたアセットマニフェストを解析して、JavaScriptファイルとCSSファイルのリストを作成します。アプリケーションをビルドすると、Reactビルドスクリプトはプロジェクトを複数のJavaScriptおよびCSSファイルにビルドします。各ファイルにはファイルのコンテンツのハッシュが含まれるため、ファイルの量と名前はビルドごとに異なります。アセットマニフェストは、最後のビルドで生成された各ファイルの名前とそのファイルへのパスを提供します。プログラムで解析することにより、ページに書き込むスクリプトとスタイルシートのタグは、名前が変わっても常に正しいファイルを指すことが保証されます。/build/asset-manifest.jsonこれは次のようになります。.css`で終わるオブジェクトキーを探します。includes/enqueue.phpハイライトされたスニペットを追加します。});});完了したら、ファイルを作成して終了します。強調表示されたコードは次のことを行います。資産マニフェストファイルを読み取り、JSONファイルとして解析します。+`変数に保存します。メインCSSファイルが存在する場合、キューに入れます。最初にReactランタイムをエンキューし、次にメインJavaScriptファイルをエンキューし、ランタイムを依存関係として設定して、最初にページにロードされるようにします。+`という名前のJavaScriptファイルのアセットマニフェストファイルリストを解析し、メインファイルの後のページでキューに入れます。+`という名前のCSSファイルのアセットマニフェストファイルリストを解析し、メインCSSファイルの後のページでキューに入れます。このステップでは、アプリで使用されるスクリプトとスタイルのファイルパスを分離しました。+`ディレクトリを指していること、およびブラウザーからソースファイルにアクセスできないことを確認します。ステップ6-静的ファイルの提供と保護この時点で、WordPressにロードするJavaScriptファイルとCSSファイルとそれらの場所を指定しました。404エラーが表示されます。[この記事]を参照してください。このステップでは、Reactにビルドディレクトリの場所を伝えることにより、この問題を修正します。+`ファイルに追加して、ソースファイルがブラウザーで表示されないようにします。package.json`を開きます。}}ファイルを書き込んで終了します。次に、Reactアプリケーションを再構築します。+`のトップレベルに移動します。buildビルドコマンドが完了したら、コンテンツをターミナルに出力してアセットマニフェストを検査します。build/asset-manifest.jsonファイルパスがすべて変更されていることがわかります。`で、アプリのソースファイルの探索を開始します。+`ファイルに追加します。/var/www//.htaccess4つの強調表示された行を追加します。`にあるものへのブラウザリクエストを許可するよう指示します。`にリダイレクトされます。+`という名前のファイルがない限り、このリクエストはWordPressによって処理され、404エラーが表示されます。Streamなど、リクエストアクティビティを監視し、404をログに記録するWordPressプラグインがあります。ログには、ユーザーが404を受け取ったときにリクエストされたIPアドレスとページがリクエストに表示されます。+`ディレクトリをクロールしようとしているかどうかがわかります。ファイルを書き込んで終了してください。JavaScriptファイルとCSSファイルをページに読み込むために必要なルーティングを確立したので、JavaScriptが対話してアプリをレンダリングするHTML要素をページに追加するショートコードを使用します。ステップ7-ショートコードの作成ショートコードを使用すると、非常にシンプルなページ内構文で、サーバー側のデータで補間された複雑なHTMLブロックを挿入できます。このステップでは、WordPressショートコードを作成して登録し、それを使用してアプリケーションをページに埋め込みます。プラグインのトップレベルに移動します。/var/www//wp-content/plugins//ショートコードを含む新しいPHPファイルを作成します。`が必要になるようにします。react-wordpress.php次に、強調表示された次の行を追加します。);ファイルを書き込んで終了します。次に、新しく作成したショートコードファイルを開きます。includes/shortcode.php次のコードを追加してください。id='erw-root'></div>";});このコードには大部分が定型文が含まれています。+`をページに出力します。shortcode.php`を終了します。Reactアプリの動作を確認するには、新しいWordPressページを作成し、ショートコードを追加する必要があります。+という別のリンクがあります。+新規*ボタンにカーソルを合わせると、メニューがドロップダウンします。[ページ]というメニュー項目をクリックします。いうテキストボックスにフォーカスされます。そこをクリックして入力を開始すると、新しいページに関連するタイトルが付けられます。Gutenbergエディターを使用していると仮定すると、ページ上部のタイトルの下に、書き込みを開始または/と入力して選択するテキスト行が表示されます。そのテキストにカーソルを合わせると、右側に3つのシンボルが表示されます。+」に似た最も近いものを選択します。次に、ウィンドウの右上隅にある青い[公開]ボタンをクリックし、[公開]を押して確認します。[ショートコードを入力して公開]ページが公開されたことを確認する緑色のバーが表示されます。*ページを表示*リンクをクリックします。App]ページに基本的なReactアプリのレンダリングができたので、管理者がサーバー側で提供するオプションでそのアプリをカスタマイズできます。ステップ8-サーバー生成設定の挿入このステップでは、サーバー生成データとユーザー提供データの両方を使用して、アプリケーションに設定を注入します。これにより、アプリケーションで動的データを表示し、ページ内でウィジェットを複数回使用できるようになります。index.js`の内容を更新します。Hello、World!+`という要素が返されます。ファイルを保存して終了します。`のスタイルは正方形の内側に垂直および水平にテキストをレンダリングします。ファイルを書き込んで終了し、アプリケーションを再構築します。Hello、World!+」が表示されます。Application]次に、ユーザーが指定した境界線の色とサイズで構成されるカスタム設定を追加します。サーバーから現在のユーザーの表示名を渡します。引数を受け入れるためのショートコードの更新ユーザー提供の引数を渡すには、まずユーザーに引数を渡す方法を提供する必要があります。ターミナルに戻り、プラグインのトップレベルに戻ります。includes/shortcode.php以下の強調表示された行を含むようにショートコードファイルを更新します。);});ファイルを書き込んで終了します。+`配列に追加するかに注目してください。+`ショートコードに渡される可能性があることをWordPressに指示します。+」はデフォルト値を設定します。ページ内に複数の要素があることが予想されるため、最後の行はIDではなくクラスを使用するように変更されます。Hello、World!」ボックスの下にある「編集」ボタンをクリックします。ブラウザのWordPressページを更新して、ショートコードの2番目のインスタンスを追加し、両方のインスタンスに色属性を追加します。[2番目のウィジェットを追加]青い[更新]ボタンをクリックして保存します。/src/index.js以下で更新します。</div>);serviceWorker.unregister();ファイルを書き込んで終了します。+`で各インスタンスのReactアプリを呼び出します。そのため、ショートコードを2回使用すると、ページに2つの正方形が表示されます。/src/index.css次の強調表示された行を含むようにファイルを更新します。100%;}この追加された行を使用すると、複数の隣接するウィジェットが上下に並んで表示されます。ファイルを保存して終了します。次に、Reactアプリを再コンパイルします。[2つのウィジェット]ウィジェットにはまだ境界線の色が表示されないことに注意してください。これについては、今後のセクションで説明します。各ウィジェットインスタンスを一意に識別する各ウィジェットを一意に識別するために、サーバーからIDを渡す必要があります。+`属性を通じて実行できます。ページ上の各ウィジェットには異なる設定がある可能性があるためです。includes/shortcode.php次の強調表示された行を持つように更新します。」を持つ一意のIDを生成します。+`属性を使用してIDをReactルートにアタッチします。これにより、ReactでIDにアクセスできるようになります。ファイルを保存しますが、まだ終了しないでください。window`オブジェクトへの設定の書き込みショートコードファイルでは、ウィンドウグローバルJavaScriptオブジェクトのページに設定を書き込みます。+`オブジェクトを使用すると、React内から確実にアクセスできます。+`ブロックを書き込みます。ファイルを保存して終了します。WebブラウザーのWordPressページ。これにより、ページのHTMLが表示されます。+`を検索すると、ページのHTMLに次のように設定が書き込まれていることがわかります。`コンポーネントに渡します。+`コンポーネントは値がどこから来たかを知る必要なく値を使用できます。/src/index.js次の強調表示された行が含まれるように更新します。document.querySelectorAll('.erw-root');serviceWorker.unregister();ファイルを保存して、テキストエディターを終了します。+`コンポーネントに渡します。これを有効にするには、アプリケーションを再コンパイルします。buildこの最後の手順を完了した後、ブラウザーでWordPressページを更新します。ユーザーが提供する境界線の色とサーバーが提供する表示名がウィジェットに表示されます。[設定が適用されたウィジェット]結論このチュートリアルでは、内部にReactアプリケーションを含む独自のWordPressプラグインを作成しました。Adminページビルダー内にアプリケーションを埋め込み可能にするためのブリッジとしてショートコードを構築し、最後にページ上のウィジェットをカスタマイズしました。これで、配信メカニズムがすでに整っているという自信を持って、Reactアプリケーションを拡張できます。WordPressのこの基盤により、クライアント側のエクスペリエンスに集中できるようになり、アプリケーションが拡大および成長するにつれて、WordPressのインストールで機能する本番指向のツールやテクニックを簡単に追加できます。Reactの強固な基盤で何ができるかについてさらに読むには、次のチュートリアルのいずれかを試してください。APIからのデータを表示する方法は楽しく実用的ですReactのユースケース。ReactとTypeScriptを使用して顧客リスト管理アプリを構築する方法は、TypeScriptとともにReactのより高度な使用法を提供します。