同じドメインのWordPressのFeedを最初の画像入りで読み込む

Google　APIが本格的に終了したようでAPIが一時休止した時書いたメモ「Google feed API が廃止か終了で焦った」のアクセスが上がってました。

なので、昔書いたコード貼ることにしました。
最近はあまりwebはやっていないので、今の支流の書き方でないかもしれませんが、誰かの参考になればと。

サンプルページ

このブログのfeedを読み込んでいるページです。
スタイルシート等は振っていないかなり素の状態です。
DEMOページ

解説

jQuery本体を読み込む

jQueryベースですので、まずはjQueryを読み込みます。

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

html側

実際に表示されるスペースです。
idの名前をつけましょう。

<div id="blogtxt"></div>

読み込みの実行

読み込みを実行させるjQueryの記述です。

<script>
$(function(){
  feedBlog( yourFeedUrl , "#blogtxt");
});
</script>

最低限urlと、上記「html側」で書いたhtmlに表示する場所のIdの記入が必要です。

また、引数をもう２つ用意しています。

feedBlog( yourFeedUrl , id , num , txt );

numが読み込む記事数。引数を書かないと5。
txtが抜粋の文字数。引数を書かないと180。

numだけ書くことも、どちらも書かなくても動きますが、txtだけ書くのは出来ないです。

jsの本体

外部ページにするか、ページの下のほうにでも記述してください。
contents += と書かれたあたりが表示するhtmlを作っているので、アレンジする場合この辺を変えればいいと思います。

function feedBlog( url , id , num , txt ) {

	var pubDate,Dates,Dday,Dmonth,Dyear,dates;
	var title,postUrl,dates,description,firstImg;

    ( num == null )?num=5:num=num;
    ( txt == null )?txt=180:txt=txt;

	$.ajax({
		url: url, 
		dataType: 'xml',
		success: function( xml ) {

			var contents = '';
			var i = 0;
			$(xml).find("item").each(function( index ){

				i++;
				$this = $(this);

				title = $this.find("title").text();
				postUrl = $this.find("link").text();
				pubDate = $this.find("pubDate").text();
				description = $this.find("description").text();
				description = description.replace(/<("[^"]*"|'[^']*'|[^'">])*>/g,'')
				firstImg = $this.find("content\\:encoded, encoded").text();
				firstImg = $(firstImg).find("img").first().attr("src");

				Dates = new Date( pubDate );
				Dday = Dates.getDate();
				Dmonth = Dates.getMonth()+1;
				Dyear = Dates.getFullYear();

				contents += '<div>'
				contents += '<h1><a href="' + postUrl + '">' + title + '</a></h1>';
				contents += '<p>'+Dyear+'/'+Dmonth+'/'+Dday+'</p>';
				contents += '<p><a href="' + postUrl + '"><img src="' + firstImg + '" /></a></p>';
				contents += '<p><a href="' + postUrl + '">' + strLengthCheck ( description , txt )  + '</a></p>';
				contents += '<p><a href="' + postUrl + '">' + '続きはこちら</a></p>';
				contents += '</div>'

				if( i == num ) return false; //記事数で終了
			});
			$(id).append( contents );
		},
		error: function() {
		  console.log('error');
		}
	});
};

function strLengthCheck( txt , number ){

  if ( txt == null ){
    return txt = "";
  }
  else if ( txt.length > number ) {
    return txt.substr( 0, number ) + "...";
  }
  else{
    return txt;
  }
}

諸注意

・コードを置いた、同じドメイン以下のfeedしか読み込めません。
・Wordpressのxmlを読み込むことに前提としたプログラムです。
他のRSS、xml等も読み込めますが、xml内の記述の名前を自分で合わせる必要があります（中級者向け）
・自由に使用してもらって構わないですが、このプログラムの不具合や、このプログラムの使用による損害に対し、一切責任を負いません。