<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('情報取得に失敗しました。')
	  });
	});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.