例: エクスペリエンスビルダーサイトへの JSON コンテンツの接続

たとえば、「Capricorn Cafe」という WordPress サイトがあるとします。この例では、ブログコンテンツをそのサイトから自分のサイトに取り込む CMS Connect (JSON) コンポーネントを設定する方法を示します。

CMS 接続の JSON を設定する

たとえば、個々のブログへのリンクを含む一連のブログを完全に取り込むとします。

1. CMS 接続を作成します。
2. [接続の詳細] で、次の情報を入力します。
   • 名前 — Capricorn
   • CMS ソース — WordPress
   • 接続種別 — 公開
   • サーバ URL — https://public-api.wordpress.com
3. JSON コンテンツを追加しているため、HTML ルートパス、CSS、スクリプトは入力しません。それらのセクションは CMS HTML 接続用です。
4. [JSON] セクションで、[JSON を追加] をクリックします。
   1. [コンテンツタイプ名] に「Blog Feed」 (ブログフィード) と入力します。

      コンテンツタイプ名は、リストと項目をグループ化して管理を簡易化できます。最大 5 個のコンテンツタイプを使用し、それぞれに最大 1 個のコンテンツ項目と 10 個のコンテンツリストを含めることができます。

      メモ

   2. [コンテンツリストを追加] をクリックして、次の情報を入力します。
      • 名前 — Blog List (ブログリスト)
      • パス — rest/v1.1/sites/capricorncafeblog.wordpress.com/posts?number={itemsPerPage}&page={pageNumber}

        パスには、ページネーションに使用される 2 つの変数があります。{itemsPerPage} は、ページに表示する項目の数です。{pageNumber} は、現在のページ番号です。変数 {offset} もページネーションに適用され、ページのオフセットを指定します。変数値は、CMS Connect (JSON) コンポーネントが表示されるときに動的に計��されます。

        メモ

      • ノードパス — posts

        [ノードパス] では JSON 式が想定されているため、@ は入力しないでください。

        メモ

   3. リスト内の各ブログの詳細ページとリンクを生成するには、コンテンツタイプにコンテンツ項目とコンテンツリストの両方があることを確認します。[コンテンツ項目を追加] をクリックして、次の情報を入力します。
      • 名前 — Blog Item (ブログ項目)
      • パス — rest/v1.1/sites/capricorncafeblog.wordpress.com/posts/{component}

        {component} 変数は、コンポーネントパスを動的に追加します。エクスペリエンスビルダーで CMS Connect (JSON) コンポーネントに入力されたコンポーネントパスが使用されます。

        メモ

      • ID パス — ID
      • タイトルパス — title

      [ID パス] と [タイトルパス] では JSON 式が想定されているため、@ を含めて入力しないでください。JSON 式では大文字と小文字が区別されるため、ID は id とは異なります。JSON 応答で使用されているものと一致させます。

      メモ

5. [保存] をクリックします。

ページにブログシリーズを追加する

1. エクスペリエンスビルダーで、[CMS Connect (JSON)] コンポーネントをページにドラッグします。
2. プロパティエディタを開き、接続を設定します。

   @ 記号を使用して JSON 式を表します。

   メモ

   • CMS ソース — Capricorn
   • JSON コンテンツ — Blog List (ブログリスト)
   • コンポーネントパス — コンテンツリストの場合、この項目は空白のままにします。
3. [コンテンツリストのレイアウト] で、[グリッド] を選択して、次の情報を入力します。
   • 1 ページあたりの項目数 — 値 (5 など) を入力します。
   • 列 — 値 (2 など) を入力します。
4. [コンテンツリスト項目のレイアウト] で、[カード] を選択して、レイアウトのプロパティを入力します。
   • タイトル — @title
   • 著者 —@author/name
   • 公開日時 — @date
   • 本文 — @content
   • 画像のソース — @featured_image
5. [ナビゲーション] で、リストが特定のブログにリダイレクトされる方法を設定します。
   • リンクテキスト — Read More (詳細情報)
   • 種別 — Community Page (コミュニティページ)
6. プロパティエディタで [保存] をクリックします。保存したら、詳細ページに作成された名前 (「Capricorn-Blog_Feed」など) が表示されます。詳細ページに一連の完全なブログ項目が表示されます。

   詳細ページの名前または URL を変更するには、上部のツールバーの [ページ] メニューでページを見つけます。次に、そのプロパティを変更します。

   メモ

これで、サイトページに CMS コンテンツを使用したブログシリーズが表示されます。変更を公開したら、一連のブログ項目の下にある [Read More (詳細情報)] リンクをクリックできます。リンクをクリックすると、ブログ用に動的に生成された詳細ページが表示されます。

サイトを公開したら、CMS 接続設定を変更できます。たとえば、ブログ項目ではなくニュース項目を参照するようにコンテンツリストのパスを変更するとします。CMS 接続はゲストユーザ用にキャッシュされるため、サイトを再公開すると、ゲストは遅延なく更新を確認できます。

ページに 1 つのブログ項目を追加する

ただし、サイトページで紹介するブログまたはニュース項目が 1 つのみの場合はどうでしょうか。

1. CMS 接続を作成します。この例では、同じ接続を再利用しましょう。
2. エクスペリエンスビルダーで、[CMS Connect (JSON)] コンポーネントをページにドラッグします。
3. プロパティエディタを開き、コンポーネントを設定します。
   • CMS ソース — Capricorn
   • JSON コンテンツ — Blog Item (ブログ項目)
   • コンポーネントパス — ブログの ID (38 など) を入力

     コンテンツ項目のコンポーネントパスを指定するときに、{!id} などの動的変数も使用できます。たとえば、[Read More (詳細情報)] リンクをクリックすると、この変数は ID 値に置き換えられます。

     メモ

4. [コンテンツリスト項目のレイアウト] で、[詳細] を選択して、項目のレイアウトのプロパティを入力します。
   • タイトル — @title
   • 著者 —@author/name
   • 公開日時 — @date
   • 本文 — @content
   • 画像のソース — @featured_image
5. [保存] をクリックします。

おめでとうございます。これで、サイトページがブログ項目を表示するように設定されました。