WordPressに、Google AJAX Feed APIで画像を出す。

普通のＨＴＭＬファイルに、下記の「Google AJAX Feed API」を使ってJavaScriptを仕込み、他のブログから画像を出すことはできるんですが・・・

・画像を出す場合は、Google AJAX Feed APIのJASONフォーマットのcontent内に画像があればいいんですが、そうでない場合はXMLフォーマットで取ってきて、画像タグを取得し表示させる必要があります。

<script type="text/javascript" src="http://www.google.com/jsapi?key=YOUR-API-KEY"></script>
<script type="text/javascript">

google.load("feeds", "1");

function initialize() {
var feed = new google.feeds.Feed("RSS URL");
feed.setResultFormat(google.feeds.Feed.XML_FORMAT);
feed.setNumEntries(20);

feed.load(function(result) {
if (!result.error) {
      var container = document.getElementById("rssfeed");

      var items = result.xmlDocument.getElementsByTagName("item");

      htmlstr = "<ul>";
      for (var i = 0; i < items.length; i++) {

            // XMLフィールド取得
            var titleElement = items[i].getElementsByTagName("title")[0];
            var title = titleElement.firstChild.nodeValue;
            if (title.indexOf("PR:") == 0) {
                  continue;
            }
            var linkElement = items[i].getElementsByTagName("link")[0];
            var link = linkElement.firstChild.nodeValue;

            var dateElement = items[i].getElementsByTagName("dc:date")[0];
            var date = dateElement.firstChild.nodeValue;

            var enclosureElement = items[i].getElementsByTagName("enclosure")[0];
            var enclosure = enclosureElement.attributes.getNamedItem("url").value;

            var descriptionElement = items[i].getElementsByTagName("description")[0];
            var description = descriptionElement.firstChild.nodeValue;

            //html組み立て

            //見出し
            htmlstr += "<li>";
            htmlstr += "<div class='blog-date'>" + date + "</div>";
            htmlstr += "<div class='blog-title'><a href='" + link + "'>" + title + "</a></div>";
            htmlstr += "<div class='blog-clear'></div>";
            htmlstr += "</li>";

            //写真
            if (enclosure) {
                   htmlstr += "<div class='blog-img'>";
                   htmlstr += "<img alt='img-" + i + "' src='" + enclosure + "'></img>";
                   htmlstr += "</div>";
            }

            //本文
            htmlstr += "<div class='blog-content'><p>" + description + "</p></div>";
            if (enclosure) {
                  htmlstr += "<div class='blog-clear'></div>";
            }
      }
      htmlstr += "</ul>";

      //追加
      container.innerHTML = htmlstr;
}
});
}
google.setOnLoadCallback(initialize);

</script>

しかし！、上記で使ったのとほぼ同じJavaScriptを使っているのに、WordPress内で実行すると画像だけが出たり、出なかったりします・・・？　（出ない場合が多いですが）

一旦、普通のＨＴＭＬファイルで表示させてから、ＷｏｒｄＰｒｅｓｓを表示すると画像が出る場合が多いので、キャッシュがらみの問題か？と思ってはいるのですが・・・。

※一難去って、また一難。WordPress嫌いになりそう・・。
※誰か、解決案のある方、コメントをどうぞ。

————————————————————————————————–

自分で回答するのもなんですが、なんとなく原因がわかりました。
上記のfeed.loadの関数部分は別ファイルにしていたのですが、それをgoogle.setOnLoadCallback(initialize); より前に定義すると直りました・・・・。（ガーン・・・）

.

<script type="text/javascript" <script type="text/javascript"
           src="<?php bloginfo('template_url');?>/css/default.js"></script>
<script type="text/javascript">
google.load("feeds", "1");
function initialize() {
 var feed = new google.feeds.Feed("RSS Feed");
 feed.setResultFormat(google.feeds.Feed.XML_FORMAT);
 feed.setNumEntries(5);
 feed.load(dispfeedXML);
}
google.setOnLoadCallback(initialize);
</script>