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

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

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

ヘッドレスワードプレスとは何ですか？

ヘッドレスWordPressWebサイトは、主にコンテンツ管理にWordPressを使用し、他のテクノロジーを使用してフロントエンドを構築し、Webサイトの訪問者にコンテンツを表示するサイトです。

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

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

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

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

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

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

ReactJS用のWordPressサイトを設定する方法

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

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

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

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

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

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

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

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

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

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

REST APIから取得しようとしている情報については、すべてのチェックボックスをオンにしてください。

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

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

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

これで、URLはhttps://exampe.com/wp-json/wp/v2/booksのようになります。

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

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

デフォルトでは、ACFはWordPressRestAPIと通信しません。 したがって、 ACFRESTAPIプラグインもダウンロードする必要があります。

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

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

カスタム投稿タイプ内に新しいフィールドが入力され、本の発行元を定義できます。 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

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

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

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

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

ReactJSで投稿データをレンダリングする方法

Book.jsファイル内で、WordPressRestAPIからデータをフェッチします。 以下は、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'から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 {author、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フレームワークを試すこともできます。 WordPressRestAPIでできることはたくさんあります。 空は限界なので、先に進んで、次のWebプロジェクトにWordPressを使用してください。