Не работаю с worpdress на постоянной основе. Возможно есть более грамотное решение.
Можно получать то, что вам нужно через JSON который отдаёт сайт на wordpress.
Что нужно сделать?
1. Отправить запрос сайту на получение данных о последних постах.
2. «Вытянуть» из пришедшего ответа что нам нужно(заголовок, ссылку, рубрику, миниатюру).
3. Вывести на страницу.
Code
Запрос на 3 последних поста. «Вытягиваем» из ответа заголовки и вставляем на страницу
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="get-title"></div>
<div class="get-title"></div>
<div class="get-title"></div>
</body>
<script>
var titleFirstPost = document.querySelectorAll('.get-title')[0];
var titleSecondPost = document.querySelectorAll('.get-title')[1];
var titleThirdPost = document.querySelectorAll('.get-title')[2];
var ourRequest = new XMLHttpRequest();
ourRequest.open('GET', 'http://wundermag.thememeister.com/wp-json/wp/v2/posts?per_page=3&_embed');
// wundermag.thememeister.com - ссылка на ваш сайт
ourRequest.onload = function () {
if (ourRequest.status >= 200 && ourRequest.status < 400) {
var data = JSON.parse(ourRequest.responseText);
console.log(data);
createHTML(data);
} else {
console.log("We connected to the server, but it returned an error.");
}
};
ourRequest.onerror = function () {
console.log("Connection error");
};
ourRequest.send();
function createHTML(HTMLdata) {
titleFirstPost.innerHTML = HTMLdata[0].title.rendered;
titleSecondPost.innerHTML = HTMLdata[1].title.rendered;
titleThirdPost.innerHTML = HTMLdata[2].title.rendered;
}
</script>
</html>
