アトリエロワ

EC-CUBE4にwpの投稿を表示

<script>
$(function(){
     
    $.ajax({
        type: 'GET',
        // WP REST APIのURL
        url: 'https://auter.jp/blog/wp-json/wp/v2/posts?_embed',
        dataType: 'json'

    }).done(function(json){
        var html = '';
        //記事の件数分イテレートする
        $.each(json, function( i, row ) {
            //ブログタイトル
            var title = row.title.rendered;
            //ブログURL
            var link = row.link;
            //ブログ本文
            var excerpt = row.excerpt.rendered;
            // ブログの投稿日
            var date = new Date(row.date);
            var yy = date.getFullYear(date);
            var mm = date.getMonth() + 1;
            var dd = date.getDate();
            //サムネイル画像のURL
            var thumbnail
            if( row['_embedded']['wp:featuredmedia'] ) {
                thumbnail = row['_embedded']['wp:featuredmedia'][0]['media_details']['sizes']['full']['source_url']
            }
            // 出力するHTML
            html += '<div class="rsswrapper"><a href="' + link + '" class="blog-post__thumb">';
            html += '<img src="' + thumbnail + '" alt="' + title + '">';
            html += '<h3>' + title + '</h3>';
            html += '<p>' + excerpt + '</p>';
            html += '</a></div>';

            if( i == 2 ) return false; //3記事表示

        });
        //整形した記事の情報をページに追加する
        $('#feed').append(html)
    }).fail(function(json){
        console.error('WordPressのブログ記事取得に失敗しました。')
    });
});
</script>
<div id="feed"></div>

HOME > EC-CUBE4 > EC-CUBE4にwpの投稿を表示