ひっそり動かしてるOpenPNEをバージョンアップしました。2.4から2.8なのでかなり久々。作業はアップグレード用のSQLを２回分走らせてファイルを入れ替えたらスンナリ動いてくれました。付属のドキュメントどおり。

長期間バージョンアップしてなかったというコトは、チョコチョコだったとはいえそれなりにカスタマイズした部分がたまってるわけです。ファイルを入れ替えてるので当然その辺はもう一回やる必要があります。まぁ、これがバージョンアップしてなかった理由のひとつでもあるわけなんですが。:neutral:

そんなわけでテンプレートを触るついでに、以前から計画してたLightboxを導入してみたところ、なかなかいい感じになりました。以下は作業メモです。

まずはLightbox自体を読み込ませます。と、今回私はLightbox Plusを使いましたのでまずは本体をダウンロード。配布ページにも書かれていますが、ヘッダへの追記と画像へのリンクへrel=”lightbox”属性を追記することで機能します。

ヘッダへの追記はOpenPNEの管理画面からデザイン→HTML挿入→HTML挿入(HTML head内)を利用します。もちろんPC用。スクリプトと、もしかするとcssもリンクしておくのがいいかも。

ちょっと面倒なのはrel属性。こちらはテンプレートを修正します。日記のページだとfh_diaryの438行目から、2.8.1ならclass=”padding_s”を検索して、ヒットした行のtarget=_blankをrel=”lightbox”へ書き換えます。fh_diaryの場合、日記本文とコメントのそれぞれ３行ずつあるのであわせて６行になります。コミュニティのトピックとイベントにも適用したい場合はそれぞれのテンプレートをおなじように編集してください。c_event_detailとc_topic_detailかな。一覧ページはそれぞれの_listです。なので全部やると６ファイル？どれもやりかたはいっしょです。

これでとりあえずは機能が有効になりますが、OpenPNEでは３枚まで同時に画像を貼れます。これをグループ指定すればLightbox状態（？）からスライドのように表示することができます。グループ指定はrel属性をrel=”lightbox数字”と指定します。それぞれの写真は本文と紐づけられているので本文のidを利用すればグループ指定できそうです。具体的には日記の場合

rel="lightbox({$target_diary.c_diary_id})"

で指定できるようです。日記のコメントの場合は

rel="lightbox({$item.c_diary_comment_id})"

になります。イベントとトピックも同様にc_topic.c_commu_topic_idとitem.c_commu_topic_comment_id。イベントもtopicって名前のようです。探すときは近くにある削除や編集用のボタンやチェックボックスを手がかりに。

触るのはテンプレートやHTMLだけですので、多少まちがっても表示が崩れるだけでデータ自体には影響ないとは思いますが、やるときはご自分の責任でお願いします。 😉