jQuery を 使って WP REST API v2 から 記事を 取得して 表示する (サムネイル対応)

いろいろ 探してみたのですけど コレ っていう サンプルコード が 見つからなかったので 備忘録 も 兼ねて 記事にしました

HTML

<ul id="wordpress"></ul>

JavaScript
別途 jQuery を 読み込んでください

jQuery( function( $ ) {
  $( document ).ready( function() {
    
    var target    = '#wordpress';
    var json_url  = '../wordpress/wp-json/wp/v2/posts/?_embed&filter[posts_per_page]=3';
    
    var media_id;
    var media_url;
    
    $.getJSON( json_url, function( posts ) {
      for( var row in posts ) {
        
        media_id = 0;
        media_url = '';
        
        media_id = posts[row].featured_media;
        
        $( posts[row]._embedded['wp:featuredmedia'] ).each( function( index, element ) {
          if( element.id != media_id ) return true;
          media_url = element.source_url;
          return false;
        } );
        
        // 正規表現パターン によって 年月日を 切り出す
        // var post_date_array_1 = posts[row].date.replace( /^([0-9]{4}-[0-9]{2}-[0-9]{2}).*$/, "$1" );
        // console.log( post_date_array_1 );
        // var post_date_array_2 = posts[row].date.replace( /^(.*)T.*$/, "$1" );
        // console.log( post_date_array_2 );
        
        // timezone が 環境依存のため date か date_gmt を 使い分ける
        // var post_date = new Date( posts[row].date_gmt );
        // そのまま表示
        // console.log( post_date.getFullYear() + '-' + ( post_date.getMonth()+1 ) + '-' + post_date.getDate() );
        // 月 日 を 2桁 表示
        // console.log( post_date.getFullYear() + '-' + ( '0' + ( post_date.getMonth()+1 ) ).slice( -2 ) + '-' + ( '0' + post_date.getDate() ).slice( -2 ) );
        
        var post_date = new Date( posts[row].date_gmt );
        
        $( target ).prepend(
          '<li>' +
          '<a href="' + posts[row].link + '">' +
          '<figure><img src="' + media_url + '" alt="image"></figure>' +
          '<time datetime="' + post_date.getFullYear() + '-' + ( post_date.getMonth()+1 ) + '-' + post_date.getDate() + '">' + post_date.getFullYear() + '年' + ( post_date.getMonth()+1 ) + '月' + post_date.getDate() + '日</time>' +
          '<p>' + posts[row].title.rendered + '</p>' +
          '</a>' +
          '</li>'
        );
        
      }
    } );
  } );
} );

WP REST API v2 Documentation
http://ja.wp-api.org/

JavaScript や jQuery は 得意ではないので 他の方に 面倒を 見てもらいながら コードを書いてみました

細かい出力は 適宜調整してください

例えば
アウトプットのコーディングとか
サムネイルが なかった場合の 処理とか

サムネイル の 情報は _embed という 引数 を 渡してやると 帰ってくる とか 知らなかった…

そもそも jQuery で 取得せずに PHP で 書けよ!! って 話ですが 勉強も 兼ねて jQuery で 取得して 表示させてみました