WordPressギャラリー機能にダウンロードボタン（download属性／IE対応）をつける方法

よく写真素材配布サイトで見られるやつです。
よくあるパターンとしては、一度別窓で開いてからのダウンロードボタンとなることが多いですが（コンバーションを取るためかな？）、今回はlightbox的な画像表示からのダウンロードボタンとします。
lightbox的な画像表示にはfancyboxを使用します。
※プラグインの「FancyBox for WordPress」を使用すると何故かうまくいきません。プラグインを使用せずにfancyboxページよりスクリプトをダウンロードしてご利用ください。

fancyboxの導入方法

スクリプトダウンロード

fancyboxページよりスクリプトをダウンロードします。

使用中のWPテーマに移動

ダウンロード後、解凍し、必要なファイルだけ使用中のWPテーマに入れます。

source/jquery.fancybox.pack.js
source/jquery.fancybox.css
source/blank.gif
source/fancybox_loading.gif
source/fancybox_loading@2x.gif
source/fancybox_overlay.png
source/fancybox_sprite.png
source/fancybox_sprite@2x.png

※もし、画像ファイルは「img」フォルダにまとめる、CSSファイルは「css」フォルダにまとめるなど、構造を変える場合は各ファイル指定時の階層に注意してください。

読み込み

header.phpで読み込みます。
この時「jquery」より後に読み込まれるよう注意してください。
例：<?php wp_head(); ?>より後に書く

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/source/jquery.fancybox.css" />
<script src="<?php echo get_template_directory_uri(); ?>/source/jquery.fancybox.pack.js"></script>

発動

発動させます。
header.phpに直接書いても、外部ファイルに書いて読み込んでも、どちらでも問題ありません。

jQuery(function(){
	jQuery(".gallery a").fancybox();
});

これでWPギャラリー機能からのリンクは、lightbox的な画像表示をするようになりました。

ダウンロードボタンをつける

fancyboxページに「Tips & tricks」部分2番「Add something to the title (add download link)」に方法が書いてあります。
これを参考に、先程の記述を改造します。

jQuery(function(){
	jQuery(".gallery a").fancybox({
		afterLoad: function() {
			this.title = '<a class="dl-btn" href="' + this.href + '" download>Download</a> ' + this.title;
		},
		helpers : {
			title: {type: 'inside'}
		}
	});
});

これで、class「dl-btn」のついたダウンロードリンクが表示されるようになりました。
お好きなように装飾してください。

CSS例

a.dl-btn {
	display: block;
	float: left;
	background: #666;
	border: 1px solid #222;
	border-radius: 3px;
	width: 6em;
	margin: 0 10px 0 0;
	padding: 5px;
	text-align: center;
	text-decoration: none;
	color: #fff;
}
a.dl-btn:hover {
	background: #222;
}

HTMLのdownload属性について

先程の記述内の「download」について、これはHTML5のdownload属性です。リンク先ドキュメントをダウンロードさせることができます。
この属性がついているだけでリンク先ファイルをダウンロードしてくれる優れものですが、例によってIEが未対応です。
そのため、IE用に先程の記述を改造し、JSを新たに追加します。
参考サイト：ファイルをダウンロードさせるには？［JavaScript］

jQuery(function(){
	jQuery(".gallery a").fancybox({
		afterLoad: function() {
			<a href="' + this.href + '" class="dl-btn" download onclick="javascript: downloadFile(\'' + this.href + '\', \'' + this.href + '\'); return false;">Download</a>' + this.title;
		},
		helpers : {
			title: {type: 'inside'}
		}
	});
});
function downloadFile(url, filename) {
	"use strict";
	var xhr = new XMLHttpRequest();
	xhr.open("GET", url, true);
	xhr.responseType = "blob";
	xhr.onload = function (oEvent) {
		var blob = xhr.response;
		if (window.navigator.msSaveBlob) {
			window.navigator.msSaveBlob(blob, filename);
		}
		else {
			var objectURL = window.URL.createObjectURL(blob);
			var link = document.createElement("a");
			document.body.appendChild(link);
			link.href = objectURL;
			link.download = filename;
			link.click();
			document.body.removeChild(link);
		}
	};
	xhr.send();
}