WordPressを最新にアップグレードすると、ダッシュボードの下方にREST APIという文字が飛び込んできた。どうも4.7からWordPress REST APIが本体に追加されたようでした[1]https://ja.wordpress.org/2016/12/07/vaughan/。もともとXML-RPC APIがサポートされていましたが、扱いやすいREST APIでレスポンスをJSON形式で受け取れるようになったようなので、JavaScriptや他のプログラミング言語を使ってWordPressと連携したアプリケーションを作りやすくなったのではと思います。
試しに投稿一覧を取得してみる
REST APIのエンドポイントのベースは、以下のようになります。
|
1 |
http://<yourdomain>/wp-json/wp/v2/ |
例えば投稿に関するリソースを取得するには以下のようになります。
|
1 |
http://debug-life.net/wp-json/wp/v2/posts |
試しに投稿一覧を取得してみます。上記URLにGETリクエストを送信してみます。以下では、CocoaRestClient[2]https://developer.wordpress.org/rest-api/reference/というアプリを使っています。
上手く取得できているようでした。
APIの詳細は以下のドキュメントで参照可能です。
JSONPで表示してみる
REST APIには、Global Parameters[3]http://v2.wp-api.org/reference/global.htmlというAPIのリクエスト/レスポンスをカスタマイズするパラメータが使えます。_jsonp、_method、_envelope、_embedなどがあります。このパラメータを使うとJSONP形式でレスポンスを受けることが可能です。これによりクロスドメインでのコンテンツの取得が可能です。
以下では、JavaScriptで最新5件の投稿を取得してページに表示しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>WordPress REST API Test</title> <script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script> </head> <body> <script> // callback関数が呼ばれる function display_posts(data) { var posts = []; // titleだけ取得 $.each(data, function(key, post) { posts.push("<li>" + $("<div>").text(post.title.rendered).html() + "</li>"); }); // bodyに追加する $("<ul/>", { html: posts.join("") }).appendTo("body"); } </script> <script src="https://debug-life.net/wp-json/wp/v2/posts/?_jsonp=display_posts&per_page=5"></script> </body> </html> |
これを実行すると以下のようになります。
スポンサーリンク
コメント