DOnations]プログラム。Surveys)によるとhttps://w3techs.com/technologies/details/cm-wordpress/all/all[overインターネット上のウェブサイトの33%]。人気が高い理由の1つは、明確でわかりやすいドキュメントを簡単にセットアップできることです。WordPress開発者をサポートする多くのコミュニティリソースがあります。WordPressは、安価な、または無料のすぐに使えるソリューションで多くのユースケースを解決できます。最後に、WordPressには明確に定義されたプラグインシステムが付属しており、開発者はカスタムコードを記述して独自の機能を追加できます。このプラグインシステムは十分に文書化されており、機能します。このチュートリアルの後半で説明するように、使いやすいです。[JavaScript]を使用できます。Reactは、開発者が一般的な静的ページまたはフォームを超える動的でインタラクティブなUIを簡単に作成できるように設計されたJavaScriptライブラリです。Facebookによって作成され、セキュリティ、安定性、および使いやすさのために十分に維持されているReactは、優れたドキュメントと、ドキュメントとプラグインの確立されたコミュニティ主導のエコシステムを備えているため、人気があります。このチュートリアルでは、ReactアプリケーションをWordPressサイトに埋め込むためのベストプラクティスを紹介します。その例では、一般的なユースケースを使用します。複数のページに埋め込まれることを目的としたウィジェットを作成し、時にはページに複数回使用することもあります。[WordPressショートコード]として実装されます。HTML要素を直接レンダリングする代わりに、PHP関数を呼び出します。PHP関数は、データベースからのデータで補間されたHTMLをレンダリングします。Adminのページに挿入して、そのページを公開します。そのページで、ブラウザーに表示されるReactウィジェットを見ることができます。前提条件このチュートリアルを実行するには、次のものが必要です。18.04サーバーは、ファイアウォールを設定しますサーバーとルート権限を持つ新しいユーザー。完全に登録されたドメイン名。このチュートリアルでは、全体を通して例として「++」を使用します。[Freenom]で無料で入手するか、選択したドメインレジストラを使用できます。次の両方のDNSレコードがサーバーに設定されています。DNSの概要]を参照してください。サーバーのパブリックIPアドレスを指す「++」を持つAレコード。+」を持つAレコード。サーバーへのApache、MySQL、およびPHPのインストール。18.04上のPHP(LAMP)スタック。Encryptを使用してApacheを保護する方法]で無料のSSL証明書を生成します。18.04]およびその前提条件。18.04にNode.jsをインストールする方法]。+」に置き換えてこのチュートリアルの手順に従ってください。WordPressディレクトリ内のファイルを表示または編集するアクセス権がありません。後でファイルを追加および変更してWordPressプラグインとReactアプリケーションを作成するため、これは問題です。この問題を解決するには、このステップでWordPress設定を更新して、WordPressファイルを編集するためのアクセス権を付与します。+」に置き換えて、次のコマンドを実行します。/var/www/このコマンドを分解してみましょう。+`として実行できます。+-このコマンドはファイルの所有権を変更します。+-このフラグは、すべてのサブフォルダーとファイルを含む所有権を再帰的に変更します。+`のままにして、Apacheがファイルにアクセスしてファイルにアクセスできるようにします。+-これはWordPressディレクトリへのパスを指定します。これは、所有権が変更されるディレクトリです。このコマンドが成功したことを確認するには、WordPressディレクトリの内容をリストします。/var/www/ディレクトリの内容のリストが表示されます。+`という名前のファイルのWordPressコアに含まれているファイルです。18.04にLAMPでWordPressをインストールする方法]。上記の出力のようにアクセス許可が表示される場合、これはファイルとディレクトリが正しく更新されていることを意味します。このステップでは、WordPressのインストールを更新して、自分でファイルを編集できるようにしました。次のステップでは、そのアクセスを使用して、WordPressプラグインを構成するファイルを作成します。ステップ2-基本的なWordPressプラグインの作成WordPressディレクトリ内のファイルを変更するためのアクセス権があるので、基本的なWordPressプラグインを作成し、インストールに追加します。これにより、Reactはチュートリアルの後半でWordPressと対話できるようになります。plugins`内のディレクトリ。+」のディレクトリ内のファイル。WordPressに重要なプラグインメタデータを提供する、そのファイルの上部にある特別なコメント。後で記述するReactコードのプラグインを作成するには、まずWordPressプラグインのディレクトリを作成します。簡単にするために、このチュートリアルではプラグインに「」という名前を付けます。次のコマンドを実行し、「」をApacheドキュメントルートに置き換えます。/var/www//wp-content/plugins/次に、新しく作成したディレクトリに移動します。後続のコマンドはここから実行されます。/var/www//wp-content/plugins/今すぐプラグインファイルを作成しましょう。+」で呼び出されるnanoを使用します。https://en.wikipedia.org/wiki/Pico_(text_editor)[Pico]、https://www.digitalocean.com/community/tutorials/など、他の任意のテキストエディターを自由に使用することもできます。[Vim]、またはhttps://www.gnu.org/software/emacs/[Emacs]をインストールして使用します。.phpファイルに次の行を追加して、プラグインの開始を作成します。`定数をチェックする行は、悪意のあるアクターがURLでこのスクリプトに直接アクセスするのを防ぎます。+`が定義されている場合、ファイルがWordPress環境を介してロードされたことを確認できます。[WP管理プラグインページ][アクティブ化]をクリックして、プラグインを有効にします。*という行が表示されます。[プラグインアクティベーション後のWP管理プラグインページ]次に、プラグインの構造を確立します。.php次に、以下の強調表示された行を追加して、有用な定数を定義するように更新します。);新しく追加された行で、3つの定数を定義しました。+-これはReactアプリケーションへのパスになります。+-これは、Reactアセットマニフェストへのパスです。これは、アプリケーションが機能するためにページに含める必要があるJavaScriptファイルとCSSファイルのリストを含むファイルです。+-このサブディレクトリには、すべてのPHPファイルが含まれます。plugin_dir_path(FILE)+`を参照することに注意してください。これは、そのファイルへのディレクトリパスを表します。定数定義を追加したら、ファイルを保存してエディターを終了します。次に、フォルダーを作成します。includesWordPressプラグインを作成するために必要なPHP関連のファイルとフォルダーを作成したので、Reactの初期ファイルとフォルダーを作成します。App]を使用して、Reactアプリケーションを初期化します。`を使用してテストされました。asset-manifest.json`の構造に重大な変更を加えました。この以前のバージョンは修正なしでこのチュートリアルと互換性がありません。Appをインストールします。+`をインストールします。+`フラグはシステム全体にインストールします。+)を実行するときに、インストールしたバージョンが使用されます。Appをインストールしたら、それを使用してReactアプリケーションを作成します。このチュートリアルでは、アプリに「++」という名前を付けます。[npx]を使用します。[NPM]に同梱されているバイナリです。NPMでホストされているCLIツールおよびその他の実行可能ファイルを簡単に使用できるように設計されています。ローカルに見つからない場合、これらのツールがインストールされます。create-react-app`コマンドは、プロジェクトフォルダーと基本的なReactアプリに必要なすべてのファイルを生成します。追加のビルドツールをインストールして構成する必要なく、実稼働用にアプリケーションをビルドできる依存関係とスクリプトが事前に含まれています。`++`アプリをセットアップすると、ターミナルの出力は次のようになります。hacking!次に、新しく作成されたディレクトリに移動します。`を使用してアプリケーションをビルドできるようになりました。package.json」を調べます。react-scripts.js`実行可能ファイルを呼び出します。+`によって提供されるコアコンポーネントの1つです。これにより、ビルドスクリプトが呼び出されます。[webpack]を使用して、プロジェクトファイルをブラウザが理解できる静的なアセットファイルにコンパイルします。これを行うには:依存関係の解決。SASSファイルをCSSとJSXに、またはhttps://www.typescriptlang.org/[TypeScript]をJavaScriptにコンパイルします。ES6構文をhttps://www.w3schools.com/js/js_es5.asp[ES5]構文に変換し、ブラウザー間の互換性を高めます。buildコマンドが完了すると、次のような出力が表示されます。https://bit.ly/CRA-deployこれでプロジェクトがビルドされましたが、次のステップに進む前に、アプリケーションが存在する場合にのみロードするようにすることをお勧めします。Reactは、アプリケーションをレンダリングするDOM内のHTML要素を使用します。