【JavaScript】WP REST APIを利用してWordPress記事を表示させる方法

はじめに

本記事では、WP REST APIを利用しJavaScriptでWordPress記事を表示させる方法をご紹介します。自分のサイトに特定サイトの新着記事情報を埋め込みたい方は是非、参考にしていただければと思います。

WP REST APIとは

ワードプレスで作成した投稿記事や固定ページなどの情報をJSON形式で取得できるAPIのことです。簡単に言うと、ワードプレスで管理している情報を引っ張り出せる仕組みと思ってもらえれば良いかと思います！

REST API(RESTful API)とは、Webシステムを外部から利用するためのプログラムの呼び出し規約(API)の種類の一つで、RESTと呼ばれる設計原則に従って策定されたもの。RESTそのものは適用範囲の広い抽象的なモデルだが、一般的にはRESTの考え方をWeb APIに適用したものをRESTful APIと呼んでいる。
RESTful APIでは、URL/URIですべてのリソースを一意に識別し、セッション管理や状態管理などを行わない(ステートレス)。同じURLに対する呼び出しには常に同じ結果が返されることが期待される。
また、リソースの操作はHTTPメソッドによって指定(取得ならGETメソッド、書き込みならPOSTメソッド)され、結果はXMLやHTML、JSONなどで返される。また、処理結果はHTTPステータスコードで通知するという原則が含まれることもある。

引用：IT用語辞典 e-Words

事前準備

WP REST APIエンドポイントの確認方法

WP REST APIエンドポイントは標準で以下となっております。

フォルダ階層をいじっていると、パスが変わっている可能性はありますが、基本的にはこの階層にあるためこのパスで覚えていただければと思います。

WP REST APIのリファレンスも用意されておりますので、詳細については以下から確認してみてください！

表示方法

では、実際に記事を表示させる方法をご紹介していきます。

JSONデータを取得

今回はアイキャッチも表示させたいので以下エンドポイントから情報を取得していきます。

以下のようなページアクセスできればOKです。

その他の取得方法についてちょっとだけご紹介

1. 特定の記事だけを取得
   http://lusknote.com/wp-json/wp/v2/posts/記事ID
2. 記事4件を取得
   http://lusknote.com/wp-json/wp/v2/post?per_page=4
3. アイキャッチ付き記事情報を取得
   http://lusknote.com/wp-json/wp/v2/post?_embed

取得したJSONデータから表示

取得したJSONデータから、記事のタイトル、URL、アイキャッチ画像URL、作成日を取得し、変数に格納していきます。
※JSONデータ構造上、アイキャッチ画像URLだけちょっと複雑です。。

// タイトル
var title = row.title.rendered;
// URL
var link = row.link;
// アイキャッチ画像URL
var thumbnail
if( row['_embedded']['wp:featuredmedia'] ) {
	thumbnail = row['_embedded']['wp:featuredmedia'][0]['source_url']
}
// 作成日
var create_date = row.date;

HTMLとして出力

あとは、HTMLとして出力させればOKです！

var html = '<ul class="feed-items slider">';

// 記事分ループ
html += '<li class="list-item"><a href="' + link + '"><div class="">';
html += '<div class="eyecatch"><img class="list-img" src="' + thumbnail + '"></div>';
html += '<div class="feed-create-date">' + create_date.slice(0,10) + '</div>';
html += '<div class="feed-title">' + title + '</div>';
html += '</div></a></li>';

html += '</ul>';

//JSONから取得した記事情報を特定箇所に追加する
$('#rssfeed').append(html)

最後に実際の実装サンプルコードも残しておくので、参考程度にご参照ください！

サンプルコード

おすすめ書籍

まとめ

本記事では、WP REST APIを利用してWordPress記事をサイト上に表示させる方法をご紹介いたしました。実務でWP記事を取得してサイト内に表示させることがあった際に勉強になったので、備忘録と同じ悩みをお持ちの方にと思いまとめてみました。参考にしていただければ幸いです。