WordPress REST API JSONPで投稿を取得する

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のエンドポイントのベースは、以下のようになります。

http://<yourdomain>/wp-json/wp/v2/

例えば投稿に関するリソースを取得するには以下のようになります。

http://debug-life.net/wp-json/wp/v2/posts

試しに投稿一覧を取得してみます。上記URLにGETリクエストを送信してみます。以下では、CocoaRestClient[2]https://developer.wordpress.org/rest-api/reference/というアプリを使っています。

上手く取得できているようでした。

APIの詳細は以下のドキュメントで参照可能です。

https://developer.wordpress.org/rest-api/reference/

JSONPで表示してみる

REST APIには、Global Parameters[3]http://v2.wp-api.org/reference/global.htmlというAPIのリクエスト/レスポンスをカスタマイズするパラメータが使えます。_jsonp、_method、_envelope、_embedなどがあります。このパラメータを使うとJSONP形式でレスポンスを受けることが可能です。これによりクロスドメインでのコンテンツの取得が可能です。

以下では、JavaScriptで最新5件の投稿を取得してページに表示しています。

<!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>

これを実行すると以下のようになります。

スポンサーリンク


byebyehaikikyou

日記やIT系関連のネタ、WordPressに関することなど様々な事柄を書き付けた雑記です。ITエンジニア経験があるのでプログラミングに関することなどが多いです。

シェアする

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

コメントする

Translate »