Vue.js」を読んでVue.jsを触ってみたくなった、フロントエンドエンジニアのいなばです。APIを使ってVue.jsで遊んでみることにしました。APIとはWordPress4.7でプラグインからWordPressのコアに組み込まれた機能でエンドポイントから記事やタグ、カテゴリなどのデータをjsonで取得することができます。長いのでほぼ省略しましたが、こんなJSONを取得することができました。省略]LIGの制作実績サイトでは、記事の一覧にはタイトルとサムネイル、クライアント名とキャッチコピー(ホバーした時に出てくる)の4つがあればよさそうです。上記のJSONだと、ほしいものがタイトルしか入っていませんね。APIをそのままで使うと、記事一覧のJSON(/wp-json/wp/v2/posts)の中にアイキャッチ画像が含まれていません。パラメータを付与する方法でも記事にアイキャッチ画像を含めることができますが、余計なデータが増えるのが嫌だったのと、構造が深く使いづらそうだったので、今回はアクションフックでアイキャッチ画像を追加する方法を採用しました。functions.phpに下記のコードを追加することで、記事にアイキャッチ画像を追加することができます。クライアント側の都合で画像のサイズも欲しかったので、widthとheightも一緒に返すようにしています。];}再度記事一覧を取得すると、追加したアイキャッチ画像のデータを取得できることが確認できました。APIをそのまま使うと取得することができません。いうプラグインを導入するだけで解決します。いうkeyが追加されているのが確認できました。Fieldsは、記事の単体取得時にも追加されていますね。LIGの制作実績サイトでは、さらに、記事に紐付いたカテゴリとタグ、前後の記事のデータが必要になるので、こちらも必要なデータを追加するためにカスタマイズしていきます。}}記事に紐付いたカテゴリとタグの取得カテゴリもタグも表示用の名前が欲しいですが、idしか取れていませんね。9],クライアント側で記事取得のあとにカテゴリの単体取得をするのは面倒です。API側であらかじめ記事に紐付けた状態で返すようにしてしまいましょう。functions.phpに下記のコードを追加することで、記事に好きなデータを追加することができます。);タグとカテゴリは記事詳細だけに追加したいので、フィルターフックでリクエストのパラメータにidがあるろきだけデータを追加するようにしています。これで、一回のリクエストで、表示側でほしかったカテゴリやタグのnameやslugを取得することができるようになりました。続いて前後の記事のデータを追加します。lig_wp_get_previous_postとlig_wp_get_next_postはそれぞれ前後の記事を返す関数になっています。関数内でget_previous_postやget_next_postを呼んでいますが、ここで取れる記事は先ほどのカスタマイズの影響を全く受けません。Fieldsがほしい場合は、それぞれ取得する記述が必要になります。$prev;}カテゴリやタグのslugと期間指定で記事一覧の取得ここまでで、新着記事一覧と記事詳細のJSONの取得はできるようになりました。続いてアーカイブの記事一覧のJSONを取得してみます。APIをそのまま使うと、カテゴリやタグ指定での記事一覧の取得は/wp-json/wp/v2/posts?categories=3/wp-json/wp/v2/posts?tags=8のように、idで指定する形式になっています。LIGの制作実績サイトでは、アーカイブページが下記のようなURLになっており、そのままでは素直に記事の一覧を取得することができません。]};クライアント側では、ページにアクセスされたときにslugだけしか分からないので、あらかじめカテゴリやタグを全件取得した状態じゃないとidを知ることができません。parameterというプラグインを導入すると/wp-json/wp/v2/posts?filter=campaign/wp-json/wp/v2/posts?filter=pcのように、カテゴリやタグのslugで記事一覧を取得できるようになるので、面倒なことをせずに済みます。パラメータで、期間を指定して取得することができます。2017年に投稿された記事のみ取得したい場合は、wp-json/wp/v2/posts?after=2017-01-01T00:00:00&before=2017-12-31T23:59:59のようにして期間指定をすることができます。LIGの制作実績サイトでは下記のようなルーティングになりますが、若干クライアント側でごにょごにょする必要があるものの問題なく対応できそうです。独自のエンドポイントを追加したい場合も簡単にできます。functions.phpに下記のようにコードを追加します。指定した関数が返すデータを取得できるようになります。APIをそのまま使うとなると、ほしい情報が不足している感が否めませんが、アクションフックやフィルターフック、プラグインなどで簡単にカスタマイズすることができました。SPAの練習台にもちょうといいと思うので、興味があればぜひチャレンジしてみてください。ANALYZE」を導入後、CVR改善に成功した品川美容外科のWeb担当者に話を聞いてきた。POSTLIGへの自由なメッセージお待ちしています頂いたご意見への回答は行っておりません。