MENU
ノーコード開発で「やりたいをできるに変える」
お問い合わせ
  1. ホーム
  2. Bubble
  3. BubbleにWordPressの個別記事データを表示させるときにデザイン（CSS）も反映させる方法

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

Bubble

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

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

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

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

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

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

目次
無料で資料をダウンロード

ノーコード開発お役立ち資料3点セット

計100ページ近い大ボリュームでノーコード開発について解説

  • ノーコード開発会社の選び方
  • EPICsのノーコード受託開発の特徴
  • 支援実績・事例集

    氏名

    法人名

    メールアドレス

    電話番号

    送信ボタンを押すことで、個人情報の取扱いについてに同意したとみなされます

    実装イメージ

    プラグイン「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>

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

    【日本最大級のノーコード開発実績】
    無料でアプリ・システム開発の相談を受付中

      氏名

      法人名

      メールアドレス

      電話番号

      お問い合わせ詳細 ※分かる範囲でご記入ください

      送信ボタンを押すことで、個人情報の取扱いについてに同意したとみなされます

      Bubble
      API WordPress プラグイン
      「勉強になった！」「役に立った！」と思っていただけたら、是非シェアもお願いします！

      人気記事

      目次