みなみさんが静的ページに WordPress の新着記事一覧を表示する方法を急募していた。
これを実現するために JavaScript で RSS フィードを取得して表示する方法を調べたので、自分用にメモ。
使用するのは Google AJAX Feed API。
Google AJAX Feed API を使用するには、APIキーが必要。
Google Map を利用する際に取得した API キーがあれば使えるが、無ければGoogle AJAX Feed API への登録をしておこう。
まずは、Google API のロード。
<head>内に以下の記述を追加して、Google API をロードしよう。
※ YOUR_KEY_HERE には取得しておいたGoogle AJX Feed API のキーをセットする。
<script type="text/javascript" src="http://www.google.com/jsapi?key=YOUR_KEY_HERE"></script>
次に実際にRSSフィードの内容を表示するための JavaScript。こんな感じ。
google.load("feeds", "1");
google.setOnLoadCallback(function() {
var feed = new google.feeds.Feed("http://example.com/feed");
feed.setNumEntries(5);
feed.load(function(result) {
if (!result.error) {
var ul = document.createElement("ul");
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
var li = document.createElement("li");
var a = document.createElement("a");
a.setAttribute("title", entry.title);
a.setAttribute("href", entry.link);
a.appendChild(document.createTextNode(entry.title));
li.appendChild(a);
ul.appendChild(li);
}
var container = document.getElementById("archives");
container.appendChild(ul);
}
});
});[/javascript]
３行目の http://example.com/feed は、読み込みたいRSSフィードのURL。
４行目の feed.setNumEntries(5); は、デフォルトでは4件しか取得しないため、5件取得するためには feed.setNumEntries() に数値をセットしましょう。
これで、id="archives" な要素の子要素として、RSSフィード一覧がセットされている <ul> 要素が追加表示されます。
こんにちはjava初心者です。
こちらの記事を参考にして、Wordpressの最新記事埋め込み、うまくできました！ ありがとうございます。
日付も入れたい場合はどうのようにすればよいのか教えていただきたいです。
よろしくお願いいたします。
wordpressのフォーラムの書き込みを見て来ました。
実際にやってみたのですが、上手くできませんでした。
mapsのキーを使いました。
とした場合、この中にRSSの 要素生成されるという理解で宜しいのでしょうか？
ピンバック: WordPress の特定キーワードの検索結果をリスト表示する | dogmap.jp
ピンバック: トップページにお知らせを表示した : スタジオくまかけ
ピンバック: EC-CUBEにWordPressの新着を表示させる
ピンバック: hiromasa.another :o)