この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に貼り付けてやりました。
そしたら、なんとも美しく出力されているじゃないですか!素敵。
めでたしめでたし。
というわけで、私はなんにも知らないというお話でした。