LoginSignup
6

More than 5 years have passed since last update.

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

Last updated at Posted at 2017-04-28

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」を使用します。
capture-01.png

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

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

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

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

上記の問題を簡単に解決してくれるのが、今回紹介する「ACF to REST API」です。
capture-04.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で取得できるといろいろなことに応用できると思うので、ぜひ利用してみて下さい。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6