さて、昨日のエントリの続き。
「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['limit']) && is_numeric($_GET['limit']) ? $_GET['limit'] : 5 );
$callback = wp_specialchars(attribute_escape(isset($_GET['callback']) ? $_GET['callback'] : '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([$out]);";
} 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&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
先程、質問させて頂いたtuffです。
投稿の本文を取得する事は出来たんですが、wordpressの投稿で、改行が入っている本文については静的htmlに取得できない事がわかりました。
投稿で改行などがある記事を取得する方法な無いものでしょうか？
改行無しの記事を取得するまでが限界でしょうか？
宜しくお願い致します。
初めまして。
今回記事を参考にさせて頂き、日付とタイトルの表示は出来たんですが、どうしても本文を取得しようとすると、全てが真っ白になってしまいます。
静的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初心者ですが、会社でどうしても導入しなくてはいけなくてアドバイスいただけるとありがたいです。
宜しくお願いします。
Feed Jsonを使用して無事に表示ができました。先ほどのコメントで２段に表示されると言う現象は、一度プラグインを停止して有効化することで解消されました。現在10エントリーが表示されていますが、これを５エントリーに変更することは出来ないでしょうか？出来れば日付も表示したいのですが。
ありがとうございました！
ブログを見ながら作業を進めて、表示されるようになりました。
ただ、時系列でブログを見ながらやってて、get_the_archives.php?をアップしてて、その後にFeed Json プラグインをインストールしたので（だろうとおもうのですが）５行×２列表示されています。jsonファイルのリセットが必要なんでしょうか？？？
phpは消したのですが、ASPサイトなので最初に入れようと思っていた枠がどうやらJS非対応だったようで、何度やっても表示されなかったものでプラグインも入れてみたのです。
ピンバック: INDEXの改修 | Memo
ピンバック: トップページにBlogの更新情報を･･･ | Memo | 管理人の雑記帳
こちらの記事を参考に自分のページに追加してみたのですが、カテゴリー名も取得するにはどうすれば良いでしょうか。
最新内容を見せつつ、興味毎にカテゴリー名が出ると良いなと思ったので質問させて頂きます。
お手隙な時で構いませんので、よろしくご教授頂けますようお願い致します。
参考にさせていただきました。便利でありがたいです。
「author_meta」の取得はできないんでしょうか～？
散々試してみたものの、PHP分からなくて。。
ピンバック: WordPress で JSON 形式のデータを吐き出すプラグイン Feed JSON : dogmap.jp
ピンバック: 【wordpress】wordpressの外にあるhtmlに、カテゴリーAの新着リストを表示したい - ウェブなとき。
初めまして
上記も通り 設定したつもりですが、こちらのミスでしょうか？
ピンバック: 静的ページにwordpressの最新記事を埋め込むには？ | 魚沼産コシヒカリ 中田農産 農家のブログ
ピンバック: wordpressの更新情報をJSONPで出力する方法 | Branberyheag Lab