プラグインを使わずに「the_content」内の画像をlightboxで表示にする方法
※この方法を利用する場合は、wordpressのテンプレートファイルをカスタマイズする必要があります。
まず、「lightbox2」をダウンロードします。
このままjsファイルを使用すると、lightboxの閉じるボタンやローディング画像がリンク切れになってしまいますので、あらかじめこれらの画像ファイルをwordpressのメディア等でアップロードしておきます。
その後、「js/lightbox.js」ファイル内の画像リンクを、http://~から始まるURLで指定します。
テンプレートのheader.phpで、必要なファイルを読み込みます。
<link href="<?php bloginfo('template_url'); ?>/css/lightbox.css" type="text/css" rel="stylesheet" media="screen" />
<script src="<?php bloginfo('template_url'); ?>/js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="<?php bloginfo('template_url'); ?>/js/lightbox.js" type="text/javascript"></script>
function.phpに以下と追加します。
function lightbox_auto($content) {
global $post;
$pattern[0] = "/<a(.*?)href=('|")([A-Za-z0-9/_.~:-]*?)(.bmp|.gif|.jpg|.jpeg|.png)('|")([^>]*?)>/i";
$pattern[1] = "/<a(.*?)href=('|")([A-Za-z0-9/_.~:-]*?)(.bmp|.gif|.jpg|.jpeg|.png)('|")(.*?)(rel=('|")lightbox(.*?)('|"))([ trnvf]*?)((rel=('|")lightbox(.*?)('|"))?)([ trnvf]?)([^>]*?)>/i";
$replacement[0] = '<a$1href=$2$3$4$5$6 rel="lightbox['.$post->ID.']">';
$replacement[1] = '<a$1href=$2$3$4$5$6$7>';
$content = preg_replace($pattern, $replacement, $content);
return $content;
}
add_filter('the_content', 'lightbox_auto');
function my_get_attachment_link( $link, $id, $size, $permalink, $icon, $text ) {
return preg_replace( '/s+title=/', " rel="lightbox[".$id."]" title=", $link );
}
add_filter( 'wp_get_attachment_link', 'my_get_attachment_link', 10, 6);これで、「wp_contents」内の<a>タグに、強制的に「rel=lightbox」が追加されます。
実装してから少し時間が経っているので、もしかしたら抜けている部分があるかもしれませんが、そのときはすみません。
