WP-API v1 で投稿データのJSONをAjax取得してみる覚書 #wpacja2014
追記 この記事で紹介しているWP APIはVersion1時代のものです。 WordPress 4.7以降でコア実装されたものとは異なりますのでご注意ください。 以下本文 WordPress ADVENT CALENDA […]
広告ここから
広告ここまで
目次
追記
この記事で紹介しているWP APIはVersion1時代のものです。
WordPress 4.7以降でコア実装されたものとは異なりますのでご注意ください。
以下本文
WordPress ADVENT CALENDAR 2014、11日目です。
「PHPが使えなくても、WordPressを使ったサイトが作れるAPI」としてちょっとだけマイブームな「WP-API(JSON REST API)」について簡単に紹介したいと思います。
Filterで絞り込む
投稿データはFilterで絞り込んでデータを取り込むことができます。
fliter[フィルター名]=絞り込み条件
という形をとります。
よく使いそうなクエリ
s:検索 order:記事の順番 orderby:記事の並び替え条件 category_name:カテゴリ名 post_per_page:表示ページ数 post_type:投稿タイプ
WP-API/routes.md at master · WP-API/WP-API
ちなみに
Extended documentation on the query variables is available from the codex.
とのことで、基本的にクエリパラメータはWP_Queryに近い様子です。
Getで取得する
投稿を取得する場合はGETメソッドを使います。
Filterをクエリパラメータに直接記述することで絞り込みが可能になります。
//書き方 /wp-json/posts?fliter[フィルター名]=条件 //投稿を１件取得する /wp-json/posts?filter[posts_per_page]=1 //「WordPress」に関する記事を古い順に５件取得する /wp-json/posts?filter[posts_per_page]=5&filter[s]=WordPress&filter[order]=ASC
Ajax(jQuery)で取得する
//「WordPress」に関する記事を古い順に５件取得する
$.ajax({
type: "GET",
url: "wp-json/posts?filter[posts_per_page]=5&filter[s]=WordPress&filter[order]=ASC",
dataType: "json",
success: function(json){
//処理
}
});
こんな感じで返ってくる
実際に吐出されるJSONを見てみると、1記事だけでもかなりの量が返ってくるのがわかります。
//https://wp-kyoto.cdn.rabify.me/wp-json/posts?filter[posts_per_page]=1&filter[s]=WordPress&filter[order]=DESCのJSON
[
{
"ID": 1481,
"author": {
"ID": ,
"URL": "",
"avatar": "",
"description": "",
"first_name": "",
"last_name": "",
"meta": {
"links": {
"archives": "",
"self": ""
}
},
"name": "",
"nickname": "",
"registered": "",
"slug": "",
"username": ""
},
"comment_status": "",
"content": "",
"date": "2014-12-08T07:59:25+09:00",
"date_gmt": "2014-12-07T22:59:25+00:00",
"date_tz": "Asia/Tokyo",
"excerpt": "",
"featured_image": {
"ID": 2349,
"attachment_meta": {
"file": "2014/12/medium_149013081.jpg",
"height": 427,
"image_meta": {
"aperture": 0,
"camera": "",
"caption": "",
"copyright": "",
"created_timestamp": 0,
"credit": "",
"focal_length": 0,
"iso": 0,
"orientation": 0,
"shutter_speed": 0,
"title": ""
},
"sizes": {
"medium": {
"file": "medium_149013081-300x200.jpg",
"height": 200,
"mime-type": "image/jpeg",
"url": "https://wp-kyoto.cdn.rabify.me/wp-content/uploads/2014/12/medium_149013081-300x200.jpg",
"width": 300
},
"thumbnail": {
"file": "medium_149013081-150x150.jpg",
"height": 150,
"mime-type": "image/jpeg",
"url": "https://wp-kyoto.cdn.rabify.me/wp-content/uploads/2014/12/medium_149013081-150x150.jpg",
"width": 150
}
},
"width": 640
},
"author": {
"ID": 1,
"URL": "https://wp-kyoto.net/",
"avatar": "https://1.gravatar.com/avatar/75486cbfd37125f121cf4a6c5614601c?s=96",
"description": "",
"first_name": "岡本",
"last_name": "秀高",
"meta": {
"links": {
"archives": "https://wp-kyoto.cdn.rabify.me/wp-json/users/1/posts",
"self": "https://wp-kyoto.cdn.rabify.me/wp-json/users/1"
}
},
"name": "岡本 秀高",
"nickname": "okamoto",
"registered": "2013-10-21T10:19:24+00:00",
"slug": "sitemaster_motchi0214",
"username": "sitemaster_motchi0214"
},
"comment_status": "open",
"content": "",
"date": "2014-12-07T19:52:39+09:00",
"date_gmt": "2014-12-07T10:52:39+00:00",
"date_tz": "Asia/Tokyo",
"excerpt": "<p>photo credit: <a href="https://www.flickr.com/photos/leecullivan/149013081/">shoothead</a> via <a href="https://photopin.com">photopin</a> <a href="https://creativecommons.org/licenses/by-nc-nd/2.0/">cc</a></p>
",
"format": "standard",
"guid": "https://wp-kyoto.cdn.rabify.me/wp-content/uploads/2014/12/medium_149013081.jpg",
"is_image": true,
"link": "https://wp-kyoto.cdn.rabify.me/what-about-wordpress-codename-artist/medium_149013081/",
"menu_order": 0,
"meta": {
"links": {
"author": "https://wp-kyoto.cdn.rabify.me/wp-json/users/1",
"collection": "https://wp-kyoto.cdn.rabify.me/wp-json/media",
"replies": "https://wp-kyoto.cdn.rabify.me/wp-json/media/2349/comments",
"self": "https://wp-kyoto.cdn.rabify.me/wp-json/media/2349",
"up": "https://wp-kyoto.cdn.rabify.me/wp-json/media/1481",
"version-history": "https://wp-kyoto.cdn.rabify.me/wp-json/media/2349/revisions"
}
},
"modified": "2014-12-07T19:52:43+09:00",
"modified_gmt": "2014-12-07T10:52:43+00:00",
"modified_tz": "Asia/Tokyo",
"parent": 1481,
"ping_status": "open",
"slug": "medium_149013081",
"source": "https://wp-kyoto.cdn.rabify.me/wp-content/uploads/2014/12/medium_149013081.jpg",
"status": "inherit",
"sticky": false,
"terms": [],
"title": "medium_149013081",
"type": "attachment"
},
"format": "standard",
"guid": "https://wp-kyoto.cdn.rabify.me/?p=1481",
"link": "https://wp-kyoto.cdn.rabify.me/what-about-wordpress-codename-artist/",
"menu_order": 0,
"meta": {
"links": {
"author": "https://wp-kyoto.cdn.rabify.me/wp-json/users/1000",
"collection": "https://wp-kyoto.cdn.rabify.me/wp-json/posts",
"replies": "https://wp-kyoto.cdn.rabify.me/wp-json/posts/1481/comments",
"self": "https://wp-kyoto.cdn.rabify.me/wp-json/posts/1481",
"version-history": "https://wp-kyoto.cdn.rabify.me/wp-json/posts/1481/revisions"
}
},
"modified": "2014-12-07T19:55:34+09:00",
"modified_gmt": "2014-12-07T10:55:34+00:00",
"modified_tz": "Asia/Tokyo",
"parent": 0,
"ping_status": "open",
"slug": "what-about-wordpress-codename-artist",
"status": "publish",
"sticky": false,
"terms": {
"category": [
{
"ID": 4,
"count": 65,
"description": "",
"link": "https://wp-kyoto.cdn.rabify.me/category/wordpress/",
"meta": {
"links": {
"collection": "https://wp-kyoto.cdn.rabify.me/wp-json/taxonomies/category/terms",
"self": "https://wp-kyoto.cdn.rabify.me/wp-json/taxonomies/category/terms/4"
}
},
"name": "WordPress覚書",
"parent": null,
"slug": "wordpress"
}
]
},
"title": "あなたの好みはどのバージョン？WordPressの「由来」になったJAZZアーティストまとめ",
"type": "post"
}
]
これを「success: function(json)」のjsonと組み合わせることで投稿データを取得することができます。
こんな感じですね。
<script type="text/javascript">
$(document).ready(function() {
$.ajax({
type: "GET",
url: "/wp-json/posts?filter[posts_per_page]=5&filter[s]=WordPress&filter[order]=ASC",
dataType: "json",
success: function(json){
//投稿IDを取得する
console.log(json[0].ID);
//投稿のタイトルを取得する
console.log(json[0].title);
//投稿の著者の名前を取得する
console.log(json[0].author.name);
}
});
});
</script>
JSONの処理になれない方は、「N番目の投稿のデータの内容を取得する」が「json[N].data.content」になると思って頂けるとわかりやすいかもです。
なんに使う？WP-API
WP-APIの紹介でよく言われるのは「PHPが扱えなくてもテーマ・サイトが作れる」というところです。
アプリケーションのプラットフォームとしてWordPressを使う際にも、内部のデータをJSONで取得できることから活用されそうです。
その他にも「リアルタイムに検索結果を表示させること」などにも使えるのではないかと思います。
あとちょっと形式が違うのですが、WP-APIの出力をJSON-LDに変えることができればLODを作ることにも使えそうです。