WP REST APIを利用して、他のワードプレスサイトで情報を取得、表示する

WP REST APIとは?

簡単に説明すると、ワードプレスで投稿したデータを、json形式で取得出来きて、javascriptなどで、自由に加工、表示出来る様になります。

ワードプレスの言語はPHPなので、通常はデータベースから取得して、書き出してあげる必要がありますが、PHPが苦手なフロントエンドエンジニアでも、javascriptが出来れば、簡単にテーマを作成出る様になります。

 

WP REST APIを利用したページをご覧いただきます。

WP REST APIのデータ元のページ【親ページ】

WP REST APIでデータを取得して表示しているページ【子ページ】

上記は、同じドメインでデザインも似ている為、分かりにくいですが、別のワードプレスで運用しています。

子ページでは、親ページからjson形式でデータを受け取って、自分のサイトのコンテンツの様に表示しています。

 

WP REST APIの実装方法【親ページ側】

ワードプレスのver4.7で、WP REST APIの機能がコアに組み込まれたと発表がありました。

それまでは、親側に「WP REST API」のプラグインを入れる必要がありました。(私の認識では)

コアに組み込まれたという事は、ver4.7以降は、プラグインを入れなくても動くのではと思います。

その為、何もする必要はないかもしれません。

カスタムフィールドの値を取得する場合

案件によっては、カスタムフィールドを使う場合があると思います。私はいつも「アドバイスカスタムフィールド」のプラグインをインストールして管理していました。

今までは、カスタムフィールドの値を取得する場合、「ACF to REST API」というプラグインをインストールする必要がありました。

コアに組み込まれてからはどうなのでしょうか?そこは未検証です。

 

WP REST APIのデータを取得してみる

データがどのような形で取得できるか、一度見てみましょう。以下のアドレスにアクセスしてみると、json形式のデータが表示されます。

「自分のワードプレスサイトのURL/wp-json/」

例.https://www.xxx.com/wp-json/

 

投稿のデータを取得したい場合

「自分のワードプレスサイトのURL/wp-json/wp/v2/posts/」

 

投稿のIDが「1」のデータを取得したい場合

「自分のワードプレスサイトのURL/wp-json/wp/v2/posts/1/」

 

カスタム投稿のデータを取得したい場合

「自分のワードプレスサイトのURL/wp-json/wp/v2/カスタム投稿スラッグ/」

 

パラメタの部分は、「WP REST APIの公式ページ」を見ると詳しく書いてあります。

 

WP REST APIの実装方法【子ページ側】

データがjson形式で取得出来る事はだいたい理解できたかと思います。

後は、これをどのように実装するかですが、ベースの知識として、ajaxやjavascript、ワードプレステーマ基本ルールなどが必要になります。

逆に言えば、上記の知識があれば、とても簡単に実装できると思います。

ワードプレスの任意のテーマファイルにjavascriptを記入

WP REST APIで取得したデータを表示させたいテーマファイルに、基本的なHTMLやPHPのソースを記述します。

その後、javascriptで、以下の様な記述をします。内容は、臨機応変に変更してください。

var url = 'ワードプレスサイトのURL/wp-json/';
$.ajax({
  url: url + 'wp/v2/任意のパラメータ',
  type:'GET',
  dataType: 'json',
  data : {
    per_page: 10//1ページ当たりに取得する記事数
  },
  timeout:10000,
}).done(function(datas) {
  for (var i = datas.length - 1; i >= 0; i--) {
  /*データを取得して表示する処理*/
  }
}).fail(function(datas) {
  /*エラーの処理*/
});

 

 

WP REST APIのまとめ

ワードプレスをAPI化出来るなんてとても便利だと思います。javascriptが得意な方は、この機能を使っていろんな情報を出し入れ出来る様になるかもしれません。

ただ問題かなと思う事があり、javascriptはフロントエンドのプログラムなので、ブラウザ上から簡単に閲覧できますし、悪意のある人にソースを盗まれてしまう懸念もあります。

後、セキュリティの部分は別途対策が必要だと思います。

 

以上「WP REST APIを利用して、他のワードプレスサイトで情報を取得、表示する」のご紹介でした。