BLOG ワードプレス関連 制作事例・実績
WP REST API 制作事例

こんにちは。Webloco代表/Webディレクターのヤブです。

今回は、「WP REST API」の概要やワードプレスの情報を取得したり、表示さいたりする方法をご紹介します。

 

WP REST APIとは？

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

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

なお、WP REST APIを使って、外部から投稿したい場合、「WP REST APIを使って外部から投稿する」をご覧ください。

 

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) {
  /*エラーの処理*/
});

 

単一投稿ページを表示する場合の例

var url = 'ワードプレスサイトのURL/wp-json/';
$.ajax({
  url: url + 'wp/v2/posts/任意の投稿ID',
  type:'GET',
  dataType: 'json',
  timeout:10000
}).done(function(datas) {
	var posttitle = datas.title.rendered;
	var postcontent = datas.content.rendered;
  /*HTMLを生成する処理*/
}).fail(function(datas) {
  /*エラーの処理*/
});

 

WP REST APIのまとめ

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

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

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

今回は、データを取得する方法でしたが、WP REST APIを使って、外部から投稿したい場合、「WP REST APIを使って外部から投稿する」をご覧ください。

 

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

 

[ctabutton2]