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

事前共有

wordpress4.7以降はデフォルトで「WP REST API」を利用することができます。
詳しい使い方はリファレンスを参考に。
WP REST API リファレンス

下記のように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」を使用します。

プラグインのダウンロード後、有効にして下記のようにカスタムフィールドを作成します。

上記のような設定をすると、投稿ページにカスタムフィールが生成されるので、検証用に適当な値を入力。

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

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

上記の問題を簡単に解決してくれるのが、今回紹介する「ACF to REST API」です。

使い方はとても簡単で、インストール後に有効化するだけ。
さっそく、先ほどと同じ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で取得できるといろいろなことに応用できると思うので、ぜひ利用してみて下さい。