WordPressが出力したギャラリーをライトボックス化するショートコードを作成してみました。
- Colorboxをインストール
- WordPressテーマのstyle.cssにColorboxのスタイルをインポート
- Colorboxのコード片を作成してショートコード化
/**
* Colorbox
*/
function colorbox_func() {
$str = <<<EOD
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="/lib/colorbox/jquery.colorbox-min.js"></script>
<script>
$(document).ready(function(){
$(".gallery-item a").colorbox({
rel:'attachment-thumbnail', transition:"none", width:"75%", height:"90%",
title: function () {
var alt = $(this).children().attr('alt');
return alt;
}
});
});
</script>
EOD;
return $str;
}
add_shortcode('colorbox','colorbox_func');
このカスタムショートコードをfunction.phpに記入します。
投稿の本文で[gallery link="file" columns="6" ids="279,280,281,282,283,284,285,286,287,288,289,290,291,292,293,294,295,296"][[colorbox]]等すれば、WordPressのギャラリーがライトボックス化されます。ここでのColorboxコード片では、WordPressのギャラリーが出力するHTMLにあわせてタイトルにサムネイル画像のAlt属性を渡しています。
この方法だと、（プラグインではなく）外部のColorboxライブラリを利用しながらWordPressデフォルトのギャラリーをライトボックス化できます。またWordPressデフォルトのギャラリーショートコードへの変更が不要です。1ページ1ギャラリーが前提のコードなので、複数のギャラリーを設置する場合等はidを引数で渡すなりスクリプトで動的にコード片を生成するなりしてグループ化の処理を追加する必要があります。