pukiwiki1.5.xにLightboxを導入する
お茶ノ湯博士 | 2017年12月18日pukiwikiは wikiの定番となって久しい。
団体、個人レベルで使用されている。また、pukiwikiを基にした派生型のpukiwkiも多く存在する。
pukiwikiの開発は、完成度が高いのか鈍化しているようにも思える。
作動する環境も大きく変わってきた。
PHP5 で動作していたものがPHP7 では動作しなくなった。
ありがたいことに、pukiwiki 1.5.x ではPHP7 に対応している。
しかし、1.4.x バージョンで使用していた便利なプラグインは使えなくなっている。
そこで、pukiwiki 1.5.x 標準のプラグインプログラムを改造して、Lightbox を使用できるようにしてみた。 pukiwikiを理解している人であれば実作業時間は3〜5分程度。
pukiwiki 1.5.x でLightbox が動作するように改造する。
作業内容
・プログラムをダウンロード・コピー
・スキンプログラムを書き換える
・プラグインログラムを書き換える
以上の内容で作業を進める。
画像を表示するための pukiwiki 文法は基本のままで、変更はない。
プログラムをダウンロード・コピー
ダウンロードファイル名 lightbox2-master.zip
ダウンロードURL
http://lokeshdhakar.com/projects/lightbox2/
使用するファイルは3つ (ファイルがあるフォルダー名）
- lightbox.min.js (lightbox2-master/dist/js/)
- lightbox-plus-jquery.min.js (lightbox2-master/dist/js/)
- lightbox.min.css (lightbox2-master/dist/css/)
圧縮ファイルを解答し、使用しているスキンフォルダーにコピーする
サイト名/skin/lightbox2-master/……
スキンファイルを書き換える
書き換えるファイル名 pukiwiki.skin.php (サイト名/skin/)
追加内容 （3行） ファイルを置いた場所を記述
| <script src=”skin/lightbox2-master/js/lightbox-plus-jquery.min.js”></script> <script src=”skin/lightbox2-master/js/lightbox.min.js”></script> <link href=”skin/lightbox2-master/css/lightbox.min.css” rel=”stylesheet” /> |
追加場所
<head>
<title>〜</tltle>
— この当たりに追加 —
</head>
プラグインプログラムを書き換える
書き換えるファイル名 ref.inc.php (サイト名/plugin/)
書き換える内容 2箇所
1) 237行あたり
| $params[‘_body’] = ‘<a href=”‘ . $url . ‘”>’ . $url . ‘</a>’; |
を
| $params[‘_body’] = ‘<a href=”‘ . $url . ‘ rel=”lightbox[aiueo]” ‘ .'”>’ . $url . ‘</a>’; |
に書き換える。
2) 353行あたり
| $params[‘_body’] = “<a href=\”$url2\” title=\”$title\”>{$params[‘_body’]}</a>”; |
を
| $params[‘_body’] = “<a href=\”$url2\” title=\”$title\” rel=’lightbox[aiueo]’>{$params[‘_body’]}</a>”; |
に書き換える。
作業は以上
記述方法
#ref(画像ファイル名)
と通常通り記述するとポップアップで画像が表示される。
ポップアップしたくない場合は
#ref(画像ファイル名,nolink)
と記述する。
自作スキンの場合
サイト名/skin/自作スキンフォルダー/lightbox2-master/…
のように任意のフォルダーにプログラムファイルを置く。
pukiwiki.skin.php には、ファイルのある場所を上記に合わせて書き換える。
その他
1) 旧バージョンの lightbox プログラムの方が動作が若干速いような気がする。
2) 動作しない場合、記述ミスや記述通りにプログラムファイルがある場所を確認する。
3) 上記書き換え文で
rel=”lightbox[aiueo] の aiueo は任意の文字・数字。
最後に、Lightbox 導入は各自の責任でお願いします。
