プラグインを使わずにLightbox2をWordPressに設定する方法
Lightboxはよく使われますか？
別ウィンドウを開かずにモーダルウィンドウで画像の拡大表示ができ、便利ですよね。
今回ご紹介する「Lightbox2」は
WordPressでもプラグインとしても存在します。
ですが、以前の記事でも書きましたが、アップデートの際の互換性などの心配があるのでプラグインの多用はなるべく避けたいと思っているので、今回もプラグインを使わない方法で対応しました。
Lightbox2のサンプル
まずはサンプルです。
試してみたほうが、どんなものかわかりやすいですよね。
下記のAXISのHPのサムネイルをクリックまたはタップをすると、別ウィンドウを開かずにモーダルウィンドウで画像の拡大表示ができます。拡大表示後は右下の[ ✖ ]、または黒いエリアをクリックまたはタップで元に戻ります。
この機能がLightboxです。
サムネイルのクリックまたはタップでLightboxをお試しいただけます
拡大表示後は右下の[ ✖ ]、または黒いエリアをクリックまたはタップで元に戻ります。
STEP1：Lightbox2を用意
今回ご案内する「Lightbox2」は、下記のサイトで提供されています。
使い方もとっても簡単です。
まずは[Download]を選択して必要なファイルをダウンロードしましょう。
STEP2：ファイルを配置
ダウンロードしたLightbox2を解凍して、下記のファイルを自分のサイトに配置します。
- css/lightbox.css
- js/lightbox-plus-jquery.min.js
- images/loading.gif
- images/next.png
- images/prev.png
- images/close.png
STEP3：ファイルを読み込む
<head>タグ内にlightbox.cssへのリンクを追記します。
リンクのパスは置く場所に合わせて調整してください。
<link type="text/css" href="css/lightbox.css" rel="stylesheet" >
</body>タグのすぐ上にlightbox-plus-jquery.min.jsへのリンクを追記します。
こちらも、リンクのパスは置く場所に合わせて調整してください。
<script type="text/javascript" src="js/lightbox-plus-jquery.min.js"></script>
STEP4：<a>タグ内にdata-lightbox=”image”を追記
Lightbox2を使えるようにするため、<a>タグ内にdata-lightbox=”image”を追記します。
これで完了です。画像をクリックするとモーダルウィンドウでの拡大表示が可能になります！
<a href="images/xxxxx.jpg" data-lightbox="image" ><img src="xxxxx.jpg" /></a>
さらに便利に！自動でdata-lightbox=”image”を追記
WordPressでは、さらに便利にdata-lightbox=”image” を追記することができます。
/wp-admin/includes/media.php
このファイルの135行目に
data-lightbox=”image”
を追記します。
if ( $url )
$html = '<a href="' . esc_attr( $url ) . '"' . $rel . ' data-lightbox="image" >' . $html . '</a>';ここに記述することで、
WordPress「投稿の編集」ページで
「メディアを追加」を使用して画像を追加する際、リンク先「メディアファイル」を選択すると、
data-lightbox=”image”
が自動的に追記されるので便利です。
いかがでしたか？
Lightbox”2″（v2.8.2）の記事が世の中にまだ少ないかな？と思ったのでご紹介してみました。
WordPressでプラグインの多用を避けたいと思っている方、ぜひお試しください♪