【タブメニュー】WP REST APIで他サイトの投稿記事データをJSON形式で取得

WordPressに標準搭載されているWP REST APIで他サイトの投稿記事データをJSON形式で取得し、カテゴリーごとに最新5件のコンテンツをフェードインで表示します。

html、CSSのコードは下記の記事と同様になります。(一部クラス名を変更しています。)

jQueryのコードです。
投稿記事のデータはデフォルトで10件しか取得できないため、WP REST APIのエンドポイントに「?per_page=100」のパラメータを追加して100件取得しています。
また、単純にデータを取得しただけだとJSONのデータが膨大になってしまうので、グローバルパラメータの「_fields=categories,date,title,link」を指定します。これで表示に必要なカテゴリID、投稿日付、タイトル、リンク先のデータのみが取得できます。

$(function() {
	$.ajax({
		url: 'https://blog.brick-plan.jp/wp-json/wp/v2/posts?per_page=100&_fields=categories,date,title,link',
		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 == 11) {
				insertContents += '<div class="news-content" data-category="';
				if(catNum == 2){
					insertContents += 'menu01">';
					catTxt = 'HTML・CSS';
				}else if(catNum == 5){
					insertContents += 'menu02">';
					catTxt = 'Git';
				}else if(catNum == 11){
					insertContents += 'menu03">';
					catTxt = 'jQuery';
				}
				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');
	});
});
タイトルとURLをコピーしました