Moral Hazard!!

静的サイト(example.com)にWordpressブログ(blog.example.com)から投稿記事を取得する備忘録。

例) 他Wordpressブログから、2020年の投稿記事を10件取得して2020年1月1日以降の記事を表示。

※クロスドメイン制約により、ドメインをまたいで取得することは出来ない。
(その場合はJSONPを使うなりPHP使うなりFeedから取り込むなり)

var root = document.getElementById("id-name");//読み込み先サイトのID

function getRequest(props) {
	var xhr = new XMLHttpRequest();
	xhr.open("GET", encodeURI(props.uri));
	xhr.onload = function () {
		if (xhr.status !== 200) {
			console.log('Status error');
		} else {
			props.callback(JSON.parse(xhr.responseText));
		}
	};
	xhr.send();
}

function forEach(props, callback) {
	for (var i = 0, max = props.length; i < max; i++) {
		callback(props[i], i)
	}
}

getRequest({
	uri: "https://blog.example.com/wp-json/wp/v2/posts?page=1&per_page=3&after=2020-01-01T00:00:00",
	callback: function (posts) {
		forEach(posts, function (post) {
			var title = post.title.rendered;
			var link = post.link;
			var year = post.date.substr(0, 4);
			var month = post.date.substr(5, 2);
			var day = post.date.substr(8, 2);
			var newElement = document.createElement("li");
			newElement.innerHTML = '<a href="' + link + '" target="_blank"><span>' + Number(month) + '/' + Number(day) + '</span><span>' + title + '</span></a>';

			root.appendChild(newElement);
		})
	}
});

出典