WordPress REST APIでイマドキHeadless CMS

2017.12.22

正直あまり時流に乗れていないのですが、昨今フロントエンドとバックエンドを分離してフロントにより自由度を！とのコンセプトのもと「Headless（ヘッドレス） CMS」なるものが流行しているそうです。

国内ではあまりサービスは見られないものの、海外ではHeadless CMSの先駆けとして「Elemeno」、そしてFacebook社も「GraphCMS」をリリースしています。

確かにCMSからViewを分離できれば、

CMS側ではJSON（API）のみになるためフロント側が言語に依存しない
ホスティングされたものが使えるため自前のサーバーがいらず、セキュリティ等もおまかせ

等のメリットがあります。

とはいえ、やはりそこは枯れたWordPress。
痒いところに手が届くプラグイン群や日本語のUIはクライアントワークには欠かせません。

そこで、「インストールしたらまずはREST APIをオフに」等いわれてはいますが、そこを敢えてWordPressをJSON出力マシーンとして利用し、ViewはReact等のナウいライブラリを使ってやってみたいと思います。

なお、この記事はWordPress Advent Calendar 2017、22日目の記事です。
そしてわたしはモロ（@moro_is）です。

WordPressのViewを無効化

まずはWordPressのViewをなくす必要があるため、空っぽのThemeを用意します。

https://github.com/moroi/headless-wordpress

はい。
空のindex.php style.cssと、いくつかの設定を詰め込んだfunctions.phpのみです。

<?php
function my_customize_rest_cors() {
  remove_filter( 'rest_pre_serve_request', 'rest_send_cors_headers' );
  add_filter( 'rest_pre_serve_request', function( $value ) {
    header( 'Access-Control-Allow-Origin: *' );
    return $value;
  });
}
add_action( 'rest_api_init', 'my_customize_rest_cors', 15 );
?>

個人的にせっかくWordPressの制約から開放される以上、あまりfunctions.phpで複雑なことをしたくなかったため、あくまで新しいAPIを生やしたりはせずにおります。

my_customize_rest_cors()はクロスドメイン対策のため同ドメイン上での実装の場合は不要で、もし別ドメインでの運用の場合もAccess-Control-Allow-Origin: *は避けて、個別にホワイトリスト対応（Access-Control-Allow-Origin: https://example.com）のようなことをしたほうがいいかも知れません。

プラグイン周り

WordPressの利点でもある豊富なプラグインは活かしたかったため、いくつか導入しました。

Advanced Custom Fields(ACF to REST API)

https://wordpress.org/plugins/advanced-custom-fields/

言わずと知れたカスタムフィールドを便利にするプラグイン。
併せてACF to REST APIを入れることでAPI側からも簡単にカスタムフィールドの値を取得できるようになります。

Jetpack by WordPress.com

https://wordpress.org/plugins/jetpack/

こちらもWP公式の多機能便利プラグイン。
これを導入することで、WordPress.com経由で「WordPress.com Jetpack API」が利用できるようになり、例えば

アクセス数ランキング
「メニュー」の取得

等もできるようになります。
WordPress REST APIと比べると

WordPress.com経由のためアクセス元が制限できない
若干通信が遅い

等のデメリットもありますが、場合によっては重宝するかも知れません。

No Category Base (WPML)

フロント側を例えばReact等で制作する場合、恐らくReact-Router等使うので実際的には必要ないのですが、例えばフロント側で用意するのが面倒くさいSitemap.xml等は

WordPress アドレス (URL)をapi.example.com
サイトアドレス (URL)をexample.com
WordPressの「パーマリンク設定」をフロント側と揃える

にして、URLの辻褄を合わせればGoogle XML Sitemapsでさくっと実装できます。

WP REST API Menus

先述のWordPress.com Jetpack APIでもメニューは取れるのですが珍しいAPI対応プラグインだったので一応。

APIのデータを取得する

以上でWordPressのHeadless CMS化はほぼ完了、あとは「WP REST API v2 Documentation」を参考に思う様データを取得するだけです。
この辺りはある程度情報が豊富なため検索すればすぐに調べられますが、基本的な部分のみ念のため書いておきます。