WP REST API を使って独自エンドポイントを設定する。

#WP REST API　を使って独自エンドポイントを設定する。

参考資料
WP REST API　公式ドキュメント
https://www.sofplant.com/blog/tech/wp-rest-api-tips/

WordPress 4.7以降より、標準で利用できる様になった[WP REST API]を使って独自エンドポイントを設定し、クロスドメインでデータの取得、表示を行います。

wordpressサイトをhogehoge.jp

データを受け取り、表示するサイトをfugafuga.jpと仮定します。

hogehoge.jp

functions.php内に記述してください。

functions.php

<?php
//wordpressに用意されているアクションフックで独自APIを作成します。

add_action('rest_api_init', function() {
	register_rest_route( 'wp/v2', '/org_api', array(
		'methods' => 'GET',
		'callback' => 'org_api',
	));
});
function org_api( ) {

	$contents = array();//return用の配列を準備
	$myQuery = new WP_Query();//取得したいデータを設定
	$param = array(
		'post_type' => 'blog',
		'posts_per_page' => 3,
		'order' => 'DESC'
	);
	$myQuery->query($param);
	 if($myQuery->have_posts()):
		 while ( $myQuery->have_posts() ) : $myQuery->the_post();
				$ID = get_the_ID();
				$title = get_the_title();
				array_push($contents, array(
					"title" => $title,
					"id" => $ID
				));
		 endwhile;
	 endif;
	 return $contents;// WP REST APIを利用するときはjsonで返ってくる様に設定されているので、json_encodeは必要ありません。
 }

http://hogehoge.jp/wp-json/wp/v2/org_api にアクセスしjsonが返ってくることを確認してください。

この時点でエラーが発生する場合はphp側の構文エラーなどが考えられます。

データを受け取る。
クロスドメインで利用する場合はdataTypeにjsonpを指定します。
fugafuga.jp

index.html

<p id="view_area"></p>

wp_rest_api.js

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
	$(function(){
			$.ajax({
			type: 'GET',
			url: 'http://hogehoge.jp/wp-json/wp/v2/org_api?_jsonp=callback',//コールバック関数名を指定する。 
			dataType: 'jsonp',
			jsonpCallback: 'callback',//コールバック関数名を指定する。
			success: function (jsonp) {
					$(jsonp).each(function(index,el){
                    let id = (jsonp[index]['id']);
					let title = (jsonp[index]['title']);
						$('#view_area').append(
						'<p>' + id + '</p>'
                         + '<p>' + title  + '</p>'
						);
				});
			}
		});
	});
</script>

以上でデータの表示が可能かと思います。
データが取得できなかった際の処理などは省いております。
独自エンドポイントを利用することで、標準のAPIではちょっと取得しにくいデータや、(カスタム投稿など)
リクエストのurlに好きなパラーメータを渡し、php側で利用することで柔軟なデータの取得が可能かと思います。

wp_rest_api.js

data : {
	'param' : 'key_word'
}

functions.php

<?php
//wordpressに用意されているアクションフックで独自APIを取得します。

add_action('rest_api_init', function() {
	register_rest_route( 'wp/v2', '/org_api', array(
		'methods' => 'GET',
		'callback' => 'org_api',
	));
});
function org_api( ) {
$param = $_GET['param'];
}

※エンジニアとしての経験が非常に未熟で間違いなどが多々あるかもしれません、ご了承ください。