WordPress の CDN の画像が表示されないとき元の画像を表示する

2014/5/13 WordPress

プラグイン Jetpack の Photon API を利用すると WordPress の CDN から画像を配信できるようになります。画像転送がすべて WordPress からになるので自サーバー転送量削減に役立ちます。場合によっては、画像の表示も早くなりますね。

過去記事を見ていたら一時的にいくつか　CDN の画像にアクセスできず画像表示に失敗してました。自サーバーには画像があるので、もし CDN の画像表示に失敗した場合は自サーバーの画像を表示するスクリプトを書きました。

(function($) {

$(".entry img").error(function() {

 var m = /^http:\/\/i[0-2]\.wp\.com\/(.*)$/.exec($(this).attr("src"));

 if (m && m[1]) {

 $(this).attr("src", "http://" + m[1]);

 }

 return true;

});

})(jQuery);

view raw
imgfallback.js
hosted with ❤ by GitHub

書いている間に CDN 画像が表示できるようになってましたが、テーマのスクリプトに追加しておくと良さそうですね。

「.entry」は使用しているテンプレートに合わせて変更してください。

	(function($) {
	$(".entry img").error(function() {
	var m = /^http:\/\/i[0-2]\.wp\.com\/(.*)$/.exec($(this).attr("src"));
	if (m && m[1]) {
	$(this).attr("src", "http://" + m[1]);
	}
	return true;
	});
	})(jQuery);