WordPressとReactを使用して、Webアプリケーション用のヘッドレスCMSを作成します

WordPress Rest APIは、WordPressが提供する多くの優れた機能の1つです。 開発者は魅力的なプラグインやテーマを作成でき、WordPressCMSを使用してサードパーティのアプリケーションを強化することもできます。

最新のWebアプリケーションでは、Webサイトのコンテンツを管理するためのコンテンツ管理システムも開発されています。 これにより、開発者の作業負荷が増える可能性があります。 Rest APIが提供する可能性は非常に多いため、WordPressとReactをJavaScriptベースのWebアプリケーションのヘッドレスCMSとして使用することも考えられます。

では、ヘッドレスワードプレスとは一体何なのか？

「ヘッドレス」であることは、CMSにヘッダーセクションがないことを意味するものではありません。 これは、フロントエンドの構築に使用されるテクノロジーに関係なく、CMSを汎用コンテンツ管理システムとして使用できることを意味します。

Rest APIを使用すると、開発者は、両方が同じ言語のJSONを話す限り、クロステクノロジーインターフェイスと対話できます。 WordPress Rest APIは、多数のWebテクノロジーで理解できるJSON形式でデータを吐き出します。 JSONは、JavaScriptオブジェクトのテキストベースの表現であり、キーと値のペアでデータが含まれています。

 "友達"： [
      {{
        「id」：0、
        「名前」：「ハリエット・スタンリー」
      }、
      {{
        「id」：1、
        「名前」：「ベントンオドム」
      }、
      {{
        「id」：2、
        "名前"： "ジャッキーエドワーズ"
      }
    ]、

今日は、基本的なWebアプリケーションのヘッドレスCMSとしてReactとWordPressで使用することにより、 WordPress RestAPIのパワーを示します。

ヘッドレスWordPressCMSを使用する利点

オープンソースプラットフォームであること。 WordPressは、あらゆる種類のWebサイトを作成するための優れた柔軟性を提供します。 WordPressをヘッドレスCMSとして使用すると、任意のWebテクノロジーを使用してWebアプリケーションのフロントエンドを作成し、最も人気のあるCMSの1つを使用してそのコンテンツを管理できます。

ReactまたはAngularで構築された既存のWebアプリにブログ機能を追加する必要がある状況に遭遇する可能性があります。 本格的なコンテンツ管理システムをネイティブフレームワークでコーディングする代わりに、 ヘッドレスWordPressCMSを使用して、RestAPIを使用してコンテンツを管理します。

WordPressサイトのセットアップ

WordPressサイトのセットアップから始めましょう。これは、フロントエンドのReactアプリケーションのデータソースとして機能します。

WP-Rest APIプラグインのzipファイルをgitからダウンロードし、WordPressプラグインフォルダー内のzipフォルダーをアップロードします。 ファイルがアップロードされたら、プラグインをアクティブにします。 これにより、WordPressWebサイト内でWordPressRestAPIが有効になります。

次に、[設定]→[パーマリンク]に移動し、[投稿名]または[カスタム構造]を選択します。

API呼び出しを使用しているため、 PostmanのChrome拡張機能をダウンロードします。 Postman内に、次の形式でURLを入力します。

https://example.com/wp-json/wp/v2/posts

上記のURLは、WordPressサイト内の投稿データを取得します。

カスタム投稿タイプを作成するためのカスタム投稿タイプUIプラグインをダウンロードします。 このカスタム投稿は、次のステップでWordPress withReactを使用するときに表示されます。

プラグインをインストールしてアクティブ化し、新しい投稿タイプを追加します。 このチュートリアルでは、Booksのカスタム投稿タイプを作成します。

Post Type Slug内に、カスタム投稿の名前を入力します。

[ REST APIに表示]チェックボックスがtrueに設定されており、RESTAPIベーススラッグも設定されていることを確認してください。 WordPressをヘッドレスCMSとして使用する場合、これは必須です。

RESTAPIから取得しようとしている情報のすべてのチェックボックスをオンにします。

変更を保存すると、サイドバーに新しいオプションが表示されます。 それをクリックして、カスタム投稿タイプ内に新しいブックを追加します。

サンプルデータと投稿の抜粋を入れて、最初の本を作成しました。

APIを介してデータが利用可能であることを確認するには、先に進み、Postman内のURLにアクセスします。

さて、URLはhttps://exampe.com/wp-json/wp/v2/ブックのようなものになるはずです

RestAPIプラグインにACFやACFを使用して、Publisherなどのフィールドを追加することもできます。

両方のプラグインをインストールしてアクティブ化します。

デフォルトでは、ACFはWordPress Rest APIと通信しないため、 ACF RESTAPIプラグインもダウンロードする必要があります。

カスタムフィールドプラグインを使用して、書籍の発行者フィールドを追加します。

リストから目的の投稿タイプを選択してください。 その後、「公開」を押します。

カスタム投稿タイプ内に新しいフィールドが入力され、本の発行元を定義できます。 ReactJSWebアプリケーションにデータを送信するためにWordPressをセットアップするために必要なのはこれだけです。

React入門

ReactJSとは

Reactは、Facebookと開発者コミュニティによって管理されているWeb用のJavaScriptライブラリです。 JavaScriptはWeb開発のための強力なツールであり、Webサイトの機能を強化するためにJavaScriptで記述されたライブラリがいくつかあります。 ReactJSは主に、高速で堅牢、かつ動的なシングルページアプリケーションを開発するために使用されます。

Reactアプリのセットアップ

Reactを使用してアプリをビルドするには、コンピューターに次の依存関係をインストールする必要があります。

• NodeJSとNPM。
• SublimeやVisualStudioCodeなどのテキストエディタ。
• バージョン管理用のGit（オプション）

環境をセットアップした後、コマンドラインを開き、次のコードを実行してReactJSでプロジェクトを作成します。

 npxcreate-react-appフロントエンド

アプリが作成されたら、 cd（ディレクトリの変更）をアプリケーションフォルダーに移動し、次のコマンドを入力してAPI呼び出し用のAxiosパッケージをインストールします。

 npm i axios

次に、お気に入りのテキストエディタ内のフォルダを開きます。 Visual StudioCodeを使用しています。

コマンドnpmstartを実行して、アプリケーションを起動します。

すべてが正常に機能すれば、WordPressをヘッドレスCMSとして使用してReactでWebアプリケーションを構築する準備が整います。

srcフォルダー内に新しいフォルダー ' components 'を作成し、 ' components 'フォルダー内に新しいファイル ' Books.js 'を作成します。

ReactJSでの投稿データのレンダリング

Book.jsファイル内で、 WordPress RestAPIからデータをフェッチします。 以下は、Rest APIエンドポイント（私の場合は ' / books '）を要求し、データをJSON形式で表示するコードです。

 'react'からReact、{Component}をインポートします
'axios'からaxiosをインポートします。

エクスポートクラスBooksはComponent {を拡張します
   状態= {
       本：[]、
       isLoaded：false
   }

 componentDidMount（）{
   axios.get（ 'https://wordpress-179008-1030625.cloudwaysapps.com//wp-json/wp/v2/books/'）
       .then（res => this.setState（{
           書籍：res.data、
           isLoaded：true
       }））
       .catch（err => console.log（err））
   }


   与える（） {
      console.log（this.state）;
       戻る （
           <div>
              
           </ div>
       ）。
   }
}

デフォルトのブックをエクスポートする

上記のコードは、コンソールにデータの配列を表示し、レンダリングブロック内で使用されます。

次に、 App.jsファイル内で、以下に示すようにBooksコンポーネントを呼び出します。

 'react'からReactをインポートします。
インポート './App.css';
'./components/Books'から本をインポートします。

関数App（）{
 戻る （
   <div className = "App">
    <本/>
   </ div>
 ）;
}

デフォルトのアプリをエクスポートします。

App.jsはWebアプリケーションのエントリポイントであるため、このファイル内の「Books」コンポーネントを参照することが重要です。

ReactJSでの投稿データの表示

renderメソッド内にコードを追加することでデータを表示できます。

 与える（） {
       const {books、isLoaded} = this.state;
       戻る （
           <div>
               {books.map（book =>
               <h4> {book.title.rendered} </ h4>
               ）}
           </ div>
       ）;
   }

ここにデータを表示する代わりに、新しいコンポーネントを作成し、親コンポーネントとは別にしたいので、「 BookItems.js 」という名前を付けます。

Bookk.js内のrenderメソッドを次のように変更します。

 与える（） {
       const {books、isLoaded} = this.state;
       戻る （
           <div>
               {books.map（book =>
               <BookItems key = {book.id} book = {book} />
               ）}
           </ div>
       ）;
   }

次に、代わりにBookItemsコンポーネントをレンダリングする必要があります。

BookItems.js内に、次のコードを追加します。

 'react'からReact、{Component}をインポートします
'axios'からaxiosをインポートします。
'prop-types'からPropTypesをインポートします。

エクスポートクラスBookItemsはComponent {を拡張します
 
   与える（） {
       const {title} = this.props.book;
       戻る （
           <div>
              <h2> {title.rendered} </ h2>
           </ div>
       ）。
   }
}

デフォルトのBookItemsをエクスポートする

上記のコードでは、本の小道具を参照してタイトルやその他の情報を取得しています。

注： 「Books」コンポーネント内のBookItemsコンポーネントへの参照を必ず指定してください。

BookItems.jsの最終バージョンは次のようになります。

 'react'からReact、{Component}をインポートします
'prop-types'からPropTypesをインポートします。
'axios'からaxiosをインポートします。
エクスポートクラスBookItemsはComponent {を拡張します

   状態= {
       imgUrl： ''、
       著者： ''、
       isLoaded：false
   }

   static propTypes = {
       本：PropTypes.object.isRequired
   }

   componentDidMount（）{
       const {featured_media、author} = this.props.book;
       const getImageUrl = axios.get（ `https://wordpress-179008-1030625.cloudwaysapps.com//wp-json/wp/v2/media/$ {featured_media}`）;
       const getAuthor = axios.get（ `https://wordpress-179008-1030625.cloudwaysapps.com//wp-json/wp/v2/users/$ {author}`）;
      
       Promise.all（[getImageUrl、getAuthor]）。then（res => {

           console.log（res）;
           this.setState（{
               imgUrl：res [0] .data.media_details.sizes.full.source_url、
               著者：res [1] .data.name、
               isLoaded：true

           }）;
       }）;
    }
 
   与える（） {
       const {タイトル、抜粋} = this.props.book;
       const {作成者、imgUrl、isLoaded} = this.state;
       戻る （
           <div>
              <h2> {title.rendered} </ h2>
              <img src = {imgUrl} alt = {title.rendered} />
              <strong> {作成者} </ strong> <br/>
              <div危険なSetInnerHTML = {{__ html：excerpt.rendered}}> </ div>
           </ div>
       ）。
   }
}

デフォルトのBookItemsをエクスポートする

そして、ブラウザの出力は次のようになります。

一番きれいじゃないですか？ それは、スタイリングがこのチュートリアルの範囲外であるためです。

まとめ！

今日は、WebアプリケーションのヘッドレスCMSとしてReactでWordPressを使用する方法を紹介しました。 ReactコードはGitでもダウンロードできます。 ただし、Reactに限定されません。 VueJS、Angular、または任意のJavaScriptフレームワークを試すこともできます。 WordPress RestAPIでできることはたくさんあります。 空は限界なので、次のWebプロジェクトにWordPressを使用してください。