WordPressに標準搭載されているWP REST APIから投稿記事データをJSON形式で取得し、カテゴリーごとに最新5件のコンテンツをフェードインで表示します。
- すべて
- アコーディオン
- タブメニュー
- フェーダー
html、CSSのコードは下記の記事と同様になります。（一部クラス名を変更しています。）
jQueryのコードです。
投稿記事のデータはデフォルトで10件しか取得できないため、WP REST APIのエンドポイントに「?per_page=100」のパラメータを追加して100件取得しています。
$(function() {
$.ajax({
url: 'https://tech.brick-plan.jp/wp-json/wp/v2/posts?per_page=100',
dataType: 'json',
cache: false,
}).done(function(data) {
var insertContents = '';
var len1 = data.length;
var catTxt = '';
var catNum = '';
for(var i = 0 ; i < len1 ; i++) {
catNum = data[i].categories;
if (catNum == 2 || catNum == 5 || catNum == 6) {
insertContents += '<div class="news-content" data-category="';
if(catNum == 2){
insertContents += 'menu01">';
catTxt = 'アコーディオン';
}else if(catNum == 5){
insertContents += 'menu02">';
catTxt = 'タブメニュー';
}else if(catNum == 6){
insertContents += 'menu03">';
catTxt = 'フェーダー';
}
if(data[i].categories == 7){
console.log('aaa');
}
insertContents += '<p class="news-date">';
dateTxt = data[i].date.replace(/-/g, '/');
pos = dateTxt.split('T');
insertContents += pos[0];
insertContents += '</p>';
insertContents += '<p class="tags">';
insertContents += catTxt;
insertContents += '</p>';
insertContents += '<p class="news-r">';
insertContents += '<a href="' + data[i].link + '" target="_blank">';
insertContents += data[i].title.rendered;
insertContents += '</a>';
insertContents += '</p>';
insertContents += '</div>';
}
}
var sortData = $('.news-date' , insertContents).sort(function(a,b) {
if($(a).text() < $(b).text()) return 1;
if($(a).text() > $(b).text()) return -1;
return 0;
});
var insertContentsSort = '';
$(sortData).each(function(){
insertContentsSort += $(this).parent().prop("outerHTML");
});
var newsLink = $(".news_link li");
var limit = 5;
for(var i = 0 ; i < limit ; i++) {
var limitNews = $(insertContentsSort)[i];
$(limitNews).appendTo('.news-content-all').hide().fadeIn();
}
$(newsLink).click(function(){
$(newsLink).removeClass("active");
$(this).addClass("active");
var btnFilter = $(this).attr('data-filter');
if (btnFilter == 'catAll') {
$(".news-content").remove();
for(i = 0 ; i < limit ; i++) {
limitNews = $(insertContentsSort)[i];
$(limitNews).appendTo('.news-content-all').hide().fadeIn();
}
} else {
$(".news-content").remove();
for(i = 0 ; i < limit ; i++) {
limitNews = $(insertContentsSort).filter('[data-category = "' + btnFilter + '"]')[i];
$(limitNews).appendTo('.news-content-all').hide().fadeIn();
}
}
});
}).fail(function(jqXHR, textStatus) {
var errorMessage = '';
errorMessage += '<p>データの読み込みに失敗しました。';
errorMessage += 'ステータスコード：' + jqXHR.status + '、';
errorMessage += 'ステータス：' + textStatus + '</p>';
$(errorMessage).appendTo('.news-content-all');
});
});