今回は、Onsen UI + Angular JSを使用して、WordPressのWP REST APIを利用してons-carouselに記事を表示する方法を紹介します。


Monacaデバッガーの結果です。
左右にスワイプすると、WordPressのWP REST APIを利用して取得した最新のブログ記事5件分のタイトルとサムネイルが切り替わります。

下記URLをブラウザ上で入力すると、JSON形式の配列の内容が表示されます。

http://xxx.yyy.zzz/wp-json/wp/v2/posts?_embed&per_page=5

この情報をもとにサムネイルとタイトル、リンク先URLを取得してons-carousel-itemを生成します。
ons-carousel-itemをタップすると、外部ブラウザで該当するリンク先URLを開き、記事を表示します。
※コード内のhttp://xxx.yyy.zzz/をご自身のWordPressのURLに変更して実行してください。

WordPressのブログをアプリ化する場合、オフラインで表示することができないので、オンラインで取得したブログ記事をDBなどに保存する必要があります。
また、記事内に広告が組み込まれている場合、収益が発生しても無効になる可能性が高いので注意が必要です。

【Monaca】Onsen UIとWordPressのWP REST APIを利用してons-carouselに記事を表示する
Tagged on: