WordPress の更新情報を JSONP 形式で出力

さて、昨日のエントリの続き。
「Googlle AJAX Feed API なんて外部のサービスに依存したくないんじゃ!」という人のために、昨日と同様のことを自前で行うための方法。

WordPress の更新情報を JavaScript で取得して表示するには AJAX と呼ばれる技術を使います。
しかし、http を通してデータを読み込むための XMLHttpRequest では、制限として別ドメインのデータを読み込むことができません
これを回避する方法が JSONP です。
hiromasa さんが、昨日のエントリにトラックバックしてくれた静的 HTML に WordPress を埋め込む方法を用いて JSONP 形式で、WordPress の最新記事を取得してみましょう。

まずは JSONP 形式で、WordPress の最新エントリ一覧を取得する方法。
以下のようなコードを get_the_archives.php とでも名づけて WordPress のルートディレクトリに置いておきましょう。

<?php
include_once('./wp-load.php');

// パラメータ取得
$limit = (int) (isset($_GET&#91;'limit'&#93;) && is_numeric($_GET&#91;'limit'&#93;) ? $_GET&#91;'limit'&#93; : 5 );
$callback = wp_specialchars(attribute_escape(isset($_GET&#91;'callback'&#93;) ? $_GET&#91;'callback'&#93; : 'callback'));
$charset = get_bloginfo('charset');

query_posts("showposts=$limit");		// 最終 $limit エントリ取得のループをつくる
if ( have_posts() ) {
	$out = null;

	// 最終 $limit エントリのタイトル・URL・日付を取得する
	while ( have_posts() ) {
		the_post();
		$out .= ( !empty($out) ? ',' : '');
		$out .= '{';
		$out .= '"title":"' . get_the_title() . '"';
		$out .= ',"link":"' . get_permalink() . '"';
		$out .= ',"pubdate":"' . the_date('Y-m-d H:i:s','','',false) . '"';
		$out .= '}';
	}

	// JSONP 形式で書き出す
	nocache_headers();
	header("Content-Type: application/x-javascript; charset=$charset");
	echo "$callback(&#91;$out&#93;);";

} else {
	// 無ければ 404 Not Found を返す
	header("HTTP/1.0 404 Not Found");
	wp_die("404 Not Found");
}
?>

これを <script type="text/javascript" src="https://dogmap.jp/get_the_archives.php?limit=5&amp;callback=callback"></script> みたいな感じで呼び出してやれば、JSONP 形式で最新記事の一覧を取得できます。

で、この取得したデータを展開するための callback 関数を作ってやれば、別ドメインにある html 上に一覧を表示することができます。
callback 関数は、以下のような感じ。


function callback(results) {
var ul = document.createElement("ul");
for (var i = 0; i < results.length; i++) { var entry = results[i]; var li = document.createElement("li"); var a = document.createElement("a"); a.setAttribute("title", entry.title); a.setAttribute("href", entry.link); a.appendChild(document.createTextNode(entry.title)); li.appendChild(a); ul.appendChild(li); } var container = document.getElementById("archives"); container.appendChild(ul); }[/javascript] とても、簡単ですね。 これで、id="archives" な要素の子要素として、更新情報一覧がセットされている <ul> 要素が追加表示されます。 注意点は callback 関数は、JSONP 形式で呼び出すための <script> タグよりも前に書いておくことです。

これを使ったデモを、以下のリンクに置いておきます。
RSS フィード表示テスト : dogmap.jp

WordPress の更新情報を JSONP 形式で出力」への13件のフィードバック

  1. tuff

    先程、質問させて頂いたtuffです。
    投稿の本文を取得する事は出来たんですが、wordpressの投稿で、改行が入っている本文については静的htmlに取得できない事がわかりました。

    投稿で改行などがある記事を取得する方法な無いものでしょうか?
    改行無しの記事を取得するまでが限界でしょうか?

    宜しくお願い致します。

    返信
  2. tuff

    初めまして。
    今回記事を参考にさせて頂き、日付とタイトルの表示は出来たんですが、どうしても本文を取得しようとすると、全てが真っ白になってしまいます。
    静的htmlにget_the_content()、the_content利用できないのでしょうか?

    現在エラーが起きているget_the_archives.phpの一部です。

    // 最終 $limit エントリのタイトル・URL・日付を取得する
    while ( have_posts() ) {
    the_post();
    $out .= ( !empty($out) ? ‘,’ : ”);
    $out .= ‘{‘;
    $out .= ‘”title”:”‘ . get_the_title() . ‘”‘;
    $out .= ‘,”comment”:”‘ . get_the_content() . ‘”‘;//これを追加したいんですが・・・
    $out .= ‘,”link”:”‘ . get_permalink() . ‘”‘;
    $out .= ‘,”pubdate”:”‘ . get_the_date(‘Y/m/d ‘,”,”,false) . ‘”‘; //the_dateは最新の記事にだけ日付を追加
    $out .= ‘}’;
    }

    php初心者ですが、会社でどうしても導入しなくてはいけなくてアドバイスいただけるとありがたいです。
    宜しくお願いします。

    返信
  3. skywaverider

    Feed Jsonを使用して無事に表示ができました。先ほどのコメントで2段に表示されると言う現象は、一度プラグインを停止して有効化することで解消されました。現在10エントリーが表示されていますが、これを5エントリーに変更することは出来ないでしょうか?出来れば日付も表示したいのですが。

    返信
  4. skywaverider

    ありがとうございました!
    ブログを見ながら作業を進めて、表示されるようになりました。
    ただ、時系列でブログを見ながらやってて、get_the_archives.php?をアップしてて、その後にFeed Json プラグインをインストールしたので(だろうとおもうのですが)5行×2列表示されています。jsonファイルのリセットが必要なんでしょうか???
    phpは消したのですが、ASPサイトなので最初に入れようと思っていた枠がどうやらJS非対応だったようで、何度やっても表示されなかったものでプラグインも入れてみたのです。

    返信
  5. ピンバック: INDEXの改修 | Memo

  6. ピンバック: トップページにBlogの更新情報を・・・ | Memo | 管理人の雑記帳

  7. smallshot

    こちらの記事を参考に自分のページに追加してみたのですが、カテゴリー名も取得するにはどうすれば良いでしょうか。
    最新内容を見せつつ、興味毎にカテゴリー名が出ると良いなと思ったので質問させて頂きます。

    お手隙な時で構いませんので、よろしくご教授頂けますようお願い致します。

    返信
  8. jajajan

    参考にさせていただきました。便利でありがたいです。
    「author_meta」の取得はできないんでしょうか~?
    散々試してみたものの、PHP分からなくて。。

    返信
  9. ピンバック: WordPress で JSON 形式のデータを吐き出すプラグイン Feed JSON : dogmap.jp

  10. ピンバック: 【wordpress】wordpressの外にあるhtmlに、カテゴリーAの新着リストを表示したい - ウェブなとき。

  11. ピンバック: 静的ページにwordpressの最新記事を埋め込むには? | 魚沼産コシヒカリ 中田農産 農家のブログ

  12. ピンバック: wordpressの更新情報をJSONPで出力する方法 | Branberyheag Lab

コメントを残す

メールアドレスが公開されることはありません。