社会復帰を目指して、前向きに歩いていきたい。Kakaのサイトです。

カカのホームページ(WordPress Ver.)

*

マルチ対応更新情報の表示

Category:Memorandum WordPress

最近はネットをググるとWeb作成のいろんなテクニックがあって、とても助かります。
このサイトにも使っている、更新情報の表示をするパーツを作ってみました。 ソースはこんな感じ。

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
// JavaScript Document

google.load("feeds", "1");
//<![CDATA[
var getRssFeeds = function (_id, _urls, _maxLength) {
	if(!_id || !_urls || (!(_urls instanceof Array)))	return;
	var entryNum = 5;//各RSSの読み込みエントリー数
	var maxLength = (_maxLength)? 	_maxLength : 0 ;
	//総エントリー表示数(0はすべて表示)
	//変数定義
	var entriesArray = new Array();
	var complete = 0;

	//初期化
	var init = function () {
		for(var i=0 ; i < _urls.length ; i++){
			//RSS読み込み
			var feed = new google.feeds.Feed(_urls[i]);
			feed.setNumEntries(entryNum);
			feed.load(function(result) {
				if (!result.error) {
					for (var i = 0; i < result.feed.entries.length; i++) {
						var entry = result.feed.entries[i];
						entriesArray.push(entry);
						var pdate = new Date(entry.publishedDate);
						var arr = entriesArray[(entriesArray.length-1)];
						arr.sortDate = pdate.getTime();
						arr.siteTitle = result.feed.title;
					}
				}
				complete++;
				if(_urls.length == complete)	echo();
			});
		}
	};
	//表示
	var echo = function () {
		entriesArray.sort (function (b1, b2) { return b1.sortDate < b2.sortDate ? 1 : -1; } );//降順ソート
		//this.entriesArray.sort (function (b1, b2) { return b1.sortDate > b2.sortDate ? 1 : -1; } );//昇順ソート
		var feedLength = (_maxLength)? _maxLength : entriesArray.length;

		var pastDay = 5;//newマークをつける日数
		var now = (new Date()).getTime();
		var pastTime = pastDay * 24 * 60 * 60 * 1000;

		var container = document.getElementById(_id);
		var html="";
		for (var i = 0; i < feedLength; i++) {
			var entry = entriesArray[i];
			var pdate = new Date(entry.publishedDate);
			var y = pdate.getFullYear();
			var mo = pdate.getMonth() + 1;
			mo = (mo < 10)? "0" + mo:mo;//月数字を2桁に
			var d = pdate.getDate();
			d = (d < 10)? "0" + d:d;//日数字を2桁に
			var h = pdate.getHours();
			h = (h < 10)? "0" + h:h;//時数字を2桁に
			var mi = pdate.getMinutes();
			mi = (mi < 10)? "0" + mi:mi;//分数字を2桁に

			var date = y + "年" + mo + "月" + d + "日" + h + "時" + mi + "分";

			html += '<p><a href="' + entry.link + '" target="_blank">' + entry.title + '</a>(' + entry.siteTitle + ')' + date + " ";

			if(now >= entry.sortDate && now <= (entry.sortDate + pastTime)){
				html += '<span class="new">new!</span>';
			}

			html += '</p>';
		}
		container.innerHTML += html;
	};

	google.setOnLoadCallback(init);
};

getRssFeeds("feeds", [
	"http://feedblog.ameba.jp/rss/ameblo/tenhou-chiihou-kaka/rss20.xml",
        "http://gdata.youtube.com/feeds/base/users/tenhouchiihoukaka/uploads?alt=rss&v=2&orderby=published&client=ytapi-youtube-profile",
        "http://u.tabelog.com/rss/rst_rvwr_rvwlst?msu=tenhougogo55",
        "https://search.twitter.com/search.atom?q=from:Tenhou_GoGo_55"
]);

//]]></script>

<style type="text/css">
<!--
#feeds {
width: 160px;
height: 300px;
background-color: #c7d36d;
margin-top 10px;
padding: 3px 10px;
overflow: scroll;
line-height: 1.5em;
}

#feeds p {
font-size: 10px !important;
}

#feeds p a {
text-decoration: underline;
font-weight: bold;
}

#feeds p a:hover {
}

#feeds p span.new {
font-weight: bold;
color: #F00;
}
-->
</style>

<div id="feeds"></div>

僕が気に入っているのは、複数のRSSを管理できること。

普通にWordPressに取り込むと動作しないですが、今はWordPressのデフォルトのウィジェットの「テキスト」にそのまま記入して使用しています。

今後はWordPressに取り込んで、ウィジェットやプラグインに出来るようにしてみたいと思います。

参考サイト①:Google Feed APIを使って複数RSSフィードを表示する【カスタマイズ版】

参考サイト②:複数のRSSフィードをまとめて昇降順に表示する方法。ファビコンもつけますよ。

«   »

※コメントの承認には時間がかかる場合があります。

コメントを残す

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <img localsrc="" alt="">

Trackback URL:http://kaka-tenhou.boy.jp/20121108/2344/trackback

Comment FEED