ページの画像をクリックすると画面内に拡大表示してくれる「Lightbox」をWordPressで使う方法

今回は、画像を手軽にギャラリー表示できるLightboxというjQueryプラグインをWordpressテーマでカスタマイズして利用する方法を紹介したいと思います。

スポンサーリンク
レクタングル(大)広告

Lightboxを利用する意義

クリエイティブ・コモンズ画像を一括検索できるFind CCというサービスがあります。

このサービスで検索した画像をクリックすると、以下のようにブラウザ画面いっぱいに写真が表示されます。

Lightbox2で画像を表示した場合

前々から、これを「便利だなぁ」と思っていまして、自分のWordpressブログにも取り付けたいと思っていました。

というのも、このLightboxを利用すると、「画像クリックして大きな画像を表示させるリンク」の場合、以下のような利点があるからです。

  • ブラウザ画面内にページ遷移の必要がなく画像を表示できる
  • 画像の大きさはブラウザ画面の大きさに最適化される
  • 画像が綺麗に表示されるように背景が暗色化される
  • グループ化しておけば、画像だけをまとめて見ることができる
  • 画像が必要なくなれば閉じてまたコンテンツを見ることができる

これらの機能があれば、かなり訪問者の利便性が上がるのではないかと思います。

難点といえば、Lightboxを利用するためのCSSとJSファイル読み込み時間がかかることくらいでしょうか。

ただ、ファイルを2つ読み込む時間といっても、普通は体感できるようなものではないですから、その難点に有り余る利点があると思っています。

で、Find CCのソースを見てみたら「lighgtbox」とか書いてあったので、ググってみたらLightboxというプラグインがあることを知りました。

Lightboxを設置する主な手順

Lightboxを設置するには以下の3手順が必要です。

  1. Lightboxのダウンロード&設置
  2. ヘッダーでLightboxファイルを呼び出す
  3. Lightbox用にAタグを書き換える

特に、コードの内容などを気にしなければ、コードを2ヶ所コピペするだけなので、15分もかからないと思います。

Lightboxのダウンロード&設置

Lightbox

まずは、Lightboxから、Lightboxをダウンロードします。

ダウンロードは、以下の「DOWNLOAD」ボタンからダウンロードします。

Lightboxをダウンロードする

ダウンロード後、「lightbox-2.7.1.zip」のようなファイルが作成されるので、解凍し中にある以下のフォルダをWordpressテーマフォルダ直下にコピペしてください。

  1. css
  2. img
  3. js

3つのフォルダ

フォルダをコピペする場所は、どこでも良いですが、説明を単純化するためにフォルダ直下にコピペしたとして説明します。

ヘッダーでLightboxファイルを呼び出す

次にテーマのheader.php内の<head></head>内でLightboxファイルを呼び出します。

</head>の手前あたりに以下のように書きます。

<?php if ( is_singular() ): //投稿・固定ページでしか利用しないため、その他では呼び出さない?>
<?php //wp_enqueue_script('jquery');//jQueryが読み込まれないテーマの場合は利用?>
<link href="<?php echo get_template_directory_uri(); ?>/css/lightbox.css" type="text/css" rel="stylesheet" media="all" />
<script src="<?php echo get_template_directory_uri(); ?>/js/lightbox.js" type="text/javascript"></script>
<?php endif; ?>

ここでは、先程コピペしたファイルを呼び出しています。

今回Lightboxを利用するのは、投稿ページと固定ページだけなので、それ以外はファイルを呼び出さないようにしました。

子テーマで利用する場合は、get_template_directory_uri()の部分を、get_stylesheet_directory_uri()で書き換えて利用してください。

jQueryを利用していないテーマの場合は、jQueryを呼び出す必要があります。wp_enqueue_script部分のコメントを外してください。

Lightbox用にAタグを書き換える

Lightboxを利用するには、通常以下のように書かれている画像へのリンクを

<a href="images/image-1-raw.jpg">#IMGタグ#</a>

以下のように書き換える必要があります。

<a href="images/image-1-raw.jpg" rel="lightbox">#IMGタグ#</a>

グループ化する場合はこんな感じ。

<a href="images/image-1-raw.jpg" rel="lightbox[group-name]">#IMGタグ#</a>

グループ化するにはこっちの書き方でもOK。

<a href="images/image-1-raw.jpg" data-lightbox="group-name">#IMGタグ#</a>

通常のサイトやWEBサービスであれば、大きな画像を表示するためのリンクに以下のような属性と値を取り付ければ良いです。

ただ、Wordpressの場合は、functions.phpに以下のような本文をフックするような関数を書いて、その中で「画像拡大用のAリンク」だけのタグを付け替えてやる必要があります。

以下をテーマ(子テーマ)内のfunctions.phpに追記してください。

//画像リンクのAタグをLightboxに対応するように付け替え
function add_lightbox_property( $content ) {
  //プレビューやフィードモバイルなどで遅延させない
  if( is_feed() || is_preview() || wp_is_mobile() )
    return $content;

  //既に適用させているところは処理しない
   if ( false !== strpos( $content, 'data-lightbox="image-set"' ) )
    return $content;

  //Aタグを正規表現で置換
  $content = preg_replace(
    '/<a([^>]+?)>\s*(<img[^>]+?>)\s*<\/a>/',//Aタグの正規表現
    '<a${1} data-lightbox="image-set">${2}</a>',//置換する
    $content );//投稿本文(置換する文章)

  return $content;
}
add_filter( 'the_content', 'add_lightbox_property', 11 );

これでLightboxの設定は完了です。

動作確認

これで、以下のような画像リンクをクリックして開いた場合は、

Lightbox test

こんな感じでブラウザの画面いっぱいに表示されます。

Lightbox表示

ページ遷移なしに、画像がブラウザの画面の大きさに最適化されて表示されます。(小さな画像の場合は、そのままのサイズで表示されます。)

縦長の画像の場合は、以下のように表示されます。

Lightbox 縦長の画像

functions.phpでグループ化してあるので、画像をクリックしたり、「>」部分をクリックしたりすると、次の画像に移動できます。(「<」部分をクリックすると戻る)

Lightboxの矢印

まとめ

こんな感じで結構手軽にLightboxを設置できます。

画像リンクをクリックして、詳細な画像を表示しようとしたときに、ページ遷移があると元のページに戻るのに余分な時間がかかってしまいますし、別タブに開かれた場合でも、タブを閉じなければならず、結構面倒です。

自分のWordpressサイトで、そういった不便を感じている場合は、Lightboxはかなり便利だと思います。サイトに訪れるユーザーの利便性も上がるのではないかと思います。(※サイトにもよります)

と、ここまで書いてWordpressプラグインで「Lightbox」と検索したら、かなり出てきました。

Lightboxプラグイン

とりあえず、通常ならこちらを使った方が手っ取り早いと思います。

スポンサーリンク
レクタングル(大)広告
レクタングル(大)広告

スポンサーリンク

『ページの画像をクリックすると画面内に拡大表示してくれる「Lightbox」をWordPressで使う方法』へのコメント

  1. 名前:チェ 投稿日:2016/02/08(月) 19:00:24 ID:0fc641edd

    すみません。

    御社のいう通りにやってみたら

    致命的なエラー:add_lightbox_propertyを再宣言することはできません()(以前/home/chez0225/chez.site/public_html/wp-content/themes/simplicity2/functions.php:266で宣言された)で/home/chez0225/chez.site/public_html/wp -content /テーマ/ simplicity2 / libに/ image.phpライン上の42

    というメッセージがでてきて

    その後、wordpress自体が動きません

    解決策はないでしょうか??

    至急で知りたいです。よろしくお願い致します。

  2. 名前:チェ 投稿日:2016/02/08(月) 19:21:41 ID:0fc641edd

    なんとか解決できました。

    失礼しました!

  3. アバター画像 名前:わいひら 投稿日:2016/02/08(月) 21:35:42 ID:4532bad39

    エラーメッセージは、関数を再定義しているから出ているものと思われます。
    Simplicityでは、既に同様のカスタマイズが実装されていることから、「関数の再定義」エラーが出ます。
    カスタマイズせずとも、テーマカスタマイザーからLightboxを利用することができます。
    ここで、書かれているカスタマイズは、Simplicity以外のテーマだと、うまくいくかと思います。