WordPressにLightbox風プラグインを導入する

WordPressにLightbox風プラグインを導入する「Lightbox」をご存知だろうか?

画像をクリックすると「うにょーん」、「びよーん」と画像が飛び出してくるアレである。

言葉では、説明が難しいので、ともかく下の画像をクリックして欲しい。

※焦りは禁物!ページが表示されていてもLightboxに必要なライブラリの読み込みが完了したとは限らない。画面の一番下にツールバーが表示されたタイミングならOK。

Lightboxのテスト用 Yard O Lette

「あっ、見たことある。」と思われたのではないだろうか?

「Lightbox」は、本来、特定のツールを指す固有名詞なのだが、一般的にはこのような機能を「Lightbox」と言う。

現在は、本家の「Lightbox」の他、Lightbox風の機能を実現するライブラリが多数登場しているが、Lightbox風のクローンを含めて、単に「Lightbox」と呼ばれることが多い。

Lightbox風の機能は、JavaScriptライブラリ「JQuery」、「MooTools」、「Prototype」などのライブラリを利用して作られている。

これらのライブラリは、見た目にも、アクセサビリティ上も優れた機能をウェブページで実現する、所謂、AJAXに対応したライブラリだ。

「JQuery」、「MooTools」、「Prototype」などを利用して、Lightbox風の機能を実現するライブラリは、本家の「Lightbox」および「Lightbox2」の他、「Slimbox」、「Slimbox2」、「ThickBox」、「ColorBox」など多数存在している。

更に、WordPress用に、これらがプラグイン化して配布されているので、WordPressへの導入は難しくない。

様々な開発者がプラグイン化しているので、(相違はバージョンが違う程度で)同一のライブラリをベースにしたものが多数存在する。

私は、このブログに、Lightbox風の機能を導入したく、作業を進めていた。

有効化、無効化も簡単なプラグインとして導入するつもりだったため、導入は、直ぐに終わると思っていたが、この判断は甘く、実際は、かなり苦労した。

Lightbox風の機能を実現するプラグインの多くが、動作環境に神経質で、導入しても動かないケースが非常に多い。

特に「zenback」とは相性が良くないようだ。「zenback」を外すと、あっさり動いたものもあった。

加えて、私の画像の挿入の仕方が悪いのだが、既存の画像には、Lightbox風の機能が適応されない問題にも直面することになる。

結局、既存の画像にもLightbox風の機能を適応するためにプラグインを自作するはめになった。

以下、私が試したLightbox風の機能を実現するプラグインを紹介する。

同じような名称のものが混在しているので注意して欲しい。

・Easy FancyBox

Easy FancyBox 1.3.4.8」は、「jQuery」ベースの「FancyBox」をプラグイン化したもので、画像だけでなく、Flash、PDF、iFrame、YouTubeもサポートしている。

Easy FancyBox

最初、設定項目がないと勘違いしたが、管理画面の「設定」 -> 「メディア」の中にあった。

流れるように飛び出してくる動きが特徴的だが、このブログでは、個別記事のページでフリーズしたようになり、閉じられない現象が発生した、詳しくは後の述べるが、「zenback」と競合しているのではないかと思われる。

ただし、「zenback」を外す気もなく、面倒なので検証はしていない。

・WP Facebox Gallery(Facebox Gallery)

「jQuery」ベースの「WP Facebox Gallery 1.0.4」は、なかなか動作が軽快だ。

Facebox Gallery

設定項目は無いが、自動的に動作に必要な属性を画像のリンクに追加してくれる。

細かい設定をしたい人には不向きだが、インストールして直ぐ使える利便性がある。

私のブログでも、特に難なく動作した。

・FancyBox for WordPress

FancyBox for WordPress 2.7.5」も「jQuery」ベースの「FancyBox」をプラグイン化したものなので、動作が流れるようで綺麗だ。

FancyBox for WordPress

基本的には、「FancyBox」系のインターフェースだが、タイトルの表示方法が面白い。

設定項目が充実しており、他のプラグインとのコンフリクトを抑制する動作モードまで備えるのだが、画像リンクへの属性の自動追加が上手く機能していないように思われる。

手作業で属性を追加した場合でも、個別記事のページでは動作しなかった。

「zenback」が動いている個別記事での不具合となると、やはり、「zenback」のせいを疑ってしまう。

追記:設定画面の「Other」->「Load JavaScript in Footer」を有効にする事で、「zenback」が動作している個別記事でも、バージョン2.7.5は問題なく動作する事が分かった。

・FancyBox Gallery

FancyBox Gallery 0.3.2」も「jQuery」ベースの「FancyBox」が元のようなので、何か問題は出来るだろうと予想はしていたが、動作しなかった。

あるはずの設定画面が見当たらない。設定オプションには、開発上の「To Do」にも入っているので、無くて正解なのかもしれない。

属性の自動追加機能が備わっていないのか、属性も追加されない。

・Fancyboxify

Fancyboxify 1.1」も「FancyBox」がベースのようだ。

Fancyboxify

これまでの結果を見ても「jQuery」ベースの「FancyBox」系のプラグインは、運良く動作した場合でも、このブログとは、どうも相性が良くないようだが、やはり、個別記事のページでフリーズしたようになり、閉じられない現象が発生した。

「FancyBox」系は、「zenback」と相性が悪いのかもしれない。

これも設定画面が見当たらないが、属性の自動追加機能が備わっている。

・Flexible Lightbox

Flexible Lightbox 1.0.4」は、まず、属性の自動追加が上手く働いておらず、手作業で追加しても動作しなかった。

設定項目が表示されないと思ったら、画像リンクを追加する際に個別に設定する仕様になっている。

ThickBox」ベースの「WP Thickbox Integration」も、同一の開発者によるプラグイン。

・jQuery Colorbox

jQuery Colorbox 3.8.3」は、「jQuery」ベースの「ColorBox」をプラグイン化したものだ。

これは、有効化しただけで、あっけなく動作した。

動作は軽快で、見た目も悪くない。

jQuery Colorbox

デフォルトのテーマのバックグラウンドは、単調なものではなく面白い。

多言語化されているが、日本語には未対応。

・jQuery Lightbox

jQuery Lightbox 0.16」は、すっきりしたデザインで表示され、バックグラウンドにもリンク表示する。開く際に、最後に、もわっとスクロールする動作が特徴的。

jQuery Lightbox

画像の上をオーバーマウスすると、ファイル名やボタンが表示される。

管理画面には、必要最低限の設定項目を備えるが、属性の自動追加機能を備えていない点が残念。

自作したプラグインで属性の自動追加機能を補って、暫く利用していた。

ちなみに「jQuery lightBox plugin」は、これとは別物。

・Lightbox 2

Lightbox 2 v.2.9.2」は、「Lightbox 2」をプラグイン化したもの。

人気のあるプラグインだが、残念ながら、このブログでは動作しなかった。

・Lightbox Plus

Lightbox Plus 2.2.2」は、その名称から「Lightbox」ベースのプラグインかと思ったが、「ColorBox」をベースにしてるような記述がある。

実際、見た目も「ColorBox」。

Lightbox Plus

なかなか軽快に動作し、見た目も悪くないのでオススメ出来るプラグインだ。

設定オプションは、管理画面の「外観」の中にあるので注意。

・Simple Lightbox

Simple Lightbox 1.5.3」は、有効化するだけで問題なく動作した。

シンプルな見た目と動作だが、軽快に動作し、設定オプションで比較的細かな設定が出来るようになっている。

Simple Lightbox

左下角に表示が集中しており、少しここが五月蝿いかもしれない。

・slimbox Plugin for wordpress

slimbox Plugin for wordpress 1.4」は、「jQuery」ベースの「Slimbox2」をプラグイン化したもので、あくまで「Lightbox」風効果を得ることが目的で、設定オプションなどは持たない。

上下、左右の順に開くような、独特の動作をする。

slimbox Plugin for wordpress

作者は、日本人。

しかし、属性の自動追加機能は持っている。

このブログでは、説明文の「注意」で書かれているスクリプトを追加しなければ、完全には動作しなかった。

・WP jQuery Lightbox(wp-jquery-lightbox)

WP jQuery Lightbox 1.2.1」は、「jQuery Lightbox」をベースにしているようだ。

このブログでも、問題なく動作した。

シンプルだが、操作性にも優れ、見た目も悪くない。

WP jQuery Lightbox

画像は、左右、上下の順に開くような動きをする。

設定項目は、至ってシンプルだが、属性の自動追加機能を備えている。

・WP-prettyPhoto

WP-prettyPhoto 1.6.2」は、「jQuery」ベースの「prettyPhoto」をプラグイン化したもの。

これも問題なく動作した。

画像だけでなく、Flash、QuickTime、YouTube、iFramesにも対応しており、設定オプションでは、メディア毎に属性の自動追加機能を設定できる。ただし、バグがあるのか、画像だけOFFにしても、属性が付加される。

シンプルだが、デフォルトの枠が、ダークグレーで、新鮮な印象。

WP-prettyPhoto

ただし、少し動作が重いかもしれない。

・WP-Slimbox2 Plugin(WP-Slimbox2)

WP-Slimbox2 Plugin 1.0.3.2」は、「jQuery」ベースの「Slimbox2」をプラグイン化したもの。

WP-Slimbox2

このブログでは、個別記事のページで動作しない不具合が発生し、「Zenback」と競合しているようで、「zenback」を外すと動作した。

他にも「zenback」との競合が原因で動作不良を起こしているのではないかと思われるプラグインも多数あり、この手のプラグインと相性が悪そうだ。

「zenback」を導入しているなら、動かない場合は「Zenback」を疑ったほうが良いだろう。

————————————————————

以上の検証で、このブログでも動作するLightbox風プラグインが多数あることが分かった。

「FancyBox」系とは相性が悪いようだが、「ColorBox」系などの動くものから選ぶしかないだろう。

しかし、動くものをインストールしたとしても過去記事の画像には、Lightboxが適応されないという問題を抱えていた。

過去記事の量も少なので、無視しても良かったのだが、一貫性に欠けるのも嫌なので、思い切ってこれを修正するプラグインを自作した。

過去記事のLightboxが適応されない原因は、記事に画像を貼る際に「リンクURL」に「投稿のURL」を選択していたのがまずかった。

「ファイルのURL」を選択していれば、このような問題は起こらなかっただろう。

「投稿のURL」として画像を張り込んだ場合、タグは、以下のようになる。

<a rel=”attachment wp-att-668″ href=”http://www.near-mint.com/blog/?attachment_id=668” ><img src=”http://www.near-mint.com/blog/wp-content/uploads/2011/04/link_to_post-300×264.jpg” alt=”Link to Post” title=”Link to Post” width=”300″ height=”264″ /></a>

このタグでは、サムネイルのリンク先は、オリジナルの画像ではなく、オリジナルの画像を含むページになっている。

これでは、いくら属性を追加してもLightboxは機能しない。

幸いにオリジナルの画像のURLは、サムネイルのURLから判断が出来そうだ

そこで、以下のようにタグを書き換えてくれるプラグインを作成した。これならばLightboxの適応対象になる。

<a href=”http://www.near-mint.com/blog/wp-content/uploads/2011/04/link_to_post.jpg” ><img src=”http://www.near-mint.com/blog/wp-content/uploads/2011/04/link_to_post-300×264.jpg” alt=”Link to Post” title=”Link to Post” width=”300″ height=”264″ /></a>

書き換えると言っても、実際に保存された記事を書き換えている訳ではなく、ページが表示される前に割り込んでいるだけである。

折角なので、Lightboxに必要な属性を付加する機能も加え、属性の自動追加機能を持たないプラグインにも対応出来るようにした。

非常にニッチなプラグインだが、体裁を整えてから、ここで公開しようと考えている。

1つ言っておくが、冗談抜きで、私はPHPの事は分かっていないので、綺麗な記述ではない。コードも別のプラグインから大部分を拝借した。一応、置き換えのコアの部分である正規表現には工夫したつもりだが・・・。

2011/4/14 作成したプラグインを「Add attrib for Lightbox」という名称で公開。

Ver.0.1.1 2011/04/15

最新の「Add attrib for Lightbox」をダウンロード



WordPress, ネット・PC, 自作アプリ, , , , , , , Permalink