ご無沙汰です。
暑かった夏もようやく終わってくれたようで、ここ数日はクーラーをつけづに仕事をしています。
先週から仕事仲間と一緒にサイト制作&一部WordPressの組み込み+携帯サイトの導入作業をしています。
今日は『サイトトップページにWPの記事一覧を表示する』の一つの方法メモ。
★今回は「Aカテゴリー」「Bカテゴリー」の記事をそれぞれ独立して構築したかったのでWPは2つ設置。
Ver3.0からMTのようなマルチブログ化も可能になりましたが、
今回は『Aカテゴリー』だけの検索フォームが必須項目だったので、ちょっとアナログな方法で
こうちくすることに・・・しました!
逆に『Bカテゴリー』のみすべての記事をWebサイトのトップページに表示したかったので、
今回は「RSSを表示させる」方法をとることにしました。
仕掛けは「Google Ajax Feed API」を利用すること。
今回はこちらで紹介している方法を参考にさせてもらいました。
jQueryでRSSを取得しリストで表示
<HTML>
//head内にjQueryを<script type="text/Javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> //body内にリスト表示させる場所を作ってあげる<div id="list-01"><!-- ここにフィードの内容が表示される --></div>
<JavaScript>
$(function(){
//RSSが同じドメインにある場合
$.ajax({
//同じドメインにあるXMLファイルのある場所を指定してあげる
url: 'rss.xml',
//非同期通信
async: true,
//通信結果をキャッシュしない
cache: false,
dataType: "xml",
success: function(xml){
$(xml).find('item').each(function(i){
if (i == 10) {
return false;
}
var title = $(this).find('title').text();
var url = $(this).find('link').text();
var date = $(this).find('pubDate').text();
//月表示を数字表示に変換する
date = dateChanger(date);
//idがlist-01の箇所にリストで書き出す
$('#list-01').append('<li>' + date + '<a href="' + url + '">' + title + '</a></li>');
});
//idがlist-01にあるliをolで括る
$('#list-01 li').wrapAll('<ol></ol>');
},
//エラー表示
error: function(xml){
$('#list-01').append('<p>Feedの読み込みに失敗しちゃいました。</p>');
}
});
//月表示を数字表示に変換する
var dateChanger = function(str){
var mydate = new Date(str);
yy = mydate.getFullYear();
mm = mydate.getMonth() + 1;
dd = mydate.getDate();
if (mm < 10) { mm = "0" + mm; }
if (dd < 10) { dd = "0" + dd; }
datestr = yy + "年" + mm + "月" + dd + "日";
return datestr;
};
});
これを実際にトップページで読み込ませて設置。
今回は日付の表示はいらないので(タイトルだけでOK)
日付に関する表示はCUTしました。
今回は『同じドメイン内にRSSが設置されていることが前提』の方法です。
違うドメインからのRSSを引っ張ってくるやり方はまた別で。