【番外編】CSSだけのlightboxをwordpressにプラグイン無しで入れてみる

こんにちは、yumiです。

WordPressのスリム化というか、シンプルな雛形作りに挑戦中なのですが、いつもlightboxだけは最初から入ってて良いんじゃないかと思うのですよね。公式のテーマで対応していてもそろそろ良いんじゃないかと思うんですよ・・・。画像クリックして素の画像ファイルが表示される方がそろそろ予想外の動きになるのではないかと思うんです。

どうせ入れるならCSS3だけでできるlightboxにしたいなと思って、プラグインを探したら2年前で更新止まってて。CSS3だけのlightboxって流行ってないのかな。
というかスリム化目指してるのにプラグインあんまり入れたくないし、よし、いっちょ書いてみるか、とfunctions.phpとCSSで書いてみました。

function add_lightbox($content) {
    if ( preg_match('/<a href=.*?><img/', $content) ) {
        $lightbox_class_name = 'lightbox';
        preg_match_all('/<a href=\"(.*?)\".*?><img.*? class=\".*?wp-image-(.*?)\"(.*?)<\/a>/', $content,$matches);
        foreach ($matches[1] as $key => $value) {
            if(preg_match('/\.gif$|\.png$|\.jpg$|\.jpeg$|\.bmp$/i',$value)){
                $pattern = '/<a href=\"'.preg_quote($value,"/") .'\".*?><img.*? class=\".*?wp-image-(.*?)\"(.*?)<\/a>/';
                $content = preg_replace($pattern,'<a href="#wp-image-'.$matches[2][$key].'"><img class="wp-image-'.$matches[2][$key].'"'.$matches[3][$key].'</a><a href="#_" class="'.$lightbox_class_name.'" id="wp-image-'.$matches[2][$key].'"><img src="'.$matches[1][$key].'"></a>' ,$content);
            }
        }
    }
    return $content;
}
add_filter('the_content','add_lightbox');

というような、画像ファイルをリンク先に指定しているimgタグを探して書き換える処理をする関数を書いて、functions.phpに追加。

/* lightbox */
.lightbox {
/** Default lightbox to hidden */
display: none;

/** Position and style */
position: fixed;
z-index: 999;
width: 100%;
height: 100%;
text-align: center;
top: 0;
left: 0;
background: rgba(0,0,0,0.8);
}

.lightbox img {
/** Pad the lightbox image */
max-width: 90%;
max-height: 80%;
margin-top: 2%;
}

.lightbox:target {
/** Remove default browser outline */
outline: none;

/** Unhide lightbox **/
display: block;
}

という感じにCSSを書くと、lightboxぽく表示されます。

プラス解説というか感想というか

CSS3で使える:targetがポイントかなあ。

思いっきりレガシーブラウザ無視してたり汎用性を全く考えてないのでこのまま使えないとは思いますが、js使わないのでユーザー側は軽いはず?

何か機能を追加する時ブラウザで処理するべきかサーバーサイドで処理するべきかをいつも思うのですが、lightboxぐらいの機能だったらどっちでもあんまり変わらない気もするし、画像が100個ぐらいあるページだとこっちのほうが重くなりそうな気もするし。foreach使わないようにしたかったけれど私には無理だった・・・。正規表現難しいデスネ。

まあ其の場合はJS側でDOMの書き換えをやれば良いので、プラグイン無しで頑張れるかな。時間があればそっちもチャレンジしてみたいと思います。

参照先:

Pure CSS Lightbox
CSS側のコードをまるっとパクらせていただきました。

PHPサンプル 正規表現 ファイルの拡張子の書式の判定(チェック) 「preg_match()」 | TRYPHP!
拡張子の判定のところを参考にしました。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です