BubbleにWordPressの個別記事データを動的に表示させる方法

ノーコードツール「Bubble」でWordPressの個別記事データを動的に表示させる方法を紹介します。

このTipsのポイントは、API Connectorで指定するエンドポイントにパラメーターを使うことです。

今回の記事は前回の「BubbleにWordPressの記事一覧を表示させる方法」の続きなので、そちらまだの方はぜひ順番に確認していただくと理解が深まるかと思います!

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

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

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

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

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

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

実装イメージ

前回の記事でWordPress REST APIを使って表示した記事一覧の各記事をクリックしたときに、記事詳細ページへ遷移させ、該当のWordPress個別記事データを表示させるのが今回の実装イメージです。

Bubbleの記事詳細ページではWordPress個別記事の以下を表示させます。

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

post_idやパラメーターが今回の肝となります。

実装手順

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

  1. WordPressの個別記事データを取得するAPIの設定をする
  2. 記事一覧の各記事ブロックをクリックしたときのワークフローを設定する
  3. 記事詳細ページで、取得した個別記事データを流し込む

WordPressの個別記事データを取得するAPIの設定をする

まずはプラグイン「API Connector」の設定画面から新しくCallするAPIの設定をしましょう。

API名は適当に「getPost」などの名前にして、エンドポイントとURL parametersを以下のように設定します。

弊社WordPressブログの個別記事データを取得するAPI設定例

WordPress REST APIの個別記事のエンドポイントは、/posts/記事IDのフォーマットですが、今回はベタ打ちではなく、動的に記事IDをセットしてデータを取得したかったので、添付のように[]の中にURL parametersのKeyを入れました。

Keyに対してValueは適当な記事IDを入れてinitialize callしましょう。

/wp-json/wp/v2/posts/[post_id]?_embed

エンドポイントのオプションで、_embedを加えることで、postエンドポイントにアイキャッチ画像のデータを含めることができます。

記事一覧の各記事ブロックをクリックしたときのワークフローを設定する

記事詳細に記事IDをパラメーターで渡す

APIの準備完了したら次は、記事一覧の各記事をクリックしたときに詳細ページへ遷移するワークフローを設定します。

Go to pageで記事詳細ページを指定するのは言うまでもありませんね。

今回のポイントは、「Send more parameters to the page」です。

  • Send more parameters to the pageにチェックをつける
  • Keyに、post_idを、値はクリックした各記事のAPIで取得したデータのid(例:Current cell's API Call's id)をセットします

このようにidをパラメーターで遷移先に渡すことで動的に個別記事データを流し込むことができます。

記事詳細ページで、取得した個別記事データを流し込む

仕上げです。一覧から飛ばしてきた個別記事データを、記事詳細ページで表示させるためにType of contentと、Data sourceなどの設定を添付画像のようにしましょう!

Data sourceの(path)には、Get data from page URLを使って、さきほど一覧ページから引き継いできたパラメーターpost_idを指定すればOKです。

※記事タイトル、公開日時、アイキャッチ画像、カテゴリーをセットする方法は前回の記事で解説したのとほぼ同じなので割愛させていただきます。

なかなかボリューミーで大変だったとは思いますが、今回もここまで読んでくださってありがとうございました!

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

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

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

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

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

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

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

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

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