この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に貼り付けてやりました。

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

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