トップページ » Program Js・jQuery » 同じドメインのWordPressのFeedを最初の画像入りで読み込む
同じドメインのWordPressのFeedを最初の画像入りで読み込む
2017/01/26
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の記入が必要です。
また、引数をもう2つ用意しています。
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内の記述の名前を自分で合わせる必要があります(中級者向け)
・自由に使用してもらって構わないですが、このプログラムの不具合や、このプログラムの使用による損害に対し、一切責任を負いません。
似た内容のおすすめ記事