ウェブログ

WP REST APIを使って静的HTMLページにWordPressの投稿情報を表示する


WordPress4.7でプラグイン利用だったREST APIがコアに組み込まれ、4.7以上のバージョンでは特に設定せずとも使えるようになりました。

WP REST APIでできることは例えば以下のようなことです。

  • WordPress記事や固定ページ等の情報にアクセスできる
  • アクセスした情報を表示することはもちろん、表示したページ側から投稿、更新、削除といった実行が可能
  • PHPを利用せずにJavaScript(JSON形式)で扱える!

記事の投稿や更新、削除といった記事側へアクセスが必要な場合はOAuth認証やBasic認証などで認証させる必要があります。
また、以前のプラグインだったバージョンとコアに組み込まれたバージョンで仕様が変わっており、ウェブ上の情報も古いものが結構あったりしてデモが動いてなかったりするので、実際に触って見るときにはリファレンスを参考にしたほうが良さそうです。

WP REST API v2 Documentation

WP REST APIの詳しい説明はたくさんの方がわかりやすく説明しているページがありますので、そちらを参考ください。

WP REST APIを使ってWordpressをAPI化してみよう! | バックエンドへの道
WordPress が REST-API をベースにしたエディターとカスタマイザーの開発プロジェクトを開始 – Capital P

静的HTMLからWordPressの情報を取得して表示したい

今回やりたいのは、「WordPress関係なく、静的なHTMLページでPHPを利用せずに、WordPressで投稿された記事一覧を取得する」ということです。

これが実現できれば何がいいのかというと、「WordPressは記事の管理として利用し、投稿した記事の取得と表示等は別に管理ができる」となり、

  • WordPressは記事管理のためのツール
  • 訪問者がアクセスするページはWordPressではないページ
  • つまり、システム(WP)とフロント(訪問者が閲覧するサイト)が区分けできる

というメリットがあります。例えばセキュアな環境にWordPressを設置しておき、実際のサイトと区別することでセキュリティ対策を行いながらWordPressというCMSを利用できるといういいとこ取りな使い方も可能です。

とりあえず作ってみた

以下がサンプルページです。

(REST APIの仕様が変わっていなければ)ローディングが表示されたあとに各記事が表示されるはずです。
動かないときのためにGIFアニメも貼っておきます。

また、以下にJS Fiddleに公開したのでJS, HTML, CSS等ソースコードはご参考ください。

コーディングはBootstrap v4, ローディングアイコンはFontAwesome, JSONデータの扱いはjQueryを利用しました。

追記: WordPressのバージョンは4.9.1です。

今回のサンプルでは「詳細を見る」をクリックすると元記事に遷移していますが、SPA(シングルページアプリケーション)で作る前提で、ページ遷移無しに各記事をクリックするとコンテンツを入れ替えるなどで制作が可能です。

また、Advanced Custom FIeldsなどでカスタムフィールドの情報を取得する場合はACF to REST APIというプラグインが必要だったり、アイキャッチ画像やカテゴリ情報とタグ、前後の記事情報等REST APIに含まれていない情報はアクションフックやフィルターフック等で追加して上げる必要があります。こちらの記事が参考になります。

WP REST APIをシングルページアプリケーションで使うためにいろいろカスタマイズしてみた | それいけ!フロントエンド

課題は表示速度とSEO

WP REST APIとても便利で夢が広がりますが、記事取得に少々時間がかかります。サンプルではテキスト情報のみですが、画像やアイキャッチ画像を取得表示する場合はより時間がかかります。REST API用のキャッシュを有効にして速度向上させるプラグインもあり、表示速度はこれから解決されることが期待されます。

また、個別ページがあるわけではないのでSEOには強くありません。現状では、アプリケーション内でウェブデータを引っ張ってくる、RSSの代わりに利用する等が現実的なところでしょうか。

最後に

以上、簡単なサンプルですがHTMLからWordPress情報を取得して表示するというデモでした。

WP REST APIを利用すれば投稿、固定ページ以外にもカスタム投稿タイプやカスタムフィールドの取得も可能なため、本格的にWordPressを管理のためのツールとして利用できるようになりました。

WordPressは初めて触れてから8年位経ちますが、その進化は止まること無く益々便利に機能的になっているツールです。4.7でREST APIがコアへ組み込まれ、2019年にはバージョン5となりGutenbergという新しいエディタ方法も公開予定で、しばらく目が離せなそうです。

今回の制作にあたって参考させていただいた記事:

WP REST APIでの情報の取得と表示・使い道について | ソフプラント

WordPress REST API を試してみる(前編: まずは取得から) | クラウドット株式会社

WP REST APIの検証とWordPressのテーマへの組込 | in-Pocket インポケット

この記事を書いた人

池田祐太郎

池田祐太郎

WordPress好きの池田です。Webの仕事の前はライブハウスでブッキングや音響をしてました。PHP, JavaScriptを自由に操りたいと思いつつ、つい訪れたサイトのソースコードを見てしまいます。


CONTACTお問い合わせ / お見積もり