JQuery を使用して、自己ホスト型の WordPress アトム フィードを読み取って解析しています。WordPress によって生成される XML の例を次に示します。
<?xml version="1.0" encoding="UTF-8"?>
<feed
xmlns="http://www.w3.org/2005/Atom"
xmlns:thr="http://purl.org/syndication/thread/1.0"
xml:lang="en-US"
xml:base="http://example.com/wp/wp-atom.php"
>
<title type="text">Feed Title</title>
<subtitle type="text">Feed Subtitle</subtitle>
<updated>2013-04-19T21:33:48Z</updated>
<link rel="alternate" type="text/html" href="http://example.com/wp" />
<id>http://example.com/wp/index.php/feed/atom/</id>
<link rel="self" type="application/atom+xml" href="http://example.com/wp/index.php/feed?feed=atom&cat=10" />
<generator uri="http://wordpress.org/" version="3.5.1">WordPress</generator>
<entry>
<author>
<name>Author Name</name>
</author>
<title type="html">Article Title</title>
<link rel="alternate" type="text/html" href="http://example.com/wp/index.php/2013/04/19/article-title/" />
<id>http://example.com/wp/?p=1418</id>
<updated>2013-04-19T21:33:48Z</updated>
<published>2013-04-19T21:33:16Z</published>
<category scheme="http://example.com/wp" term="firstcategory" />
<category scheme="http://example.com/wp" term="secondcategory" />
<category scheme="http://example.com/wp" term="thirdcategory" />
<summary type="html">A summary excerpt of the article [...]</summary>
<content type="html" xml:base="http://example.com/wp/index.php/2013/04/19/tons-vs-tonnes/">A summary excerpt of the article with a whole bunch more text taht is not in the summary.
</content>
<link rel="replies" type="text/html" href="http://example.com/wp/index.php/2013/04/19/article-title/#comments" thr:count="0"/>
<link rel="replies" type="application/atom+xml" href="http://example.com/wp/index.php/2013/04/19/article-title/feed/atom/" thr:count="0"/>
<thr:total>0</thr:total>
</entry>
</feed>
このフィードを消費して表示する JQuery ajax コードは次のとおりです。
$.ajax({
url: "//example.com/wp/index.php/feed?feed=atom&cat=10",
dataType: "xml",
success: function(data) {
console.log(data);
var $xml = $(data),
items = [];
$xml.find("entry").each(function(i) {
if (i === 30) return false;
var $this = $(this);
console.log($this);
items.push('<div><h3>' + $this.find("title").text() + '</h3><p><small>Published by ' + $this.find("author").text().trim() + ' on ' + publisheddate.toDateString() + ' ' + publisheddate.toTimeString() + '</small></h3>' + $this.find("content").text() + '</div><hr />');
});
$("#displayDiv").html(items.join(''));
これは機能しています!! 次のように、このエントリのすべてのカテゴリ タグのリストでこれを強化したいと思います。
firstcategory | secondcategory | thirdcategory
XML を見ると、サンプル エントリに 3 つのカテゴリ要素があることがわかります。
私はいくつかの方法を試しましたが、惨めに失敗しました。上記のサンプル javascript を抽出した作業コードに戻ったので、失敗した試行は残っていません。