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

REST API 2020.09.21

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

Tags: ,,,

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

この記事を書いた人

オガワ シンヤ

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

  • Twitter

コメントフォーム

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。

内容に問題なければ、お名前・ハンドルネームとメールアドレスを入力いただき、下記の「コメントを送信」ボタンを押してください。

CAPTCHA


この記事もよく読まれています

Scroll to Top
ご質問・ご相談はありませんか ?