WordPressのWP REST APIで各記事のカテゴリ名が2つ以上表示されない問題を解決する

そもそもの始まりはあるサイトで別ドメインのWordPressの新着情報をトップページに表示したいという要望から。
通常であればなんの事はなく、feed(RSS)などを読み込めばいいかと思って見てみたら新着情報を表示する側のサイトではphpが使えない事が発覚。

んー、どないしましょ。
と悩んだ末、WordPressのWP REST APIを使ってjsで出力をさせることに。
WP REST APIをそもそも使ったことなかったんですが、勉強がてらやってみます。

そもそもWP REST APIとは

ざっくり言うとWordPressで作成したサイトの投稿やデータにアクセス出来るAPI。
例えば投稿した情報を json 形式で取得したり、管理画面以外から投稿を出来るようにしたりするものらしいです。

以前はWP REST APIを使うにはプラグインを有効化する必要があったらしいのですが、WordPress4.7以降のバージョンだと標準で実装されているようです。

例えば以下のurlにアクセスすると投稿のjsonデータが返ってきます。
※http://example.comの部分はwordpressのURL(site_url)に差し替えてください。

http://example.com/wp-json/wp/v2/posts

カテゴリ名を取得するためにWordPressのfunctions.phpにコードを追記する

で、今回の本題ですがWP REST APIを使って新着記事を引っ張る際、そのままではカテゴリ名を取得できません。（カテゴリIDであれば取得可能）。
カテゴリ名を取得するには以下コードのようにカテゴリ名を取得する関数をfunctions.phpに追加する方法があります。

//カテゴリ名を取得する関数を登録
add_action( 'rest_api_init', 'register_category_name' );

function register_category_name() {
//register_rest_field関数を用いget_category_name関数からカテゴリ名を取得し、追加する
    register_rest_field( 'post',
        'category_name',
        array(
            'get_callback'    => 'get_category_name'
        )
    );
}

//$objectは現在の投稿の詳細データが入る
function get_category_name( $object ) {
    $category = get_the_category($object[ 'id' ]);
    $cat_name = $category[0]->cat_name;
    return $cat_name;
}

こちらのサイトを参考にさせていただきました。
WP-REST APIで個別投稿毎にカテゴリ名を取得する

カテゴリが一つであれば良いのですが、二つ以上になった場合はさらにもう一工夫が必要となります。

//カテゴリ名を取得する関数を登録
add_action( 'rest_api_init', 'register_category_name' );

function register_category_name() {
//register_rest_field関数を用いget_category_name関数からカテゴリ名を取得し、追加する
    register_rest_field( 'post',
        'category_name',
        array(
            'get_callback'    => 'get_category_name'
        )
    );
}

//$objectは現在の投稿の詳細データが入る
function get_category_name( $object ) {
  $category = get_the_category($object[ 'id' ]);
	for ($i = 0; $i < count($category); ++$i) {
		$cat_name[$i] = $category[$i]->cat_name;
	}
  return $cat_name;
}

この記述で複数のカテゴリ名をjsonで返す事が可能になります。

続いて出力する側のページ設定

出力する側のページ（今回の例で言うとphpが使えないサイトのトップページ）でjsonを取得、加工して出力される記述をします。

<script>
    $.getJSON( "http://example.com/wp-json/wp/v2/posts", function(results) {
      $.each(results, function(i, item) {
        var date_data = new Date(item.date);
        var year = date_data.getFullYear();
        var month = date_data.getMonth() + 1;
        var day = date_data.getDate();
        var title = item.title.rendered;
        var link = item.link;
        var date = year + '.' + month + '.' + day;
				//カテゴリ名を取得
        var category = item.category_name;
				//このままではカテゴリ1,カテゴリ2のように「,」でカテゴリ繋がれてしまうので「・」に変更してみる
				category = category.join( "・" );
        $('.wp-post').append("<a href='" + link + "' ><li><p>" + date + '\t' + category + "</p><p>" + title + "</p></li>");
      });
    });
	</script> 
	
	<ul class="wp-post"></ul>

これでカテゴリ1・カテゴリ2というように複数のカテゴリ名を出力させる事ができました。
実際はもっと見た目を整えやすくするためにタグを綺麗にするかもですが、あくまでもご参考までに。