当サイトを数年ぶりにリニューアルしたところ、細かい部分の手抜きが目についてきたので徐々に手を入れています。
そこで標題のお話。お気に入りにモーダルウィンドウ系プラグインが動かない。
原因はいろいろ推察できますが、未検証なのでここでは触れません。（Jetpack怪しい・・）
せっかくレスポンシブ対応にしたわけだし、プラグインもレスポンシブをうたっているものを新たに導入してみようといろいろ試してみましたがどれも動きません。何故だ・・
そこは動かないものはさっぱり見切って、次々と別のプラグインを試していたところ…既に何度も導入経験のある jQuery Colorbox が動きましたorz
- 設定がとても簡単（管理画面での設定のみで対応可）
- モーダルウィンドウのデザインが豊富
- 画像だけでなく通常リンクやYOUTUBEにも対応
といいことづくめなので、モーダル系で迷ったらこれをオススメします。
ちなみに 通常リンク・YOUTUBEは、リンクに class="colorbox-link" を付加することで動作します。
レスポンシブ対応は、モーダルウィンドウの最大サイズを％指定することで対応します。
というわけで、以前掲載した YOUTUBE のサムネイルから動画ページへリンクを貼るショートコードを少しいじって Colorbox で動画を再生するようにしてみました。
（スマホ非対応。Colorboxを動作しないようにする等対策が必要）
functions.php
function youtube($atts) {
extract(shortcode_atts(array(
"value" => '',
"width" => '320',
"height" => '180'
), $atts));
return '<p class="ythumb"><a href="http://www.youtube.com/v/'.$value.'" class="colorbox-link"><img src="http://i.ytimg.com/vi/'.$value.'/mqdefault.jpg" width="'.$width.'" height="'.$height.'" alt=""></a></p>';
}
add_shortcode("youtube", "youtube");
サンプル
