こんにちは、mimiです。
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ぽく表示されます。