WP案件で初めてREST APIを使ってみたので、記事のmoreボタンを実装してみました。
moreボタンのソースは、こちらのサイトを参考に組み合わせてみました。
ソースは整理していません。。（実装することに集中していたため。。。あとで整理する予定）
たぶん、またこういったのを使って実装することがあると思うのでメモとして残しておきます。
WP REST APIドキュメントはこちら
HTML トップページ
<div class="clearfix" id="content">
</div>
HTML カテゴリ用ページ
<?php
$category = get_the_category();
$cat_id = $category[0]->cat_ID;
$cat_name = $category[0]->cat_name;
$cat_slug = $category[0]->category_nicename;
?>
<div class="clearfix" id="page_content" data-name="<?php echo $cat_slug; ?>">
</div>
JS
$(function(){
function cutTextEvent(){
var $title = $('.p-blogListBox__title');
var cutFigure = '25';
var afterTxt = ' …';
$title.each(function(){
var textLength = $(this).text().length;
var textTrim = $(this).text().substr(0,(cutFigure));
if(cutFigure < textLength) {
$(this).html(textTrim + afterTxt).css({visibility:'visible'});
} else if(cutFigure >= textLength) {
$(this).css({visibility:'visible'});
}
});
}
var setArea = $("#content"),
setArea_page = $("#page_content"),
loadNum = 4, // 読み込む個数
loadTxt = 'Now Loading...', // Loading中の表示テキスト
btnTxt = 'もっと見る', // ボタンテキスト
fadeSpeed = 500; // フェードスピード
setArea.after('<div id="btnMore" class="p-blog__btn clearfix" style="overflow: hidden; clear: both"><a herf="#">' + btnTxt + '</a></div>');
var setMore = setArea.next('#btnMore');
setArea_page.after('<div id="btnMore" class="p-blog__btn clearfix" style="overflow: hidden; clear: both"><a herf="#">' + btnTxt + '</a></div>');
var setMore_top = setArea_page.next('#btnMore');
var page_name = $('#content').data('name');
var category_urls = '/wp-json/posts?filter[orderby]=&filter[category_name]=' + page_name;
var post_url = '/wp-json/posts';
function ajax_list(urls,area){
$.ajax({
url: urls,
dataType: 'json',
success : function(data){
var dataLengh = data.length,
loadItemLength = area.find('.loadItem').length,
setAdj = (dataLengh)-(loadItemLength),
setBeg = (dataLengh)-(setAdj);
function blogList(number){
var title = data[number].title;
var link = data[number].link;
var category = '';
for (var j = data[number].terms.category.length - 1; j >= 0; j--) {
category += data[number].terms.category[j].name;
}
var pubDD = new Date(data[i].date);
yy = pubDD.getYear();if (yy < 2000) { yy += 1900; }
mm = pubDD.getMonth() + 1;dd = pubDD.getDate();
var pubDate = yy +'年'+ mm +'月'+ dd +'日';
var html = '<div class="p-blogListBox loadItem"><a href="' + link + '">'+ '<p class="p-blogListBox__category">' + category +'</p>' + '<p class="is-read__txt c-fade"><span>続きを見る</span></p><h2 class="p-blogListBox__title">' + title +'</h2><p class="p-blogListBox__date">'+ pubDate + '</p></a></div>';
$(html).appendTo(area).css({opacity:'0'}).animate({opacity:'1'},fadeSpeed);
cutTextEvent();
}
if(!(dataLengh == loadItemLength)){
area.append('<div id="nowLoading">' + loadTxt + '</div>');
if(loadItemLength == 0){
if(dataLengh <= loadNum){
for (var i=0; i<dataLengh; i++) {
blogList(i);
}
setMore.remove();
setMore_top.remove();
} else {
for (var i=0; i<loadNum; i++) {
blogList(i);
}
}
} else if(loadItemLength > 0 && loadItemLength < dataLengh){
if(loadNum < setAdj){
for (var i=0; i<loadNum; i++) {
v = i+setBeg;
blogList(v);
}
} else if(loadNum >= setAdj){
for (var i=0; i<setAdj; i++) {
v = i+setBeg;
blogList(v);
}
setMore.remove();
setMore_top.remove();
}
} else if(loadItemLength == dataLengh){
return false;
}
} else {
return false;
}
}, //success
complete : function(){
$('#nowLoading').each(function(){
$(this).remove();
});
return false;
} //complete
});
return false;
}
setMore.click(function(){
ajax_list(category_urls,setArea);
}).click();
setMore_top.click(function(){
ajax_list(post_url,setArea_page);
}).click();
cutTextEvent();
});