はじめに
複数のWebサイトを運用していて、WordPressで投稿したブログの内容（タイトルやアイキャッチ、公開日など）を別のWebサイトにも表示させたいと思ったことはありませんか？
同じサーバー上でしたら読み込むのは簡単ですが、別のサーバー上にあるWordPressの投稿を参照するのは難しいです。
そこで今回は、WordPressに標準搭載されている『WP REST API』を使ってブログの内容を他のWebサイトに表示させる方法をご紹介します。
PHPを使わずJavaScriptとHTMLだけで実装できますので、表示させたい側のWebサイトのサーバーがPHPに対応していない場合も安心です。
目次
1. 『WP REST API』について
『WP REST API』は、WordPress上の特定のURL（エンドポイント）にアクセスすることで、WordPressに登録された様々な情報を参照（または更新）できる仕組みです。
元々は自分でインストールしないと使えないライブラリでしたが、WordPress4.7から標準搭載されるようになりました。
セキュリティ関係のプラグインを有効にしていると『WP REST API』が利用できない設定になっている可能性がありますので、今回の作業を始める前に一旦プラグインを無効にするか、プラグインの設定でWP REST APIの利用を許可するように変更してください。
『WP REST API』にはあらかじめたくさんのエンドポイントが用意されています。
今回はその中で、投稿を取得するエンドポイントを利用しましょう。
2. 『WP REST API』で最新のブログ一覧を取得する
本章では、実際に『WP REST API』でどのようなデータが取得できるのか、Webブラウザ上からエンドポイントにアクセスして試しに取得してみます。
投稿の情報を取得するエンドポイントは/wp-json/wp/v2/posts です。
このURLに「公開日」「公開状態」「投稿者」「カテゴリ・タグ」「取得する件数」「ソート順」などのリクエストパラメータを付与してアクセスすることで、目当ての記事の情報を取得することができます。
WordPressでテンプレートファイルを作成するのに慣れている方は、get_posts（）と同じとイメージしていただければ理解しやすいと思います。
Webブラウザを開いて、アドレスバーに以下のURLを入力してください。
<WordPressのトップページ>/wp-json/wp/v2/posts?_embed
Webブラウザに以下の写真のように文字がたくさん表示されたら成功です。
これはブログの内容を「JSON」という形式にフォーマットしたもので、タイトルや本文、アイキャッチなどの情報が含まれています。
3. 他のWebサイトに最新のブログ一覧を表示させる
2.でブログの情報が取得できることが分かりましたので、この情報をJavaScriptで解析してブログ記事の一覧HTMLを生成する仕組みを作っていきます。
jQueryを使いますので、以下のサイトからjQueryのコアパッケージをCDNで読み込むためのタグをHTMLファイルに貼り付けしてください。
リンクをクリックすると、<script>タグがポップアップで表示されます。
表示されたタグを、一覧を出力するHTMLファイルの<head>または<body>に貼り付けしてください。
右側の青いボタンをクリックするとタグがコピーされるので便利です。
まずブログ記事を表示させるページのHTMLファイルに、どの部分に記事を表示させるのか指定するためにid付きの<div>を追加してください。
<div id="wordpress_blog"></div>
次に、『WP REST API』のエンドポイントにアクセスするための実装をJavaScriptに追加します。
<script>
$(function(){
$.ajax({
type: 'GET',
url: '<WordPressのトップページ> /wp-json/wp/v2/posts?_embed',
dataType: 'json'
}).done(function(json){
//TODO ここにHTMLを追加するための記述を書く
alert( JSON.stringify( json ) );
}).fail(function(json){
console.error('WordPressのブログ記事取得に失敗しました。')
});
});
</script>
jQueryのajaxメソッドを使って『WP REST API』のエンドポイントにアクセスしています。
type（アクセス方法）を「GET」にすることと、dataType（実行結果のデータ形式）を「json」に指定するの忘れないようにしてください。
アクセスに成功したらdoneの、失敗したらfailの引数に指定された関数がコールバックで実行されます。
上記のソースコードは、まずエンドポイントにアクセスできるかどうか試したいので、doneの内部で実行結果をアラートで表示するように実装しています。
変更を保存してWebブラウザで該当のページにアクセスしてください。
以下のようにアラートが表示されて、実行結果のJSON文字列が表示されればエンドポイントへのアクセスは成功です。
成功しましたら、今度は実行結果をもとにブログの情報を埋め込んでいくHTMLを作成します。
先ほどのスクリプトでTODOにしていたところを、以下のように変更してください。
<script>
$(function(){
$.ajax({
type: 'GET',
url: 'http://<WordPressのトップページ>/wp-json/wp/v2/posts?_embed',
dataType: 'json'
}).done(function(json){
var html = '';
//記事の件数分イテレートする
$.each(json, function( i, row ) {
//ブログのタイトル
var title = row.title.rendered;
//ブログのURL
var link = row.link;
//ブログの本文
var excerpt = row.excerpt.rendered;
//サムネイル画像のURL
var thumbnail
if( row['_embedded']['wp:featuredmedia'] ) {
thumbnail = row['_embedded']['wp:featuredmedia'][0]['media_details']['sizes']['full']['source_url']
}
html += '<article class="wp-article">';
html += '<div class="eyecatch"><img src="' + thumbnail + '"></div>';
html += '<h3><a href="' + link + '">' + title + '</a></h3>';
html += '<p>' + excerpt + '</p>';
html += '</article>';
});
//整形した記事の情報をページに追加する
$('#wordpress_blog').append(html)
}).fail(function(json){
console.error('WordPressのブログ記事取得に失敗しました。')
});
});
</script>
変更を保存して、再度Webブラウザで該当のページにアクセスしてください。
WordPressに投稿したブログの記事が該当のページに埋め込まれて表示されます。
最後にスタイルシートで見た目を整えて、完成です。
div#wordpress_blog {
width: 100%;
position: relative;
}
div#wordpress_blog > article.wp-article {
width: 31%;
margin-right: 3%;
display: inline-block;
vertical-align: top;
}
div#wordpress_blog > article.wp-article:nth-child( 3n ) {
margin-right: 0;
}
div.eyecatch {
border: 1px solid #000000;
margin-bottom: 20px;
}
div.eyecatch > img {
width: 100%;
vertical-align: top;
height: auto;
}
ブログの最新投稿5件を埋め込んだHTML
記事取得元のブログ（WordPress・トップページ）
4. 最後に
今回の記事では、『WP REST API』を使って他のWebサイトにWordPressのブログ記事を埋め込む方法を説明しました。
『WP REST API』には他にも色々な機能を持つエンドポイントが初めから用意されていますし、自分でエンドポイントを作ることもできます。ぜひ使いこなして、WordPressと他のWebサイトやアプリケーションの連携を試してみてはいかでしょうか？