WordPressでREST APIのJSONを使用するならcontextは必須

REST APIとは

WordPressの投稿のデータのAPI。

WordPress 4.7以上だと下記のようなURLにアクセスすればプラグインなしで投稿一覧のJSONを読み込むことができる。

https://iwb.jp/wp-json/wp/v2/posts

例えば以下のようにJavaScriptでJSONデータを取得すれば投稿一覧のtitleなどを表示することができる。

// <ul id="r"></ul>
fetch('https://iwb.jp/wp-json/wp/v2/posts')
  .then(response => response.json())
  .then(data => {
    const r = document.getElementById('r')
    const html = data.reduce((a, c) => {
      a.push(c.title.rendered)
      return a
    }, [])
    r.innerHTML = '<li>' + html.join('</li><li>') + '</li>'
  });

REST APIでiwb.jpの投稿一覧のtitleを表示するサンプル

REST APIのパラメーター

REST APIにはパラメーターがたくさんあり、例えば前述のサンプルは投稿一覧を取得する件数のデフォルト設定が10件なので10件しか表示されていないが、これに?per_page=20のパラメーターを追加すると20件表示することができる。

20件表示するサンプル

REST APIのパラメーターはWordPress公式サイトのREST API Handbookにすべて記載されている。

REST API Handbook

contextパラメーターは必須

REST APIのパラメーターにはcontextというパラメーターがあり、デフォルトはviewで、ほかにembedとeditが存在する。(editは今回のサンプルでは使用不可)

contextでembedを指定するとcontent(本文)の内容などを含めないためREST APIのJSONのデータをかなり減らすことができる。

https://iwb.jp/wp-json/wp/v2/posts?per_page=20 (35.4KB)

https://iwb.jp/wp-json/wp/v2/posts?per_page=20&context=embed (6.7KB)

※ ただし、ACF to REST APIをインストールしてAdvanced Custom FieldsのデータをJSONで受け取っている場合はcontext=embedを指定すると値が取得不可になるので注意が必要。