wordpressの投稿記事とカスタムフィールドのデータを1つのJSONデータで取得するプラグイン紹介

wordpressの投稿記事、カスタムフィールドのデータをまとめてjson形式で返してくれる便利なプラグイン「ACF to REST API」を使ってみたので、紹介したいと思います。

#事前共有
wordpress4.7以降はデフォルトで「WP REST API」を利用することができます。
詳しい使い方はリファレンスを参考に。
[WP REST API リファレンス](http://ja.wp-api.org/)

下記のようにURLの末尾に「/wp-json/wp/v2/posts/」を加えてアクセスすると、投稿されている全記事のデータをJSON形式で取得することができます。

```
http://localhost:8888/wordpress/wp-json/wp/v2/posts/
```

こちらは実際に取得できたデータです。

``` 
[
  {
  "_links": {
  "about": [
  {
  "href": "http://localhost:8888/wordpress/wp-json/wp/v2/types/post"
  }
  ],
  "author": [
  {
  "embeddable": true,
  "href": "http://localhost:8888/wordpress/wp-json/wp/v2/users/1"
  }
  ],
  "collection": [
  {
  "href": "http://localhost:8888/wordpress/wp-json/wp/v2/posts"
  }
  ],
  "curies": [
  {
  "href": "https://api.w.org/{rel}",
  "name": "wp",
  "templated": true
  }
  ],
  "replies": [
  {
  "embeddable": true,
  "href": "http://localhost:8888/wordpress/wp-json/wp/v2/comments?post=80"
  }
  ],
  "self": [
  {
  "href": "http://localhost:8888/wordpress/wp-json/wp/v2/posts/80"
  }
  ],
  "version-history": [
  {
  "href": "http://localhost:8888/wordpress/wp-json/wp/v2/posts/80/revisions"
  }
  ],
  "wp:attachment": [
  {
  "href": "http://localhost:8888/wordpress/wp-json/wp/v2/media?parent=80"
  }
  ],
  "wp:featuredmedia": [
  {
  "embeddable": true,
  "href": "http://localhost:8888/wordpress/wp-json/wp/v2/media/5"
  }
  ],
  "wp:term": [
  {
  "embeddable": true,
  "href": "http://localhost:8888/wordpress/wp-json/wp/v2/categories?post=80",
  "taxonomy": "category"
  },
  {
  "embeddable": true,
  "href": "http://localhost:8888/wordpress/wp-json/wp/v2/tags?post=80",
  "taxonomy": "post_tag"
  }
  ]
  },
  "author": 1,
  "categories": [
  6
  ],
  "comment_status": "open",
  "content": {
  "protected": false,
  "rendered": "<p>articlearticlearticlearticle</p>
"
  },
  "date": "2017-04-28T08:10:12",
  "date_gmt": "2017-04-27T23:10:12",
  "excerpt": {
  "protected": false,
  "rendered": "<p>articlearticlearticlearticle</p>
"
  },
  "featured_media": 5,
  "format": "standard",
  "guid": {
  "rendered": "http://localhost:8888/wordpress/?p=80"
  },
  "id": 80,
  "link": "http://localhost:8888/wordpress/2017/04/28/sample/",
  "meta": [],
  "modified": "2017-04-28T08:16:37",
  "modified_gmt": "2017-04-27T23:16:37",
  "ping_status": "open",
  "slug": "sample",
  "status": "publish",
  "sticky": false,
  "tags": [],
  "template": "",
  "title": {
  "rendered": "sample"
  },
  "type": "post"
  }
]
```

## 「Adovanced Custom Fields」インストール＆設定
記事投稿ページにカスタムフィールドを作るには便利なプラグインがいくつも出ており、今回は「Adovanced Custom Fields」を使用します。
![capture-01.png](https://qiita-image-store.s3.amazonaws.com/0/146968/971fda13-fbdc-8820-a17e-cf00b0fc7b45.png)

プラグインのダウンロード後、有効にして下記のようにカスタムフィールドを作成します。
![capture-02.png](https://qiita-image-store.s3.amazonaws.com/0/146968/56b2587d-1176-7045-c484-82080d862729.png)

上記のような設定をすると、投稿ページにカスタムフィールが生成されるので、検証用に適当な値を入力。
![capture-03.png](https://qiita-image-store.s3.amazonaws.com/0/146968/428c4636-a9b4-d0af-0d9d-e9f2ece6fc01.png)

ここで問題になのが、カスタムフィールドで入力したデータは上記のURLにアクセスしても取得することができないということ。

##「ACF to REST API」インストール

上記の問題を簡単に解決してくれるのが、今回紹介する「ACF to REST API」です。
![capture-04.png](https://qiita-image-store.s3.amazonaws.com/0/146968/3e2c8a12-ede4-2778-b654-b8d222dc9694.png)

使い方はとても簡単で、インストール後に有効化するだけ。
さっそく、先ほどと同じURLにアクセスして投稿記事のデータを取得してみます。

```
http://localhost:8888/wordpress/wp-json/wp/v2/posts/
```

こちらが取得したデータ。
先程のデータに加え、acfというkeyの中に入力したカスタムフィールドのkeyとvalueも取得できています。

```
[
  {
  "_links": {
  "about": [
  {
  "href": "http://localhost:8888/wordpress/wp-json/wp/v2/types/post"
  }
  ],
  "author": [
  {
  "embeddable": true,
  "href": "http://localhost:8888/wordpress/wp-json/wp/v2/users/1"
  }
  ],
  "collection": [
  {
  "href": "http://localhost:8888/wordpress/wp-json/wp/v2/posts"
  }
  ],
  "curies": [
  {
  "href": "https://api.w.org/{rel}",
  "name": "wp",
  "templated": true
  }
  ],
  "replies": [
  {
  "embeddable": true,
  "href": "http://localhost:8888/wordpress/wp-json/wp/v2/comments?post=80"
  }
  ],
  "self": [
  {
  "href": "http://localhost:8888/wordpress/wp-json/wp/v2/posts/80"
  }
  ],
  "version-history": [
  {
  "href": "http://localhost:8888/wordpress/wp-json/wp/v2/posts/80/revisions"
  }
  ],
  "wp:attachment": [
  {
  "href": "http://localhost:8888/wordpress/wp-json/wp/v2/media?parent=80"
  }
  ],
  "wp:featuredmedia": [
  {
  "embeddable": true,
  "href": "http://localhost:8888/wordpress/wp-json/wp/v2/media/5"
  }
  ],
  "wp:term": [
  {
  "embeddable": true,
  "href": "http://localhost:8888/wordpress/wp-json/wp/v2/categories?post=80",
  "taxonomy": "category"
  },
  {
  "embeddable": true,
  "href": "http://localhost:8888/wordpress/wp-json/wp/v2/tags?post=80",
  "taxonomy": "post_tag"
  }
  ]
  },
  "acf": {
  "sample01": "test01",
  "sample02": "test02"
  },
  "author": 1,
  "categories": [
  6
  ],
  "comment_status": "open",
  "content": {
  "protected": false,
  "rendered": "<p>articlearticlearticlearticle</p>
"
  },
  "date": "2017-04-28T08:10:12",
  "date_gmt": "2017-04-27T23:10:12",
  "excerpt": {
  "protected": false,
  "rendered": "<p>articlearticlearticlearticle</p>
"
  },
  "featured_media": 5,
  "format": "standard",
  "guid": {
  "rendered": "http://localhost:8888/wordpress/?p=80"
  },
  "id": 80,
  "link": "http://localhost:8888/wordpress/2017/04/28/sample/",
  "meta": [],
  "modified": "2017-04-28T08:16:37",
  "modified_gmt": "2017-04-27T23:16:37",
  "ping_status": "open",
  "slug": "sample",
  "status": "publish",
  "sticky": false,
  "tags": [],
  "template": "",
  "title": {
  "rendered": "sample"
  },
  "type": "post"
  }
]
```

ちなみに下記のようにURLを指定すれば、投稿記事ごとのカスタムフィールドの値のみを取得することもできます。

```
http://localhost:8888/wordpress/wp-json/acf/v2/post/80
```

こちらが取得できたデータ。

```
{
  "acf": {
  "sample01": "test01",
  "sample02": "test02"
  }
}
```

#まとめ
wordpressの投稿記事、カスタムフィールドのデータをまとめてjson形式で返してくれる便利なプラグイン「ACF to REST API」について紹介しました。

投稿記事とカスタムフィールドに入力したデータをまとめてAPIで取得できるといろいろなことに応用できると思うので、ぜひ利用してみて下さい。