PukiwikiにLightboxを導入する手順

Lightbox（ライトボックス）とはWEBページ上に設置した画像のサムネイルをクリックorタップした際にで新しいウィンドウやタブに遷移せず、表示しているページ上（モーダルウィンドウで）でぽわ～っと拡大画像を表示させるアレです。

スマホでは新しいウィンドウや別タブで開く挙動は好まれません。
そのため、今や多くのWEBサイトはこのモーダルウィンドウで開くLightbox系の仕組みを導入しています。

PukiwikiにもjQueryプラグインの「Lightbox2」を導入することでJavaScriptを触らずとも実装が可能です。

このたびPukiwikiのバージョン1.5.2（1.5.3）に導入してみたので覚え書きとして手順を残します。

Lightbox2プラグインのダウンロードと展開

オフィシャルサイトからプラグインを一式ダウンロードします（Lightbox2オフィシャルサイト）
GitHubのリンクから以下ファイルがダウンロード出来ると思います。

• lightbox2-master.zip

ダウンロードしてきたzipファイルを解凍します。
必要なフォルダは次の階層以下の3フォルダとなります。

• lightbox2-master\lightbox2-master\dist\css
• lightbox2-master\lightbox2-master\dist\images
• lightbox2-master\lightbox2-master\dist\js

この3フォルダをPukiwikiのskin/lightbox2-masterにアップロードします。

予めskinに「lightbox2-master」フォルダを作成してもいいですし、ローカルで新規作成した「lightbox2-master」フォルダに上記3フォルダを入れアップロードしてもOKです。

最終的にPukiwikiのskin以下のディレクトリが以下になるようにしてください。

• skin/lightbox2-master\css
• skin/lightbox2-master\images
• skin/lightbox2-master\js

スキンファイルの修正

スキンファイルにアップロードしたフォルダの読み込み記述を追加します。
対象ファイル名：skin/pukiwiki.skin.php

</head>の上あたりに以下4行を追加。

<!-- Lightboxプラグイン -->
<script src="skin/lightbox2-master/js/lightbox-plus-jquery.min.js">
<script src="skin/lightbox2-master/js/lightbox.min.js">
<link href="skin/lightbox2-master/css/lightbox.min.css" rel="stylesheet" />

プラグインファイルの修正

続けてプラグインファイルを修正します。
対象ファイル名: plugin/ref.inc.php

230～260行目付近

$params['_body'] = '<a href="' . $url . '">' . $url . '</a>';

↓↓

$params['_body'] = '<a href="' . $url . ' rel="lightbox[lightbox]" ' .'">' . $url . '</a>';

350～400行目付近

$params['_body'] = "<a href=\"$url2\" title=\"$title\">{$params['_body']}</a>";

↓↓

$params['_body'] = "<a href=\"$url2\" title=\"$title\" rel='lightbox[lightbox]'>{$params['_body']}</a>";

修正は以上です。
plugin/ref.inc.phpを更新してください。

Pukiwiki上での記述について

以降、従来通りの記述により、Lightboxの仕組みで画像が表示されます。
#ref(画像ファイル名)

もし、画像をポップしたくない場合はこれも従来通りnolinkを追加してください。
#ref(画像ファイル名,nolink)

ちなみに、この修正はattachrefプラグインにも適用されるため、別途attachrefプラグイン関連のファイルは修正しなくても大丈夫です。
&attachref(画像ファイル名){[添付]};

万が一、正常に動作しない場合は記述ミスが無いか、プラグインファイルを設置した場所に間違いがないか確認してください。

終わりに

思ったより簡単に導入ができてしまいました。

Pukiwikiはこういったカスタマイズでサイトをどんどん進化させていく工程が楽しいですよね。

より軽量でjQueryに依存しない「Luminous」など、他にもLightbox系のプラグインは幾つかありますので気になる人はぜひ調べてみてください。