WP REST API を使って投稿写真リストページを作る。｜WordPressもくもく勉強会 at コエド第１１回

WordPressもくもく勉強会 at コエド第1１回 16.02.05

WP REST API を使って投稿写真リストページを作る。

TickleCode.

Yoshinori Kobayashi 1

WordPressで作る焼き鳥サイト

Media Endpoins と jQuery.getJSON

もくもく会（自主勉強会）を複数の運営メンバーやアドバイザーの方々とともに、定期開催しています。

勉強会を定期開催しています)^o^(

2

【CoEdo.rb】 Ruby / Ruby on Rails ビギナーズ勉強会

Swiftビギナーズ勉強会

3

WordPressもくもく勉強会

もくもく会（自主勉強会）を複数の運営メンバーやアドバイザーの方々とともに、定期開催しています。

勉強会を定期開催しています)^o^(

WordPress

コントリビュート

勉強会

4

今回やりたいこと

サイトで撮影した写真の一覧をつくる。ページネーションを追加するか、スクロールしたときに、次の写真をふわっと出したい。

※まだ、未完成^^;

5

WP REST API Plugin

プラグインの導入でAPIが使えるようになる。

6

getJSONでエンドポイントから取得

var endpoint = '/wp-json/wp/v2/media';

jQuery.getJSON(endpoint,function(json){

// ここに取得後の処理を書いていく。

}

jQueryのgetJSONでエンドポイント（URL）を指定するとデータが取得できる。

7

Media が取得できるエンドポイント

エンドポイント Endpoints 動作が定義されるURLを示す。 URLにアクセスすると特定の動作を行える。

/wp-json/wp/v2/media

http://v2.wp-api.org/reference/media/

Media API Reference





8

エンドポイントでのパラメタ指定

１ページ目で12件取得する。

wp-json/wp/v2/media?per_page=12

9

エンドポイントでのパラメタ指定

2ページ目で12件取得する。

wp-json/wp/v2/media?page=2&per_page=12

10

APIで取得したデータからの取り出し

取得したデータはJSON Object になっているので、必要なデータを取り出す。


Media API Reference





11


メディアのURLを取得：source_url

var endpoint = '/wp-json/wp/v2/media';

jQuery.getJSON(endpoint,function(json){

var items = [];

jQuery.each( json, function( key, val ) {

items.push( '<li id="' + key + '"><img src="' + val.source_url +

‘"/></li>');

});

:

http://yakitori-ya.net/wp/wp-content/uploads/2015/09/search-gnavi.jpg

12


メディアが掲載されている記事のURL：link Ex. http://yakitori-ya.net/search-gnavi/search-gnavi-2/

メディアのファイル名：title.rendered Ex. suitenguumae-ikkyuu

管理画面で設定した代替テキスト：alt_text Ex. 焼き鳥古ぢどり屋がテレビで紹介


Media API Reference Shema





13

REST API では他ドメインのデータも取得できる。

REST API ではクロスドメインでもデータ取得が行えるので、複数サイトのデータを取得することができます。

http://yakitori-ya.net/・・・

クライアント

http://yakitori-ya.net/photo-library/

http://oyakodon.net/・・・

14

注意したいこと！

取得（Read）だけなら認証は不要！ Cookie Authentication、OAuth Authentication などは使わなくても取得できる。

書き込み（Write）したいときは、Cookie Authentication、OAuth Authentication が必要になる。

http://v2.wp-api.org/guide/authentication/

Authentication | WP REST API V2





ご清聴ありがとうございました。

15

Internet

WP REST API を使って投稿写真リストページを作る。｜WordPressもくもく勉強会 at コエド第１１回