wp rest api を使って投稿写真リストページを作る。|wordpressもくもく勉強会...
TRANSCRIPT
WordPressもくもく勉強会 at コエド第11回 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
エンドポイントでのパラメタ指定
1ページ目で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 になっているので、必要なデータを取り出す。
http://v2.wp-api.org/reference/media/
Media API Reference
11
APIで取得したデータからの取り出し
メディアの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
APIで取得したデータからの取り出し
メディアが掲載されている記事のURL:link Ex. http://yakitori-ya.net/search-gnavi/search-gnavi-2/
メディアのファイル名:title.rendered Ex. suitenguumae-ikkyuu
管理画面で設定した代替テキスト:alt_text Ex. 焼き鳥 古ぢどり屋がテレビで紹介
http://v2.wp-api.org/reference/media/
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