Tumblrにリブログした画像をWordPressに表示してみた
こちらを参考にさせていただきました。
ブログのフッター等にjQueryでTumblrに投稿した画像を表示する
JavaScriptソースはかちびと.netさんのほぼそのままです。
ありがとうございます。
tumblr_picというIDをもつdiv要素へ、
画像を24枚表示することにします。
出来上がりイメージです。
ここから
（今回はサイドバーへ追加しました。）
(WordPressのテーマ)/sidebar.phpへ、Tumblrの画像を表示したい場所に
以下のタグを追加します。
<div id="tumblr_pic"></div>
かちびと.netさんから（勝手に）頂戴した下記ソースを
tumblr.jsという名前で、(WordPressのテーマ)/jsへ保存します。
//JSONデータの取得と表示件数の指定
$.getJSON("http://foo.tumblr.com/api/read/json?num=24&callback=?", function(data) {
$.each(data.posts, function(i, posts) {
//写真のサイズ、URL、抜き出すアイテムのタイプの指定
var photo = this['photo-url-75'];
var url = this['url'];
if (this['type'] === "photo") {
//画像をul内にリストとして実装
$('div#tumblr_pic').append('<a href="' + url + '" target="_blank"><img src="' + photo + '" \/><\/a>');
} else {
return;
}
});
});
foo.tumblr.com部分をTumblrのIDに変更してください。
詳しくはブログのフッター等にjQueryでTumblrに投稿した画像を表示するをご確認ください。
今保存したtumblr.jsを読み込みます。
(WordPressのテーマ)/header.phpの wp_head() の前に以下を追加する。
wp_enqueue_script('tumblr',get_bloginfo('template_url').'/js/tumblr.js', array('jquery'));
以上で作業終了です。
このサイトへ追加しました。
サイバーまめかん
