WordPressギャラリーにLightBox（FancyBox）機能を付けるカスタマイズ

ブログ記事内に広告リンクを含む場合がございます。

ワードプレスでは標準的に写真のギャラリー機能があります。

WordPress標準ギャラリー

デフォルトのギャラリー写真をクリックした際のオプションとしては、通常の画像挿入時と同様に「添付ファイルのページ」、「メディアファイル」が選択できますが、これだクリック時に別ページに移行するなど、使い勝手がいまいち。LightBox系のエフェクトをかけるなどする場合はどのようにすれば良いのでしょうか？

手順1.jQueryプラグインLightBoxの導入をしましょう。

今回は、jQueryプラグインのfancyboxを使います（※WordPress専用のプラグインではありません）。

ファイルは上記ページ内の「License/Download」からダウンロードできます。
ダウンロードのページに設定方法がありますが、ダウンロードしたファイルを解凍後にサーバーにアップし、headerにスクリプトファイルを読み込み設定を記述します。

設定が完了したら、Lightboxが正しく動作するかを確認しましょう。
投稿画面で画像を挿入し、classにfancyboxと追加し、投稿を保存し、投稿画面を確認してみましょう。画像をクリックし、以下のようにLightboxが動作すれば完璧です。

lightbox

手順2.スクリプトをテーマ内にアップしましょう。

ここからがカスタマイズです。
まずは、以下のコードを記載したテキストファイルを作成します。その後、ファイルをサーバーにアップします。適当な名前（fancybox.js等）にして、ファイルをテーマ内にアップしましょう。


$(function () {
 $(".gallery-icon a").addClass("fancybox");
});

手順3.スクリプトを読み込み設定をheader.phpに追加します。

上記スクリプトを読み込む設定をします。
以下は、ファイルの名前をfancy.jsとし、ファイルの保存場所をテーマファイル内のjsフォルダにした例です。

<script type="text/javascript" src="<?php bloginfo('template_directory');?>/js/fancy.js"></script>

以上で、設定が完了です。
WordPressギャラリーで、正しく動作するか試してみましょう。
動作しないという場合、ギャラリー以外の機能を使って、fancyboxが正しく動作するか試しましょう。
動作する場合、テスト用にギャラリーを作成し、出力されているHTMLコードをチェックしましょう。[.gallery-icon a」のclassにfancyboxが付与させているかの確認です。表示されない場合、手順3のパスを確認しましょう。

構造を理解すれば、プラグインのカスタマイズ方法は見えてくる。

fancyboxプラグインは、リンク要素にfancyboxというclassがついている場合に動作します。つまり、どうにかしてギャラリーで出力されるHTMLコードのclassに、fancyboxを付与させる事が出来れば良いのです。手順2で作成したファイルは、単純にgallery-iconのリンク要素に、fancyboxのclassを付けるシンプルな仕様のjQueryです。

ワードプレスのコアファイル、functions.phpをカスタマイズして、同様の仕様にすることも可能です。
今回のカスタマイズは、外部ファイルを作成し、そのファイルを読み込むだけといった構成です。ワードプレスのアップグレードや、プラグインのアップグレードの影響を受けないので使い勝手がよくお勧めです。

今回ご紹介したjQueryプラグイン以外のLightboxプラグインを使っている場合でも、特定のclassに対してlightboxエフェクトが動作する仕様のものであれば同様のカスタマイズが利用できます。ぜひお試しください。

人気記事　初心者でも可能なSEO対策って何？