WordBench東京 12月勉強会 「 Xmas ＆年末 LT 大会！」

〜ピザとケーキとライトニングトーク〜

WordPress 4.7 REST API コンテンツエンドポイント

Yoshinori Kobayashi1

REST APIを使ってフォトリストを作る

2

生まれは　奈良県　です

小林由憲（こばやしよしのり）

Twitter:

TickleCodeブログ:

@yoshiii514

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

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

3

【CoEdo.rb】

Ruby / Ruby on Rails ビギナーズ勉強会

Swiftビギナーズ勉強会

WordPressもくもく勉強会

http://wp-moku.doorkeeper.jp/

https://swift-beginners.doorkeeper.jp/

https://coedo-rails.doorkeeper.jp/

自己紹介

4

思う存分に、翻訳・プラグイン開発・テーマ制作・Core（本体）開発を学びたかったので、新しく勉強会を始めました！

WordPressコントリビュート勉強会

自己紹介

第６回は、１月８日（土）１４:００

5

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

デモをします

フォトリスト：写真から選ぶ焼き鳥店

6

管理画面：メディアの設定

注出用のキーワード（キャプションで代用）

記事URL。代替テキストで代用

7

WordPress 4.7

REST API コンテンツエンドポイントの導入

WP REST API プラグインがなくてもAPIがフル稼働するようになった。

http://ja.wp-api.org/

8

メディア（画像、動画など）の取得

http://yakitori-ya.net/wp-json/wp/v2/media

サイトURL エンドポイント

サイトURLの後に、メディアを取得するエンドポイン

トを指定します。

9

メディアの特定の画像のみ取得

http://yakitori-ya.net/wp-json/wp/v2/media?media_type=image&search=photolist

「photolist」が含まれる画像を指定

エンドポイントの後に、「?」に続いてパラメタを指

定。パラメタが複数のときは、「&」でつなげる。

10

Ajaxで取得して、画像を並べる

<script>$.ajax({ type: "GET", url:"http://yakitori-ya.net/wp-json/wp/v2/media", data:{ media_type: 'image', search: 'photolist' }, dataType: "json", success: function(rtn_data){ …. // HTMLを作成、画像を並べる

}});</script>

URLパラメタ

エンドポイント

11

まとめ

・WordPress4.7 からプラグインなしで使える。

・クロスドメイン。

（異なるドメインでもデータ取得できる）

・WordPressでデータを作って、他のサイトやスマホア

プリで再利用しやすい。

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

12