icon
Let's create! WordPressサイト制作とメンテ/エラー対応から、PHP/CSS/javascriptプログラミング、動画・音・イラスト等制作まで扱うコラム

【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 以上も別途必要になるということです)。

WordPressの標準搭載フォトギャラリーで、lightbox2拡大表示に対応させる方法

下準備・フォトギャラリーを用意して、画像にキャプションを入れておく

まずはフォトギャラリーを用意します。投稿の『メディア追加・アクション』内部にギャラリーを作成というのがあるので選択。ここで画像を選んで、キャプションを入れておきます。キャプションもlightbox2表示で使うことができます

次の画面で、『画像のリンク先・カラム数・サイズ』の設定ができますが、管理人は使いませんでした。
独自でhead内にflexboxにするCSS入れておいて横並びにするようにし、サイズ・リンク先などは次のスクリプトで制御します。

lightbox2用のスクリプトをhead、footerでロード(CDN使用)

サーバーにアップしてもよいんですけど、サクッとやりたかったので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を出力するようにしました。

表示例

上記のようなカスタマイズを行うと、WordPress標準搭載フォトギャラリーでも、クリックしたときにこのように拡大表示できるようになります。 data-title部分にキャプションをセットしておいたため、これもそのまま表示。

また、スライダーのように矢印クリックで別画像に切り替える、というのもokでした。

あとがき・まとめ

  • WordPressに標準搭載フォトギャラリーがあるが、出力要素がある程度決まっていて、lightbox2などと組み合わせられない
  • フォトギャラリー出力要素はpost_galleryフックでカスタマイズできる
  • 出力要素にdata-lightboxを入れてlightbox2対応はできた

まとめると、こんなところでしょうか。フォトギャラリーもhtml部分を操作しないで管理画面投稿から管理できるというのは、なかなかメリットになるのではないかと思います(制作会社への差し替え依頼なども、手間や費用がかかる)。上手く使うと、bxsliderなどのスライダーと標準搭載フォトギャラリー組み合わせたりもできそうです。


【カテゴリ】- WordPressファンクションetc
【タグ】- ,

関連記事