WP-API v1 で投稿データのJSONをAjax取得してみる覚書 #wpacja2014

追記

この記事で紹介している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を作ることにも使えそうです。

WordPress ADVENT CALENDAR 2014、次回は石原さんです。