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」を使用する