WordPress用に設定されたFrontityReactFrameworkを理解する

Frontityは、高速なWordPressWebサイトを作成するための最新のフロントエンドフレームワークです。

WordPressは、長い間最も人気のあるコンテンツ管理システムです。インターネット上のWebサイトの30%以上に電力を供給しているだけでなく、WordPressエコシステムを存続させ強力に保つ貢献者の巨大なコミュニティを誇っています。

WordPressは主にPHPベースのサーバーソフトウェアです。 WordPressには、主にPHPベースのプラグインの形式である何千ものカスタム拡張機能があります。したがって、当然のことながら、非PHPフレームワークをWordPressと統合する多くの試みがありました。特に、Web開発でフロントエンドスペースを急速に引き継いでいるJavascriptフレームワークです。

チャートを実際に上回っているそのようなフレームワークの1つは、Frontityと呼ばれるWordPress用のReact.jsフレームワークです。スペインを拠点とするスタートアップによって開発されました。フロンティアの開発は数年前から行われています。しかし、最近、WordPressの背後にある会社が主導する100万ユーロのラウンドを調達したときにニュースがありました。 Automattic ベンチャーキャピタル KFund。この背後にある理由を理解するには、まず、Frontityフレームワークとは何か、そしてそれがもたらすメリットを理解することが重要です。

フロンティアとは何ですか?

Frontityについて学ぶ前に、WordPressの基本的なアーキテクチャを知ることが不可欠です。ご存知かもしれませんが、WordPressはPHPベースのサーバーソフトウェアです。リクエストを処理するにはApacheやNginxなどのサーバーソフトウェアが必要であり、データ(投稿、ページ、ユーザーなど)を保存するにはMySQLなどのデータベースソフトウェアが必要です。

WordPressアーキテクチャ

開くと、WordPress Webサイトのメインページを言うと、 index.php バックエンドのファイル。ホームページのHTML、CSS、JSが返され、ブラウザに表示されます。したがって、PHPはWebサイトのCommon Gateway Interface(CGI)として機能するため、フロントエンドに対するあらゆる種類の拡張機能はPHPベースである必要があります。

フロンティアーキテクチャ

フロンティアは React-basフレームワークを編集したので、最初にReactJSについて少し話しましょう。 Reactは、Facebookによって開発および公開されたフロントエンドのJavascriptフレームワークです。すばやく安定したレスポンシブUIを作成するのに便利なため、非常に人気があります。 ReactはNodeJSモジュールとして機能するため、Reactを使用するWebサイトはNodeJSサーバーに基づいている必要があります。

さて、Reactのような純粋なJavascriptフレームワークを使用してフロントエンドを拡張したい場合、つまりカスタムテーマを作成したい場合は、そうするのは面倒です。その理由は、Reactのようなフレームワークが独自のサーバーを起動するNodeと連携して機能するためです。また、前述したように、WordPressはバックエンドのPHPCGIサーバーで動作します。したがって、React forWordPressを使用してカスタムテーマとUIを構築する簡単な方法はありません。

ただし、WordPressデータベースからリモートでデータを取得する方法があります。これは、WPバージョン4.7以降のコアWordPressに完全に統合されているWordPress RESTAPIを使用して実行できます。 WordPressデータをリモートでフェッチできる場合は、フェッチしたデータを必要に応じて表示できるようになります。ユーザーは長い間RESTAPIを使用して、データベースから直接WordPressデータにアクセスするためのカスタムアプリやWebページを開発してきました。これらのタイプのコンテンツ管理システム(CMS)は、 ヘッドレス CMS。

フロンティアはまさにこのコンセプトに基づいています。 REST APIを介してWordPressデータベースに接続し、取得したデータの解析と整理を行います。 Webサイトの表示に使用するテーマはあなたに任されています。 Reactをベースにしているため、どのReactテーマでもWebサイトに使用できます。必要に応じて、カスタムテーマを開発することもできます。 WordPressのPHPベースのフロントエンドは、コンテンツの作成や設定の変更のために作成者/管理者によって引き続き使用されます。ただし、FrontityベースのフロントエンドがWebサイトのメインページとして使用されます。

したがって、Frontityのセットアップでは、2つのサーバーが必要になります。1つはREST APIを実行してWordPressデータを返すWordPressサーバーで、もう1つはFrontityを実行してRESTAPIを呼び出してReactを使用してデータを表示するNodeJSサーバーです。 。

今後の方法?

WordPressの背後にある会社が100万ユーロを調達し、ReactがWordPressに豊富なユーザーエクスペリエンスをもたらしていることから、Frontityは現代のWordPressを利用したWebサイトの前進であると言っても過言ではありません。 WordPress UIは、表示部分がFrontityサーバーにシフトされる間、コンテンツを作成するためのダッシュボードとして引き続き使用されます。

フロンティティについて詳しくは、こちらをご覧ください。 WordPress Webサイトをお持ちで、Frontityを試してみたい場合は、ここに記載されている手順に従ってください。