プラグインを使わずに「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」が追加されます。
実装してから少し時間が経っているので、もしかしたら抜けている部分があるかもしれませんが、そのときはすみません。

コメントを残す

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