- 2019年7月30日
- 2019年12月19日
wordpressのapiとajaxを使って画像やデータを取得、表示する方法

wordpressのapiとajaxを使って画像やデータを取得、表示する方法のメモ
wordpress apiを取得
wordpress rest api と言う仕組みでデータを取得する
サイトのurl/wp-json/wp/v2/posts でデータを見られる
ajaxとjson
jsのajaxを使用し、データを取得し、リンク付きのタイトルを表示する
$.ajax({ type: "GET", url: "サイトのurl/wp-json/wp/v2/posts", dataType: "json" }).then( function(json){ for(var i in json){ $("ul").append( "<a href='" + json[i].link + "'>" + json[i].title.rendered + "</a>" ); if(i >= 数値を指定){ //指定した数値以降にループを抜ける処理 break; } } }, function(){console.log("取得失敗");} );
jsonで取得したデータをforループで一件ずつ処理する
リンクは.link
タイトルは.title.renderedなど
取得したデータから/wp-json/wp/v2/postsを参考に欲しいデータを表示する
取得出来るデータ一例
- .title.rendered
- .link
- .content.rendered、など
画像を表示するには
画像を表示するには下記プラグインを使用すると手っ取り早い
- Advanced Custom Fields
- ACF to REST API
「Advanced Custom Fields」を利用すれば画像だけでなく欲しい情報を手に入れやすい
「Advanced Custom Fields」で設定した項目を「ACF to REST API」にて取得する
「ACF to REST API」を入れると「サイトのurl/wp-json/wp/v2/posts」で見れる一覧の中に「acf」と言う項目が追加される
例えばメイン画像を「Advanced Custom Fields」のフィールドラベルにて「mainimg」と設定していたら
acf: mainimg: "指定した画像のパス"
と表示される
これを既出のループで回すなら
$.ajax({ type: "GET", url: "サイトのurl/wp-json/wp/v2/posts", dataType: "json" }).then( function(json){ for(var i in json){ $("ul").append( "<img src='" + json[i].acf.mainimg + "'>" ); if(i >= 数値を指定){ //指定した数値以降にループを抜ける処理 break; } } }, function(){console.log("取得失敗");} );
とする
json[i].acf.mainimg部分が画像のパスの読み込み
まとめ
wordpressを入れているサイトの
wordpressでは無いページで
wordpressの内容を取得、表示するには
apiとajaxを使用する
画像やその他既存の項目以外の項目を表示したい場合はプラグインの「Advanced Custom Fields」と「ACF to REST API」を使用する