WordPressブログから静的サイトに記事を取得し、javascriptで表示する (REST API)
No Comment html,css,php,wordpressjavascript,REST API,Vanilla JS,wordpress静的サイト(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); }) } });