元々静的サイトを構築しており、その後にWordpressでブログを構築、
というサイトはけっこうあると思うのですけども
全部をWordpressでCMS化というではなくて、
ブログのRSSフィードを新着情報として静的サイトのトップに表示したい、という依頼は
とてもよくある話だったりします。
もちろんこれが外部無料ブログという場合もよくある話。

もし静的サイトの方にJQueryをリンクしてあるならば
プラグインであるこのzRSSFeedを使えば簡単にそれを実現できます。

[browsershot url=”http://www.zazar.net/developers/jquery/zrssfeed/” width=”530″]

http://www.zazar.net/developers/jquery/zrssfeed/

まずはダウンロードして解凍。
その後にhead部分にjQueryのパスとこのスクリプトのパスを追加します。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="jquery.zrssfeed.min.js" type="text/javascript"></script>

この場合のJQueryのパスはGoogleライブラリAPIへのパスとなっています。
昔は「えー、外部サイトにリンクなんてもし何かあったらどうすんのよ」と
思ってましたけども、よく考えて・・いや考えなくても
自分の借りてるサーバとGoogleがどっちが強靱なのかは一目瞭然って事で
最近はGoogleセンセイのサービスを存分に使ってます(笑)

あとはRSSフィードを表示させたい部分のDivタグにIDを設定

<div id="test"></div>

そして以下をHTMLに追加します。

<script type="text/javascript">
$(document).ready(function () {
$('#test').rssfeed('http://hanamoge.com/rss/', {
limit: 5,
header:false
});
});
</script>

RSSフィードのURL、そして先ほど設定したIDを自分の環境に置き換えます。
limitとheaderはこのプラグインに設定されているオプションで
この場合は5件のRSSフィードを表示させ、ブログ名とリンクを表示させない設定です。
さまざまなオプション、そして初期設定は先ほどのダウンロードページに
全部掲載されてますので参考までに

あとは表示されたフィード部分をCSSで調整すればOKです。
アイキャッチなどに設定されたRSSに含まれる画像を表示させる方法は
いま探ってますので、解決すればこのエントリーに追加予定。