HTMLのページにブログの内容をRSS経由で表示させる

このSunonet GuruブログはWordpressで出来ているのですが、Sunonetのホームページは一枚のHTMLで出来ています。せっかくブログも始めたことなので、Sunonetのページにこのブログの内容を表示させることにしました。

WordPressは何もしなくてもRSSが設定されるので、それを利用しようと思います。でも表示させたいページはプレーンな静的HTMLなので、APIを使ってAjaxとかjQueryを使えば出来そうです。

といっても、考えるの面倒(=やり方分からない)なので、人様のコードをいただきました。

参考にしたサイト: RSSなどのxmlファイルを静的なHTMLに表示させる方法あれこれ

この方のサイト役に立つ例がいっぱいあります。前にInstagram APIを調べてる時にも参考にしました。子育てしながらっていうのがすごい…Mei Koutsukiさん素敵です。ありがとうございます!

で、基本的には同じです。(参考にしたというかコピペです)
Google APIを使うので、最初に読み込んで、データを取得してからは、抜粋の後にくっついてくる余計なものは削除(すごいかっこ悪いやりかただけど…)

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
var xmlUrl = "http://sunonet.com/guru/feed";    //.. feed url
var setNum = 3; 	//.. # of feed to take
var setID = "feed"; 
google.load("feeds", "1");
function initialize() {
    DD = new Date();HH = DD.getHours();MM = DD.getMinutes();SS = DD.getSeconds();
    xmlUrl = xmlUrl+"?"+HH+MM+SS;   
    var feed = new google.feeds.Feed(xmlUrl);
    feed.setNumEntries(setNum);
    feed.setResultFormat(google.feeds.Feed.XML_FORMAT);
    feed.load(function(result) {
        if (!result.error){
            var container = document.getElementById(setID);
            var xmlDoc = result.xmlDocument;
            var items = xmlDoc.getElementsByTagName("item");
            var html = '';
            html = '
<ul>';
            $(xmlDoc).find('item').each(function(){
                title = $(this).find('title').text(); 		//.. title
                description = $(this).find('description')[0].firstChild.nodeValue;	//.. description
                link = $(this).find('link').text(); 		//.. link
                
                //.. format contents
                desc = description.substring(0 , description.indexOf("
<div class")); 
                
                //.. apply design to contents
                html += '
<li class="grid_4">';
                html += '
<h3><a href="' + link + '">' + title + '</a></h3>

';
                html += '
<div class="contents">' + desc + '
';
                html += '<a href="' + link + '">Read more</a>';
                html += '</div>
</li>

';

            });
            html += '</ul>

';
            $('#blogfeed').append( html );
        }
    });
}
google.setOnLoadCallback(initialize);
</script>	

やったー簡単に出来たぞ!と思ったのですが、画像が表示されないのです。
フィードのURLにアクセスしても画像らしき情報はない…むむ。

で、またぐぐったら、こんなの見つけました:RSSにアイキャッチ画像を含める

何も変更しないでそのままテンプレートフォルダのfunctions.phpに貼り付けてやりました。

そしたら、なんとも美しく出力されているじゃないですか!素敵。

show-wp-contents-to-html

めでたしめでたし。
というわけで、私はなんにも知らないというお話でした。