今回は、画像を手軽にギャラリー表示できるLightboxというjQueryプラグインをWordpressテーマでカスタマイズして利用する方法を紹介したいと思います。
目次
Lightboxを利用する意義
クリエイティブ・コモンズ画像を一括検索できるFind CCというサービスがあります。
このサービスで検索した画像をクリックすると、以下のようにブラウザ画面いっぱいに写真が表示されます。
前々から、これを「便利だなぁ」と思っていまして、自分のWordpressブログにも取り付けたいと思っていました。
というのも、このLightboxを利用すると、「画像クリックして大きな画像を表示させるリンク」の場合、以下のような利点があるからです。
- ブラウザ画面内にページ遷移の必要がなく画像を表示できる
- 画像の大きさはブラウザ画面の大きさに最適化される
- 画像が綺麗に表示されるように背景が暗色化される
- グループ化しておけば、画像だけをまとめて見ることができる
- 画像が必要なくなれば閉じてまたコンテンツを見ることができる
これらの機能があれば、かなり訪問者の利便性が上がるのではないかと思います。
難点といえば、Lightboxを利用するためのCSSとJSファイル読み込み時間がかかることくらいでしょうか。
ただ、ファイルを2つ読み込む時間といっても、普通は体感できるようなものではないですから、その難点に有り余る利点があると思っています。
で、Find CCのソースを見てみたら「lighgtbox」とか書いてあったので、ググってみたらLightboxというプラグインがあることを知りました。
Lightboxを設置する主な手順
Lightboxを設置するには以下の3手順が必要です。
- Lightboxのダウンロード&設置
- ヘッダーでLightboxファイルを呼び出す
- Lightbox用にAタグを書き換える
特に、コードの内容などを気にしなければ、コードを2ヶ所コピペするだけなので、15分もかからないと思います。
Lightboxのダウンロード&設置
まずは、Lightboxから、Lightboxをダウンロードします。
ダウンロードは、以下の「DOWNLOAD」ボタンからダウンロードします。
ダウンロード後、「lightbox-2.7.1.zip」のようなファイルが作成されるので、解凍し中にある以下のフォルダをWordpressテーマフォルダ直下にコピペしてください。
- css
- img
- js
フォルダをコピペする場所は、どこでも良いですが、説明を単純化するためにフォルダ直下にコピペしたとして説明します。
ヘッダーで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の設定は完了です。
動作確認
これで、以下のような画像リンクをクリックして開いた場合は、
こんな感じでブラウザの画面いっぱいに表示されます。
ページ遷移なしに、画像がブラウザの画面の大きさに最適化されて表示されます。(小さな画像の場合は、そのままのサイズで表示されます。)
縦長の画像の場合は、以下のように表示されます。
functions.phpでグループ化してあるので、画像をクリックしたり、「>」部分をクリックしたりすると、次の画像に移動できます。(「<」部分をクリックすると戻る)
まとめ
こんな感じで結構手軽にLightboxを設置できます。
画像リンクをクリックして、詳細な画像を表示しようとしたときに、ページ遷移があると元のページに戻るのに余分な時間がかかってしまいますし、別タブに開かれた場合でも、タブを閉じなければならず、結構面倒です。
自分のWordpressサイトで、そういった不便を感じている場合は、Lightboxはかなり便利だと思います。サイトに訪れるユーザーの利便性も上がるのではないかと思います。(※サイトにもよります)
と、ここまで書いてWordpressプラグインで「Lightbox」と検索したら、かなり出てきました。
とりあえず、通常ならこちらを使った方が手っ取り早いと思います。
すみません。
御社のいう通りにやってみたら
致命的なエラー: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自体が動きません
解決策はないでしょうか??
至急で知りたいです。よろしくお願い致します。