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