owned mediaウェブ制作に役立つコンテンツを発信中!

WP REST APIでWordPressの投稿データをJSON形式で取得してみる

最終更新日: Update!!
WordPressで投稿した記事はWordPressテーマ内で専用の関数を使って出力することが多いかと思いますが、今回はWordPressに標準搭載されているREST APIである「WP REST API」から投稿データをJSON形式で取得し、JavaScriptで出力する方法を見ていきたいと思います。   一般的にWordPressテーマ内で投稿データを出力する場合にはPHPで書かれたテーマのテンプレートファイルを使うことが前提となりますが、最近ではJavaScriptのフレームワークを使ってフロント側の開発を行うことも多く、このAPI経由で投稿データを取得することでシングルページアプリケーションの中で記事を扱うことが可能になります。  
投稿データを一覧で取得する
WP REST APIを利用する方法は簡単で、GETメソッドで特定のURLへリクエストすると対象となるデータがJSON形式として返ってきます。その際に重要となるのは「エンドポイント」というAPIでアクセスするときにベースとなるURLです。WP REST APIの場合、下記のURLがエンドポイントとなります。
<WordPressサイトURL>/wp-json/wp/v2/
  実際にブラウザのアドレスバーにURLを入力するとこのような表示になり、データが取得できていることが確認できます。   このURLをベースにパスやクエリを追加することで、様々な条件で投稿データを取得することができます。下記にその例をまとめております。ちなみにデフォルトでは投稿データが返ってくるのは10件となっています。
デフォルト投稿記事 https://exapmle.com/wp-json/wp/v2/posts
固定ページ https://exapmle.com/wp-json/wp/v2/pages
カスタム投稿記事 https://exapmle.com/wp-json/wp/v2/POST_TYPE
  また、上記のリクエストでは投稿記事に添付されたアイキャッチ画像のデータが含まれていません。そのため、アイキャッチ画像を取得する場合には下記のようにクエリを追加する必要があります。
https://exapmle.com/wp-json/wp/v2/POST_TYPE?_embed
  そのほかにも様々なデータを取得することができます。使い方によってはかなり幅が広がりますね。
タクソノミーの一覧を取得する https://exapmle.com/wp-json/wp/v2/taxonomies
特定のタクソノミーのタームの一覧を取得する https://exapmle.com/wp-json/wp/v2/TAXONOMY_NAME
メディアの一覧を取得する https://exapmle.com/wp-json/wp/v2/media
コメントの一覧を取得する https://exapmle.com/wp-json/wp/v2/comments
個別の投稿記事を取得する https://exapmle.com/wp-json/wp/v2/POST_TYPE/POST_ID
 
取得したデータをJavaScriptで展開する
データはJSON形式で返ってくるため、JavaScriptを使ってHTML上に展開することも可能です。HTTP通信でAPIにアクセスするため、下記のようにfetch()メソッドなどでデータを取得できます。一覧で取得する場合にはデータは配列型になっているため、forEach()メソッドを使って個別に処理を加えていきます。 【JavaScriipt】
fetch('https://exapmle.com/wp-json/wp/v2/POST_TYPE?_embed')
  .then((response) => response.json())
  .then((data) => {
    data.forEach(item => {
      const html = `
        <div>
          投稿日時:${item.date}
          パーマリンク:${item.link}
          タイトル:${item.title.rendered}
          サムネイルURL:${item._embedded['wp:featuredmedia'][0].source_url}
        </div>
      `
      console.log(html)
    });
  });
  実際にコンソールで確認してみると、文字列として投稿記事のデータがHTMLに展開できているのが確認できますね。この方法でフロント側をSPAにように実装することでWordPressをヘッドレスCMSとして運用することも可能になりますね。  
  今回は、WordPressの投稿データをAPI経由で取得する方法についてまとめてみました。このAPIを使うとWordPressを使って様々なアプリケーションができそうですね。WordPressサイトを制作する際には一度検討してみるのも良さそうですね。   (参考にさせて頂いたサイト) WP REST API
  • はてなブックマーク
  • Pocket
  • Linkedin
  • Feedly

この記事を書いた人

Twitter

sponserd

    keyword search

    recent posts

    • Twitter
    • Github
    contact usscroll to top
      • Facebook
      • Twitter
      • Github
      • Instagram