静的サイトにRSSを使いjavascriptでwordpressの記事を表示する

静的サイトを運営していてRSSでjavascriptを使用し、Wordpressで投稿したタイトル、日付を取得するスクリプトです。

RSSはこちらで取得しました。

スポンサードリンク

HTMLの表示箇所にこちらを挿入します。

<ul id="feed">
</ul>

1 2	<ul id="feed"> </ul>

以下はjavascriptです。

<script>
//読み込み最大記事数
var max_length = 5;
$(function(){
$.getJSON("https://query.yahooapis.com/v1/public/yql?callback=?", {
q: "select * from rss where url='ここにフィードURLを入れる'",
format: "json"
}, function (json) {
for (var i = 0; i < json.query.results.item.length; i++) {
if (i == max_length) break;
var entry = json.query.results.item[i];
var fulldate = entry.pubDate; //投稿日
var title = entry.title;//記事タイトル
var link = entry.link; //記事へのリンク
//タイトルを挿入
var publishedDate = entry.pubDate;
var pubDD = new Date(publishedDate);
yy = pubDD.getYear();
if (yy < 2000) {
yy += 1900;
}
mm = pubDD.getMonth() + 1;
dd = pubDD.getDate();
var pubDate = yy + '年' + mm + '月' + dd + '日';
$('#feed').append("<li><a href='" + link + "'>" + "<span>" + pubDate + "</span>" + "<span>" + title + "<span></a></li>");
}
});
});
</script>

//読み込み最大記事数

var max_length = 5;

$(function(){

$.getJSON("https://query.yahooapis.com/v1/public/yql?callback=?", {

q: "select * from rss where url='ここにフィードURLを入れる'",

format: "json"

}, function (json) {

for (var i = 0; i < json.query.results.item.length; i++) {

if (i == max_length) break;

var entry = json.query.results.item[i];

var fulldate = entry.pubDate; //投稿日

var title = entry.title;//記事タイトル

var link = entry.link; //記事へのリンク

//タイトルを挿入

var publishedDate = entry.pubDate;

var pubDD = new Date(publishedDate);

yy = pubDD.getYear();

if (yy < 2000) {

yy += 1900;

}

mm = pubDD.getMonth() + 1;

dd = pubDD.getDate();

var pubDate = yy + '年' + mm + '月' + dd + '日';

$('#feed').append("<li><a href='" + link + "'>" + "<span>" + pubDate + "</span>" + "<span>" + title + "<span></a></li>");

}

});

</script>

参考記事

https://teratail.com/questions/67732