Moral Hazard!!

ドラマーが音楽やホームページやガラクタを作るよ。

WordPressブログから静的サイトに記事を取得し、javascriptで表示する (クロスドメイン、REST API、JSONP)

No Comment 駄日記

JSONPを使ってクロスドメインOKな取り込みを書いてくださっている方がいらっしゃったので、メモ。
REST APIをsrc=""で読み込んでやれば投稿記事がJSONPで取り込めるので、bodyの閉じタグ直前にでも挿入。

<script>
		var root = document.getElementById("id-name");//挿入したいID名

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

		// callback関数が呼ばれる
		function display_posts(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);
			})
		}
	</script>
	<script src="https://example.com/wp-json/wp/v2/posts/?_jsonp=display_posts&per_page=5"></script>

出典。感謝。