【WordPress】標準搭載フォトギャラリーで管理画面から操作しつつ、jsのlightbox2拡大表示に対応させる方法
| 更新: 2024/10/19 | 2869文字
今回は昨年~今年にかけて、WordPressの案件で何回かつかってみたものを紹介します。標準搭載のフォトギャラリーを使って、管理画面や投稿から画像を管理しつつ、jsのlightbox2を使って拡大表示したりできる機能を作ってみます。早速内容を確認していきましょう。
目次
WordPressの標準搭載フォトギャラリー機能とは?難点は?
WordPressには、投稿内にショートコードを入れて表示できるフォトギャラリーが搭載されており、設定するとこんな感じでショートコードが出てきます。入っている数値は画像のidで、size=full(サムネでなくフルサイズ)やlink=none(画像リンクするアンカータグ入れない)のようなパラメータも設定されます。
上記のショートコードを投稿内に入れた場合、こんな感じでフォトギャラリーを表示してくれます。
ただし、いろいろ活用しようとすると難点もあって・・・ ソースを見ると、こんな感じで出力要素がほぼ決まっているんですねー。しかもリンク先をonにした場合、リンク先が直接画像urlではなく、画像attachmentのページになります。これだと、スライダーも付けられないし、今回つけようとしているlightbox2も(data-lightbox=〇〇のような指定が必要)、対応できないので、ここをカスタマイズすることにしました。
jsのlightbox2とは?cdnでスクリプトのロードはできる?
webサイトとかでよくある、『最初は小さめのサムネイル画像が並んでいて、クリックするとオーバーレイで拡大表示になる』というのに使われるライブラリです。10年以上前からありますけど、最近の案件のフロントエンド部分で出てくるケースがありました。
使い方は公式サイトからダウンロードしてサーバーにおいても良いんですけど、サクッと使うならCDNからロードしてしまうというのも手です。以下のサイトで『lightbox.min.js・lightbox.css』をロードしておけば、使用可能になります(公式サイトによるとjQuery 1.7 以上も別途必要になるということです)。
lightbox2 公式ページ
https://lokeshdhakar.com/projects/lightbox2/
lightbox2 CDN
https://cdnjs.com/libraries/lightbox2
WordPressの標準搭載フォトギャラリーで、lightbox2拡大表示に対応させる方法
下準備・フォトギャラリーを用意して、画像にキャプションを入れておく
まずはフォトギャラリーを用意します。投稿の『メディア追加・アクション』内部にギャラリーを作成というのがあるので選択。ここで画像を選んで、キャプションを入れておきます。キャプションもlightbox2表示で使うことができます。
次の画面で、『画像のリンク先・カラム数・サイズ』の設定ができますが、管理人は使いませんでした。
独自でhead内にflexboxにするCSS入れておいて横並びにするようにし、サイズ・リンク先などは次のスクリプトで制御します。
サーバーにアップしてもよいんですけど、サクッとやりたかったのでCDNでロードします。テーマheader内headタグでは、lightbox2用CSSをロード。
テーマfooterでは(jqueryなかったので)jquery本体と、lightbox2用javascriptをロード。
これらはis_page(ページid)でページ判定して出力とか、wp_enqueue_scriptで制御してもよいです。
テーマfunctions.phpに、ギャラリーカスタマイズするコードを書く(post_galleryフック)
テーマfunctions.php内のギャラリーカスタマイズするコードは上記のようになりました。画像urlはwp_get_attachment_image_srcで取れますし、キャプション文書はget_postした後post_excerptにアクセスすればokです。これをループで回して出力要素を作ります。
フックをかけるのは>post_galleryです。上手く動かなかったので調査したところ、バッファ使って対応してる例があったのでob_startやob_get_contentsを使っています。優先度でどうにかなるかもしれません。
また、lightbox2対応のため、アンカータグ内にdata-lightbox・data-titleを出力するようにしました。
post_galleryフック(WordPress Developer Resources)
https://developer.wordpress.org/reference/hooks/post_gallery/
ob_get_contents(PHPマニュアル)
https://www.php.net/manual/ja/function.ob-get-contents.php
表示例
上記のようなカスタマイズを行うと、WordPress標準搭載フォトギャラリーでも、クリックしたときにこのように拡大表示できるようになります。 data-title部分にキャプションをセットしておいたため、これもそのまま表示。
また、スライダーのように矢印クリックで別画像に切り替える、というのもokでした。
あとがき・まとめ
- WordPressに標準搭載フォトギャラリーがあるが、出力要素がある程度決まっていて、lightbox2などと組み合わせられない
- フォトギャラリー出力要素はpost_galleryフックでカスタマイズできる
- 出力要素にdata-lightboxを入れてlightbox2対応はできた
まとめると、こんなところでしょうか。フォトギャラリーもhtml部分を操作しないで管理画面投稿から管理できるというのは、なかなかメリットになるのではないかと思います(制作会社への差し替え依頼なども、手間や費用がかかる)。上手く使うと、bxsliderなどのスライダーと標準搭載フォトギャラリー組み合わせたりもできそうです。
【カテゴリ】- WordPressファンクションetc
【タグ】- jQuery, WordPress