【WordPress】WP REST APIに独自の出力を作る(エンドポイントをつくる)

WP REST APIを使って投稿を出したかったのですが、REST APIで呼び出せる情報が多すぎてJSONが少し重たかったので、自分に必要なものだけを出力しているJSONファイルを作ることにしました。

(エンドポイントを作る、というようです)

出したかったもの

  • タイトル
  • URL(パーマリンク)
  • 抜粋
  • 投稿者
  • アイキャッチ画像のサムネイル

今回はこの投稿を5件まで出すJSONを作ります。

出し方

functions.phpに下記のようにエンドポイントを使いする記述を書きます。

/* ================================ *
   WP REST APIのオリジナルエンドポイント追加
 * ================================ */
  function add_rest_original_endpoint(){
    
    //エンドポイントを登録
    register_rest_route( 'wp/custom', '/posts', array(
        'methods' => 'GET',
        //エンドポイントにアクセスした際に実行される関数
        'callback' => 'get_posts_original',
    ));
    
  }
  add_action('rest_api_init', 'add_rest_original_endpoint');



function get_posts_original() {
    $contents = array();//return用の配列を準備
    $myQuery = new WP_Query();//取得したいデータを設定
    $param = array(
        'post_type' => 'post',
        'posts_per_page' => 5
    );
  
    $myQuery->query($param);
     if($myQuery->have_posts()):
         while ( $myQuery->have_posts() ) : $myQuery->the_post();
                $title = get_the_title();
                $linkurl = get_the_permalink();
                $excerpt = get_the_excerpt();
                $author = get_the_author();
                $thumb = get_the_post_thumbnail_url(0,'full');
                array_push($contents, array(
                    "title" => $title,
                    "linkurl" => $linkurl,
                    "excerpt" => $excerpt,
                    "author" => $author,
                    "thumb" => $thumb
                ));
         endwhile;
     endif;
     return $contents;
}

'wp/custom', '/posts'の部分によって、 [WordPressのURL]/wp-json/wp/custom/postsというJSONが出せます。

JSONの中身はこんな感じ。

※JSONの構造はブラウザで見てもよく分からないので、 http://jsonviewer.stack.hu/ の力を借りて内容を確認しました。

ページに表示させる(jQuery)

(function($, root, undefined) {
  $.ajax({
    type: 'GET',
    url: '[WordPressのURL]/wp-json/wp/custom/posts',
    dataType: 'json'
  }).done(function(json){
    var html = '';
    $.each(json, function( i, row ) {
      var title = row.title;
      var link = row.linkurl;
      var author = row.author;
      var excerpt = row.excerpt;
      var thumbnail
      if( row.thumb ) {
        thumbnail = row.thumb;
      }else{
        thumbnail ='[アイキャッチ画像が無いときの代わりのサムネイル]';
      }
      html += '<article>';
      html += '<a href="' + link + '">';
      html += '<div class="eyecatch"><img src="' + thumbnail + '"></div>';
      html += '<h3>' + title + '</h3>';
      html += '<p class="author">' + author + '</p>';
      html += '<div class="content">' + excerpt + '</div>';
      html += '</a>';
      html += '</article>';
    });

    $('#wordpress_blog').append(html)
  }).fail(function(json){
    console.error('WordPress JSON error')
  });
})(jQuery, this);

これで、ページ上に無事に表示されました!

 

参考

WP REST APIで新規エンドポイント(カスタムJSONデータ)を作成する

https://knowledge.cpi.ad.jp/cms/wp-rest-api2/