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

公開日: 2017年12月2日
Author: 池田祐太郎
カテゴリー: TIPS WordPress
タグ: 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を利用できるといういいとこ取りな使い方も可能です。

とりあえず作ってみた

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

WP REST API 取得デモ

（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の代わりに利用する等が現実的なところでしょうか。