<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css"/>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>
<section class="main-contents">
<div class="contents-inner" id="rssfeed">
<h2>RSS</h2>
横にスライドで確認→
</div>
</section>
.eyecatch .list-img {
width:100px;
margin:10px
}
.feed-item {
width :50%
}
img.list-img{
width:30%
}
// wordpress記事表示
$(document).ready( function(){
$.ajax({
type: 'GET',
url: 'https://lusknote.com/wp-json/wp/v2/posts?_embed',
dataType: 'json'
}).done(function(json){
var html = '';
html += '<ul class="feed-items slider">';
//記事の件数分イテレートする
$.each(json, function( i, row ) {
var title = row.title.rendered;
var link = row.link;
var thumbnail
if( row['_embedded']['wp:featuredmedia'] ) {
thumbnail = row['_embedded']['wp:featuredmedia'][0]['source_url']
}
var create_date = row.date;
html += '<li class="list-item"><a href="' + link + '"><div class="">';
html += '<div class="eyecatch"><img class="list-img" src="' + thumbnail + '"></div>';
html += '<div class="feed-create-date">' + create_date.slice(0,10) + '</div>';
html += '<div class="feed-title">' + title + '</div>';
html += '</div></a></li>';
});
html += '</ul>';
//JSONから取得した記事情報をページに追加する
$('#rssfeed').append(html)
$('.slider').not('.slick-initialized').slick({
slidesToShow : 3,
dots : false,
arrows : false,
});
$('.slider').slick();
}).fail(function(json){
console.error('情報取得に失敗しました。')
});
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.