BubbleにWordPressの記事一覧を表示させる方法【WordPress REST API】

ノーコードツール「Bubble」で作るアプリに、WordPressの記事を一覧で表示させる方法をパターン別で紹介します。

ざっくり言うと、API Connectorを使い、WordPress REST APIからデータを取得。その情報をBubbleのRepeatingGroupで表示させるという感じです!

API ConnectorでWordPress REST APIをinitialize callするところまではこのシリーズの第1回である以下の記事で解説しているのでまだの方はそちらをご参考にしてくださいませ。

BubbleでWordPressのデータを取得する方法!API Connector必須

それではお待ちかね、本編に参ります

動画解説バージョンはこちら!

著者:大熊滉希
ノーコード特化のアプリ/システム開発事業を展開するEPICsの代表。
前職にて新規事業コンサルティングを行う企業で役員を歴任した後、
最小の経営資源で開発を行えるノーコードに可能性を感じEPICsを創業。

運営会社:EPICs合同会社
日本最大級の開発実績を誇るノーコード特化のアプリ/システム開発会社。
最安30万円・最短2週間から、BubbleやAdaloなど多様なツールの中からニーズに合わせた最適な開発を提案・実施している。

目次
日本最大級のノーコード開発実績!

①日本最大級の開発実績
②最安30万円。通常の1/10~の低コスト開発
③最短2週間。圧倒的な開発スピード
④高難易度の開発もスムーズ
⑤複数のノーコードツールに対応

EPICsは上記5つの強みを武器に受託開発を行っています。
まずはご相談ください。

実装イメージ

弊社WordPressブログのデータをBubbleアプリに表示した例

今回はBubbleのページに、WordPressの記事データを以下の内容を含めて一覧表示させてみます。

  • 記事タイトル
  • 公開日時
  • アイキャッチ画像
  • カテゴリー

記事一覧のパターンとしては以下を紹介します。

  • ブログトップを想定した最新の3件を表示するパターン
  • ブログ記事アーカイブを想定した全件表示するパターン(最大100件)

今回紹介するRepeatingGroup記事一覧のElement Treeはこんな構成です。

実装手順

以下の手順で実装します。

  1. postエンドポイントにカテゴリー情報を含めるためにWordPressにコードを追記する
  2. API Connectorの設定をする
  3. RepeatingGroupの設定をする
  4. タイトル・アイキャッチ画像・カテゴリ・公開日時をセットする

①に関してはBubble側ではなく、WordPress管理画面もしくはFTPで子テーマのfunctions.phpを編集する必要があるので、テストでとりあえずWordPressの記事一覧をBubbleのアプリに表示させてみたい人は飛ばしもらってもOKです!

postエンドポイントにカテゴリー情報を含めるためにWordPressにコードを追記する

データ取得元のWordPress REST APIのpostエンドポイント(WordPress投稿データが入っている)にはデフォルトで記事に属するカテゴリーIDは含まれていますが、カテゴリー名は含まれていません。

そのため、WordPressのテーマファイルのfunctions.phpに以下のコードを追加してカテゴリー情報を含めるようにカスタマイズを施す必要があるんです!

add_action( 'rest_api_init', 'register_cat_name' );

function register_cat_name() {
    register_rest_field( 'post',
        'category_name',
        array(
            'get_callback'    => 'get_cat_name'
        )
    );
}

function get_cat_name( $object ) {
    $category = get_the_category($object[ 'id' ]);
    $cat_name = $category[0]->cat_name;
    return $cat_name;
}

API Connectorの設定をする

次に、プラグイン「API Connector」の設定画面で、APIエンドポイントを入力してinitialize callします。

ブログトップを想定した最新の3件を表示するパターン

ブログのトップページなどで最新の3件のみ表示させたい場合は、上記のようにper_pageパラメーターで件数を指定したエンドポイントを使いましょう。サンプルではper_page=3とすることで3件のみ取得しています。

また、「_embed」をつけることで、記事のアイキャッチ画像のデータもpostエンドポイントに含めることができます。

コピペ用にテンプレを以下に記します。

/wp-json/wp/v2/posts?_embed&per_page=3

ブログ記事アーカイブを想定した全件表示するパターン

WordPressの記事アーカイブとして全件表示させたい場合は先程のエンドポイントのper_pageの数を100に変更しましょう。WordPress REST APIではper_pageを指定していないと、デフォルトで最新の10件までしか取得してくれないからです。

/wp-json/wp/v2/posts?_embed&per_page=100

per_pageで指定できるのは100件までなので、それ以上を取得する場合はひと工夫必要です(それはまだ検証できていないので、またでき次第記事にします!)。

また、特定のカテゴリー別アーカイブにしたい場合は、以下のようにcategoriesパラメーターで該当カテゴリーIDを指定してあげればそのカテゴリーで絞り込めます。

/wp-json/wp/v2/posts?categories=10&_embed&per_page=100

RepeatingGroupの設定をする

次に、RepeatingGroupに取得したデータを流し込みましょう。

Type of contentと、Data sourceにAPI ConnectorでCallしたAPIを指定してあげましょう。

※なんらかのGroupの中にRepeatingGroupを設置している場合は、親要素のGroupのType of contentにも同じAPIを指定してください。Data sourceは空のママでOK。

タイトル・アイキャッチ画像・カテゴリ・公開日時をセットする

最後に、APIで取得したタイトル、アイキャッチ画像、カテゴリー、公開日時を各エレメントにセットして完成です!

  • タイトル:Parent group’s API Call’s title rendered
  • アイキャッチ画像:Parent group’s API Call’s _embeded wp:featuredmedia:first item's source_url
  • カテゴリー:Parent group’s API Call’s category_name
  • 公開日時:Parent group’s API Call’s date

記事一覧にページネーションをつけたい方は、こちらの記事で紹介しているプラグイン「Pagenation」を使えば簡単に実装できるのであわせてご確認くださいませ!

Bubbleでページネーションを実装する方法【プラグインPagenation】

日本最大級のノーコード開発実績!ノーコードなら迷わずEPICs

EPICsはノーコードでの開発に特化をしたプロの開発組織です。

従来のスクラッチでの開発でよく発生する「費用が高い」 「開発期間が長い」 「知識がなく開発に踏み切れない」という課題に対し、ノーコードでの開発という選択肢で皆様の開発を支援します!

そんな弊社に開発相談をいただくメリットは大きく4つあります!

①豊富な開発実績
創業よりノーコード開発を軸に多様な開発を行ってまいりました。SNSやマッチングアプリ、ECアプリなど多様な開発実績がございます。
豊富な経験をもとに、ただ開発を行うにとどまらず、より良い開発を行うためのアドレスや公開後のご不安やご相談にも対応させていただきます!

②最安30万円!通常の1/10~1/5ほどの低コストで開発
コーディングの工程を削減できるノーコードは、最適かつ最小限の人員で対応が可能です。また弊社では豊富な開発実績があるため、経験を活かした開発を行うことで開発費用を大幅に削減することができます。

③最短2週間!圧倒的な短期間で納品
ノーコード開発では複雑なコードを1から書く必要がないため開発工程を省略することができ、開発期間の大幅な短縮が可能です。

④公開後の保守や運用の徹底サポート
アプリは開発後の運用もとても重要です。EPICsでは開発のみならずその後のサポートも対応可能です!
またノーコードで開発したアプリは、スクラッチで開発したアプリに比べて保守や運用にかかる費用を削減することも可能です!

「勉強になった!」「役に立った!」と思っていただけたら、是非シェアもお願いします!
目次