WP REST APIでWordPressの投稿データをJSON形式で取得してみる
最終更新日: Update!!
WordPressで投稿した記事はWordPressテーマ内で専用の関数を使って出力することが多いかと思いますが、今回はWordPressに標準搭載されているREST APIである「WP REST API」から投稿データをJSON形式で取得し、JavaScriptで出力する方法を見ていきたいと思います。
一般的にWordPressテーマ内で投稿データを出力する場合にはPHPで書かれたテーマのテンプレートファイルを使うことが前提となりますが、最近ではJavaScriptのフレームワークを使ってフロント側の開発を行うことも多く、このAPI経由で投稿データを取得することでシングルページアプリケーションの中で記事を扱うことが可能になります。
このURLをベースにパスやクエリを追加することで、様々な条件で投稿データを取得することができます。下記にその例をまとめております。ちなみにデフォルトでは投稿データが返ってくるのは10件となっています。
また、上記のリクエストでは投稿記事に添付されたアイキャッチ画像のデータが含まれていません。そのため、アイキャッチ画像を取得する場合には下記のようにクエリを追加する必要があります。
今回は、WordPressの投稿データをAPI経由で取得する方法についてまとめてみました。このAPIを使うとWordPressを使って様々なアプリケーションができそうですね。WordPressサイトを制作する際には一度検討してみるのも良さそうですね。 (参考にさせて頂いたサイト) WP REST API
投稿データを一覧で取得する
WP REST APIを利用する方法は簡単で、GETメソッドで特定のURLへリクエストすると対象となるデータがJSON形式として返ってきます。その際に重要となるのは「エンドポイント」というAPIでアクセスするときにベースとなるURLです。WP REST APIの場合、下記のURLがエンドポイントとなります。<WordPressサイトURL>/wp-json/wp/v2/実際にブラウザのアドレスバーにURLを入力するとこのような表示になり、データが取得できていることが確認できます。


デフォルト投稿記事 | 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
sponserd
keyword search
recent posts
- レスポンシブ対応のインラインSVGを作成する
レスポンシブ対応のインラインSVGを作成する
- webpackで画像ファイルをバンドルしてCSSで読み込む画像をBase64エンコードする
webpackで画像ファイルをバンドルしてCSSで読み込む画像をBase64エンコードする
- メディアクエリを使わないレスポンシブコーディングを試してみる #3:コンテナクエリ
メディアクエリを使わないレスポンシブコーディングを試してみる #3:コンテナクエリ
- Vue.jsでStripe決済処理用のコンポーネントを作成する
Vue.jsでStripe決済処理用のコンポーネントを作成する
- GSAPのアニメーション進捗値取得とコントロールで円形のプログレスバーを作成する
GSAPのアニメーション進捗値取得とコントロールで円形のプログレスバーを作成する
- JavaScriptで再帰関数を使ってネストした配列の深さを調べる
JavaScriptで再帰関数を使ってネストした配列の深さを調べる
- MakeShopのクリエイターモードでオリジナルデザインのECサイトを構築するときに使えるコード集
MakeShopのクリエイターモードでオリジナルデザインのECサイトを構築するときに使えるコード集
- GSAPでScrollTriggerプラグインを使ってスクロールに対応したアニメーションを実装してみる#3:スクロールで固定表示
GSAPでScrollTriggerプラグインを使ってスクロールに対応したアニメーションを実装してみる#3:スクロールで固定表示
categories