CodeCode

なんか色々おぼえ書き。だいたいweb制作関連。

Vue.jsでWP REST APIたたいてみる

最近、勉強しているVue.jsを使って、WordPressのREST APIを使って記事を出力する実験をやってみた。 実際のコードはGitHubに置いています。 https://github.com/takanashi66/vue_rest

Vue.jsとは

AngularJSやReactと並んで、人気が高まっているJavaScriptライブラリです。 リアクティブなデータバインディングや仮想DOMによる高速レンダリング、コンポーネント指向のUIが特徴です。 MVVM(Model・View・ViewModel)アーキテクチャをベースに、Viewに特化し、シンプルに作られているので学習コストが低く、簡単に導入ができます。 また、公式のドキュメントも日本語化されていて安心です。

WP REST API

REST APIとは、パラメータを指定して特定のURLにHTTPでアクセスすると、XMLやJSONなどでが返ってくるAPIです。 WP REST APIは、そのREST APIを使って、WordPressに投稿されている記事の一覧をJSONで取得したり、 記事の投稿、編集ができるWordPressのAPIです。

Vue.jsでWP REST APIのJSONを取得する

今回は、REST APIのリクエストを処理するのに、axiosを使います。 今回の場合、http://rest.dev/wp-json/wp/v2/posts/にリクエストを送り、返ってきたデータをpostsに入れています。 今回は、JSONを取得して、タイトルと抜粋を表示させるだけなので、HTMLもシンプルです。 for of を使って、Vue側で入れたデータを取得します。 記事タイトルは、 に入っているので、 で、その値をとってきます。 抜粋も同様に、 に入っているので、 で値をとってきます。

まとめ

Vue.jsを使えば、部分的に表示程度であれば、簡単にWP REST APIを扱うことができます。 しかし、抜粋の部分はJSONをみてもらうとわかるのですが、pタグがついた状態になっています。 現状では、データを置換して外すしか思いつかないのですが、なんらかの関数またはやりかたがあるのかもしれません。 そのほかにも、サムネイルの表示も少々ややこしそうです。 また、調べて追記します。 496cbf2a291826c19501b751e8.js\"> 今回の場合、http://rest.dev/wp-json/wp/v2/posts/にリクエストを送り、返ってきたデータをpostsに入れています。 今回は、JSONを取得して、タイトルと抜粋を表示させるだけなので、HTMLもシンプルです。 for of を使って、Vue側で入れたデータを取得します。 記事タイトルは、 に入っているので、 で、その値をとってきます。 抜粋も同様に、 に入っているので、 で値をとってきます。

まとめ

Vue.jsを使えば、部分的に表示程度であれば、簡単にWP REST APIを扱うことができます。 しかし、抜粋の部分はJSONをみてもらうとわかるのですが、pタグがついた状態になっています。 現状では、データを置換して外すしか思いつかないのですが、なんらかの関数またはやりかたがあるのかもしれません。 そのほかにも、サムネイルの表示も少々ややこしそうです。 また、調べて追記します。
トップへ戻る