Angular2 + WP API で作られた WordPress のテーマ、Wallace WordPress Theme というプロジェクトがありましたが、それにならって、WP API ベースの WordPress テーマを作っています。Vue.js の勉強もしたかったので、Vue.js + Vuex + Vue Router という作りになっています。作っている最中に、Universal Router の方が良いなぁって思いました。
Github: torounit/Aetherium: A next-generation WordPress theme built with the Rest API and Vue.js .
Aetherium で エーテリウム とか エセリウム って読んでます。
デモ
Aetherium Demo です。テーマユニットテストのデータを放り込んであります。
機能
Service Worker を用いてオフラインサポートしてます。これがやりたくて SPA みたいなことわざわざテーマ上でやっています。Workbox つかってます。Service Worker やキャッシュはログイン時には削除されます。
また下書きなどのプレビューなども行えます。
パーマリンク設定を「基本」以外に設定しないと動きません。自由なパーマリンク設定にも対応しているはずです。
所感
イベントレポート：WordPress Meetup Tokyo #34 – AMA Session with Joe Hoyle and Bryce Adams – Capital P の記事でもありましたが、WordPress テーマとして、SPAを作るのはいろいろトリッキーです。WordPress の URLのパラメーター全てに対応したりとかするのは難しいですね。add_rewrite_rule とかは考えないことにしてます。
また、テンプレートタグと呼ばれている関数と同じようなモノを再実装する必要があります。また、option 等 WP API から取得出来ない情報がいっぱいあるので、wp_script_add_data でそういった情報を大量にJS側に渡しています。
いろいろ面倒ごとも多いですが、サポートする機能をある程度限定すれば、テーマでというのも出来るかなとは思いました。
メリットとしては、プレビューなど、WordPress としての使い勝手を変えずに、SPA にしたり、PWA 対応をしたり出来ることですね。Smart PWA という WordPress にオフラインサポートを追加するプラグインをリリースしていたりはしますが、HTML を毎回キャッシュするのはあんまり効率も良くないですし、テーマの変更等があったときに、ページごとにデザインが違ったり等の問題が発生します。SPAの場合はHTMLは変わらないので、REST API の戻り値をキャッシュすればコンテンツのキャッシュが出来るのは容量を食い潰さなくて良いですね。
正直今のところ趣味以外の理由を見つけられていませんが、細々と開発していこうかなと思います。フィードバックとスター待ってます。