複数の Web サイトを運用していて、WordPress で投稿したブログの内容（タイトルやアイキャッチ、公開日など）を別の Web サイトにも表示させたいと思ったことはありませんか？
同じサーバー上でしたら読み込むのは簡単ですが、別のサーバー上にある WordPress の投稿を参照するのはハードルが高めです。
そこで今回は、WordPress に標準搭載されている『 WP REST API 』を使ってブログの内容を他の Web サイトに表示させる方法を紹介します。
PHP を使わず JavaScript と HTML だけで実装できるので、表示させたい側の Web サイトのサーバーが PHP に対応していない場合も安心です。
目次
「Webサイトからお問い合わせが来ない…」とお悩みの方必見！
当サイトのノウハウを詰め込んだ『Web集客の無料ガイド』をご提供
1. WordPress の『 WP REST API 』について
『 WP REST API 』は、WordPress 上の特定の URL（エンドポイント）にアクセスすることで、WordPress に登録された様々な情報を参照または更新ができる仕組みです。
元々は自分でインストールしないと使えないライブラリでしたが、WordPress 4.7から標準搭載されるようになりました。
セキュリティ関係のプラグインを有効にしていると『 WP REST API 』が利用できない設定になっている可能性があるので、今回の作業を始める前に一旦プラグインを無効にするか、プラグインの設定で『 WP REST API 』の利用を許可するように変更してください。
『 WP REST API 』にはあらかじめたくさんのエンドポイントが用意されています。
今回はその中で、投稿を取得するエンドポイントを利用しましょう。
エンドポイントとは
エンドポイントとは、API を使って利用できる関数・機能のことで「 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 サイトやアプリケーションの連携を試してみてはいかがでしょうか？
次回の記事では、『 WP REST API 』に用意されているカスタムエンドポイント機能を使って、より使いやすいオリジナルのエンドポイントを追加し、思いどおりの情報を取得する方法をご紹介します。
