BubbleにWordPressの個別記事データを表示させるときにデザイン(CSS)も反映させる方法

ノーコードツール「Bubble」で作るアプリにWordPressの個別記事データを表示させるときに、デザインも忠実に再現する強引だけど手軽な方法を紹介します。

一言で解説すると、WordPressで使われているCSS(スタイルシート)を読み込んで、記事本文はHTMLエレメントに出力するという感じです!

弊社WordPressブログはSWELLというテーマを使用しているので、今回の記事ではSWELLの見た目をBubbleで再現することを想定した解説をさせていただきます。

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

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

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

目次

日本最大級のノーコード開発実績!
 \ 最安30万円・最短2週間でアプリ・システム開発 /

 無料で相談する →

実装イメージ

プラグイン「API Connector」を使い、WordPress REST APIの個別記事エンドポイントで記事本文情報などを取得したものをarticle_detailというBubbleのページに表示させます。

ただ表示させるのではなく、実装イメージ動画のように元のサイトの見た目(CSS)をほぼほぼ再現します。

記事詳細ページのElements Treeは添付の通り。記事タイトル、カテゴリー、公開日時、アイキャッチ画像と表示したあとに、一番最後にHTMLエレメントを設置してそこに記事本文を吐き出します。

WordPress REST APIとAPI Connectorを駆使して個別記事データをひっぱてくる手順については、前回の記事で解説しているのでまだの方はそちらをご覧になってくださいませ。

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

実装手順

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

  1. Group内にHTMLエレメントを設置する
  2. HTMLエレメントでWordPressのCSSを読み込む
  3. HTMLエレメントに記事本文データを出力する

Group内にHTMLエレメントを設置する

まずは、Data sourceにAPIで取得したデータを指定しているGroup内に、HTMLエレメントを設置します。

サンプルでは、「記事詳細セクション」という名前のGroupのData sourceに設定しているので、その中にHTMLエレメントを追加しました(Innerという名前のGroupは左右余白を整えたりする用で共通で入れてるGroupです)。

HTMLエレメントでWordPressのCSSを読み込む

次に、HTMLエレメントのAppearance欄にコードを追記してWordPressのCSS(スタイルシート)を読み込みます!

そのための準備でまずは、以下のHTML型を入れます。

<html>
<body>
</body>
</html>

次に、WordPressブログの個別記事ページで「検証」を開き、「Elements」タブに表示されるHTMLの中のhead要素を開始タグから閉じタグまで丸々さきほどのHTMLにコピペします!

<html>
ここにコピペする!
<body>
</body>
</html>

以下例です。かなりコードが長いのでカットしてます。実際に使用する際は必要なコードだけ残してほかは削除しましょう。

<html>
    <head>
<style type="text/css" class="lum-base-styles">@keyframes lum-noop{0%{zoom:1}}.lum-lightbox{position:fixed;display:none;top:0;right:0;bottom:0;left:0}.lum-lightbox.lum-open{display:block}.lum-lightbox.lum-closing,.lum-lightbox.lum-opening{animation:lum-noop 1ms}.lum-lightbox-inner{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden}.lum-lightbox-loader{display:none}.lum-lightbox-inner img{max-width:100%;max-height:100%}.lum-lightbox-image-wrapper{vertical-align:middle;display:table-cell;text-align:center}</style>
    </head>
<body>
</body>
</html>

HTMLエレメントに記事本文データを出力する

仕上げです。最後に先程のHTMLエレメントに記事本文データをbodyタグ内にInsert dynamic dataで出力します。

<html>
    <head>
    </head>
    <body>
      ここでInsert dynamic data
    </body>
</html>

今回はSWELLのデザインを再現したかったので以下のようにSWELLのCSSがpタグ、h2タグなどに当たるようにSWELLのクラスをつけたdivの中でInsert dynamic dataしてます。

content renderedにWordPressの記事本文データがHTMLタグ含めて入っているのでそちらを使います。

<html>
    <head>
    </head>
    <body>
      <div class="post_content">
        Parent group's getPost's content rendered
      </div>
    </body>
</html>

以上で実装は一旦完了です!お疲れ様でした。

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

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

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

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

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

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

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

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

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