JS で WordPress の 投稿を表示させる
固定表示と分ける
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| jQuery( function( $ ) { | |
| $( document ).ready( function() { | |
| var target = '#newsList'; | |
| var sticky_url = './wp-json/wp/v2/posts/?filter[posts_per_page]=3&sticky=true&_embed'; | |
| var post_url = './wp-json/wp/v2/posts/?filter[posts_per_page]=3&sticky=false&_embed'; | |
| var media_noimage = './resources/images/base/noimage.jpg'; | |
| var media_id; | |
| var media_url; | |
| var post_count = 0; | |
| var post_max_count = 3; | |
| // 同期処理にする | |
| $.ajaxSetup({ async: false }); | |
| $.getJSON( sticky_url, function( posts ) { | |
| $.each( posts, function( key, val ) { | |
| if( post_count >= post_max_count ) { | |
| return false; | |
| } | |
| media_id = 0; | |
| media_url = ''; | |
| media_id = val.featured_media; | |
| $( val._embedded['wp:featuredmedia'] ).each( function( index, element ) { | |
| if( element.id != media_id ) return true; | |
| media_url = element.source_url; | |
| return false; | |
| } ); | |
| if( media_url == '' ) { | |
| media_url = media_noimage; | |
| } | |
| // 正規表現パターン によって 年月日を 切り出す | |
| // var post_date_array_1 = val.date.replace( /^([0-9]{4}-[0-9]{2}-[0-9]{2}).*$/, "$1" ); | |
| // var post_date_array_2 = val.date.replace( /^(.*)T.*$/, "$1" ); | |
| // console.log( post_date_array_1 ); | |
| // console.log( post_date_array_2 ); | |
| // timezone が 環境依存のため date か date_gmt を 使い分ける | |
| var post_date = new Date( val.date_gmt ); | |
| // そのまま表示 | |
| // post_date.getFullYear() + '-' + ( post_date.getMonth()+1 ) + '-' + post_date.getDate() | |
| // 月 日 を 2桁 表示 | |
| // post_date.getFullYear() + '-' + ( '0' + ( post_date.getMonth()+1 ) ).slice( -2 ) + '-' + ( '0' + post_date.getDate() ).slice( -2 ) | |
| $( target ).append( | |
| ' <li>' + | |
| ' <a href="' + val.link + '">' + | |
| ' <figure><img src="' + media_url + '" alt="image"></figure>' + | |
| ' <time datetime="' + post_date.getFullYear() + '-' + ( post_date.getMonth()+1 ) + '-' + post_date.getDate() + '">' + post_date.getFullYear() + '年' + ( post_date.getMonth()+1 ) + '月' + post_date.getDate() + '日</time>' + | |
| ' <p>' + val.title.rendered + '</p>' + | |
| ' </a>' + | |
| ' </li>' | |
| ); | |
| post_count++; | |
| } ); | |
| } ); | |
| $.getJSON( post_url, function( posts ) { | |
| $.each( posts, function( key, val ) { | |
| if( post_count >= post_max_count ) { | |
| return false; | |
| } | |
| media_id = 0; | |
| media_url = ''; | |
| media_id = val.featured_media; | |
| $( val._embedded['wp:featuredmedia'] ).each( function( index, element ) { | |
| if( element.id != media_id ) return true; | |
| media_url = element.source_url; | |
| return false; | |
| } ); | |
| if( media_url == '' ) { | |
| media_url = media_noimage; | |
| } | |
| // 正規表現パターン によって 年月日を 切り出す | |
| // var post_date_array_1 = val.date.replace( /^([0-9]{4}-[0-9]{2}-[0-9]{2}).*$/, "$1" ); | |
| // var post_date_array_2 = val.date.replace( /^(.*)T.*$/, "$1" ); | |
| // console.log( post_date_array_1 ); | |
| // console.log( post_date_array_2 ); | |
| // timezone が 環境依存のため date か date_gmt を 使い分ける | |
| var post_date = new Date( val.date_gmt ); | |
| // そのまま表示 | |
| // post_date.getFullYear() + '-' + ( post_date.getMonth()+1 ) + '-' + post_date.getDate() | |
| // 月 日 を 2桁 表示 | |
| // post_date.getFullYear() + '-' + ( '0' + ( post_date.getMonth()+1 ) ).slice( -2 ) + '-' + ( '0' + post_date.getDate() ).slice( -2 ) | |
| $( target ).append( | |
| ' <li>' + | |
| ' <a href="' + val.link + '">' + | |
| ' <figure><img src="' + media_url + '" alt="image"></figure>' + | |
| ' <time datetime="' + post_date.getFullYear() + '-' + ( post_date.getMonth()+1 ) + '-' + post_date.getDate() + '">' + post_date.getFullYear() + '年' + ( post_date.getMonth()+1 ) + '月' + post_date.getDate() + '日</time>' + | |
| ' <p>' + val.title.rendered + '</p>' + | |
| ' </a>' + | |
| ' </li>' | |
| ); | |
| post_count++; | |
| } ); | |
| } ); | |
| } ); | |
| } ); |