WordPressのWP REST APIを使ってイベント開催日などカスタム投稿で入力した日付順に並べる

新着記事一覧などで通常の投稿日順ではなく、イベント開催日などカスタム投稿で入力した日付順に並べたい場合があります。
いくつか方法はあるのですが、今回はWP REST APIを使って任意の並び順で表示させる方法を紹介します。

基本的な記述に関しては先日書いたこちらの記事をベースにしています。

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

出力させるページに以下のコードを記述します。

<script>
$.getJSON( "http://example.com/wp-json/wp/v2/posts", function(results) {
	//カスタムフィールドの値を取得して、その値順に並べる
	function compare(a, b) {
		//「開催日」の部分は独自で設定したカスタムフィールドのフィールド名が入ります
		const dateA = a.acf.開催日;
		const dateB = b.acf.開催日;
		let comparison = 0;
		if (dateA > dateB) {
			comparison = 1;
		} else if (dateA < dateB) {
			comparison = -1;
		}
		return comparison;
	}
	results.sort(compare);

	$.each(results, function(i, item) {
		var title = item.title.rendered;
		var link = item.link;
		//「開催日」の部分は独自で設定したカスタムフィールドのフィールド名が入ります
		var event_date = item.acf.開催日;
		$('.wp-post').append("<a href='" + link + "' ><li><p>" + event_date + "</p><p>" + title + "</p></li>");
	});
});
</script>

<ul class="wp-post"></ul>

これでカスタムフィールドで入力した日付順に記事一覧が並びます。
WP REST APIでは色々な値を取得出来るのでカスタムの幅も広がりそうですね。