サーバーにアップしないと表示されないから。ローカルではみれない。
ネットワールドにカスタマイズしてもらった。D/webコンテンツツール/RSS蟹谷さん制作
表示されないときはjsの位置や、順番が関係してるかも。
<script src=”js/jquery-1.11.3.min.js”></script>
<script src=”rss.js”></script>
ｊｓは jquery-1.11.3.min.js にした方がいいっぽい。
ほぼコピペでOK！PHPとjQueryを使って外部サイトのRSSフィードを取得・表示する方法
work/RSS-TEST/
http://cm-creation.net/yoshida/RSS-TEST/
●レギュラー契約切れた岩瀬工務店にもfeedwindから切り替えてこちらの方法で実装中。花の湯館も変更した。
※wordpressはグリニッジ時間でfeedしてるけど、このjQueryはタイムゾーンも補正して表示させてくれてるかは不明なのでまさはしFP、藤田運送はfeedwindをそのまま使用したほうが無難。投稿日付を気にしすぎるユーザーに対してはそのほうが無難かも。wp-settings.phpの日付をタイムゾーン修正することもできるが、wordpressのアップデートで上書きされてこの記述が消えてしまうからwordpress側での設定は文字通り不可能かとおもう。
※UTF-8のソースで作っているプログラムだから、jift_jis のhtmlに設置すると文字化けする！！ スターダストヨット。
htmlへ rss.jsを関連付け。表示はrss.jsで設置してある要素をidで指定。
rss.phpでfeedのURLを定義づける。
※wordpressの仕様上でシングル、ダブルクォーテーションの記述箇所が全角で入力なっちゃうのでソースのコピペ後は半角英数のシングル、ダブルクォーテーションに直すこと！
●index.html
<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title>無題ドキュメント</title>
<script src=”js/jquery-1.3.2.min.js“></script>
<script src=”rss.js“></script>
</head>
<body>
<div id=”rss“></div>
</body>
</html>
※head内のjsの記載場所気を付けないとバッティングして作動しない。表示されないときは挿入箇所疑ってみること。
※#rssの高さは外要素の高さと同じ高さにcss側で記述する。トピックのulがマージンとパッディングあるので、これも調整する
#rss {
height: 280px;
width: 100%;
text-align: left;
background-image: url(../image/top/feedwind-bg.png);
}
#rss ul,#rss menu,#rss dir {margin: 10px;
padding: 10px;}
#rss li {padding-top:10px;}
●rss.js
$(function() {
$.ajax({
url: ‘rss.php‘,
xmlType: ‘xml’,
success: function(xml) {
var row = 0;
var data = [];
var nodeName;
var output = $(‘#rss‘);
$(xml).find(‘item’).each(function() {
data[row] = {};
$(this).children().each(function() {
nodeName = $(this)[0].nodeName;
data[row][nodeName] = {};
attributes = $(this)[0].attributes;
for (var i in attributes) {
data[row][nodeName][attributes[i].name] = attributes[i].value;
}
data[row][nodeName][‘text’] = $(this).text();
});
row++;
});
output.wrapInner(‘<ul></ul>’);
for (i in data) {
var date = new Date(data[i].pubDate.text);
var strdate = date.getFullYear() + ‘年’ + (date.getMonth() + 1) + ‘月’ + date.getDate() + ‘日’;
//↓日付後バージョン styleで成形
output.find(‘ul’).append(‘<li style=”list-style:none; padding-left:0px; margin-left:0px; ” >‘ + ‘<a href=” ‘ + data[i].link.text + ‘ ” style=”text-decoration: none; color:#2e7ec8; font-size:100%;”>‘ + data[i].title.text + ‘</a>‘ + ‘<br style=”line-height: 100%;”>‘ + ‘<span class=”rss-date” style=”font-size:75%;”>‘ + strdate + ‘</span>‘ + ‘</li>‘);
//console.log (data[i]);
}
}
});
});
※htmlに関係してある箇所は ”（’ひとつづつ。すなわちシングルクウォーテーション2つ。） で囲み、 + で接続する。
●rss.php
<?php
$url = “http://cm-creation.net/yoshida/localwork/?feed=rss2“;
$xml = file_get_contents($url);
header(“Content-type: application/xml; charset=UTF-8”);
print $xml;
?>
wordpressでは機能しない？たぶんrss.jsの4行目のurl個所がネックになってる？
feedが表示されない。テーマ階層にrss.jsやrss.phpをおいてもfeedが表示されない。
