WordPress標準のギャラリーブロック、画像ブロックと同様にギャラリー全体のリンク先に「画像をメディアファイルにリンク」と指定することで中の画像をクリックした時に拡大して表示できるようになるのは、このページに辿りついた方なら理解されているでしょう。
これを専門用語でライトボックスと言うのですが、表示されるのはクリックした画像だけで、別の画像の拡大表示をするには一旦ライトボックスを閉じて開きなおすという手順が必要となり、訪問した人からすれば何だか使い勝手が悪い感じがします。
そこで今回は、このライトボックス機能を拡張して、ライトボックス表示した際に前後の画像への変更ボタンを表示させてギャラリー内の画像を自由に切り替えられるようにする方法を紹介します。
当初ライトボックス何とかならないか？と思った段階でたどり着いたのが「Luminous」の使い方解説！Lightboxをカンタン実装 （jQuery非依存）というページで、実装してみたものの、ライトボックス内での画像切り替えをスムーズにできなかったり（パッと画像が切り替わる）、画像のズーム機能が使えなかったりしたので、今回は「GLightbox」で実装する方法を紹介します。
一応文末に「Luminousを使ったギャラリーのページ送りの実装方法」として、Luminousを使ったコードも紹介しておくので、実装しやすく使いやすい方を採用してくださいね。
前後移動可能なライトボックスのサンプル
以下が実際にギャラリーに今回の機能を追加した実装サンプルです。どれかの画像をクリックするとライトボックスが起動し、左右にある前後リンクでギャラリー内の画像へ移動できるのを確認いただけると思います。
前後移動可能なライトボックスを実装するためのコード
画像の移動機能を実装するため、「GLightbox」というライトボックス表示に特化したJavaScriptライブラリを使用します。
必要なファイルをダウンロードしてテーマ内に含めて実装する手段もあるのですが、読み込みできないなどのトラブルが発生する可能性もありますし、非常に軽いライブラリなので、今回はCDNから取得して読み込むようにします。
スクリプト用ファイルを作ってJSコードを追加する
有効化しているテーマのディレクトリ直下（通常functions.phpやstyle.cssのある場所と同じ階層）に「gallery-switch-image.js」というファイルを作成します。
作成したら、以下のコードをファイル内に追加します。
document.addEventListener('DOMContentLoaded', function () {
const galleries = document.querySelectorAll('.wp-block-gallery');
galleries.forEach((gallery, index) => {
// 画像リンクを抽出
const links = gallery.querySelectorAll('a[href$=".jpg"], a[href$=".jpeg"], a[href$=".png"], a[href$=".webp"]');
// グループ名を設定
const groupName = `gallery-${index}`;
links.forEach(link => {
link.setAttribute('data-glightbox', groupName);
});
// ギャラリーごとに初期化
GLightbox({
selector: `[data-glightbox="${groupName}"]`,
loop: true,
slideEffect: 'fade',
zoomable: false
});
});
});機能実装用のコードを追加する
以下のコードを有効化しているテーマのfunctions.phpへ追加します。
function pwcn_enqueue_glightbox() {
// GLightboxのCSSを読み込む
wp_enqueue_style('glightbox-css', 'https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css');
// GLightboxのJSを読み込む
wp_enqueue_script('glightbox-js', 'https://cdn.jsdelivr.net/npm/glightbox/dist/js/glightbox.min.js', array(), null, true);
wp_enqueue_script('gallery-switch-image-js', get_theme_file_uri('/gallery-switch-image.js'), array('glightbox-js'), null, true);
}
add_action('wp_enqueue_scripts', 'pwcn_enqueue_glightbox');動作確認する
JSファイルの作成とコード追加、テーマのfunctions.phpへのコード追加が終わったら、投稿を新規作成するか、編集中の投稿編集画面を開きなおし、ギャラリーブロックを挿入して、ギャラリーのリンク先、またはギャラリー内のすべての画像が「画像をメディアファイルにリンク」になっていることを確認して、プレビューなどで開いてみてください。
ギャラリーブロックを選択して、リンクを「画像をメディアファイルにリンク」にすると、ギャラリー内の画像すべてのリンクが「画像をメディアファイルにリンク」になりますが、画像個別にリンクを「画像をメディアファイルにリンク」にしても構いません（リンクのないものはライトボックス表示の対象外になります）
問題がなければ前項で表示したサンプルのように動作するはずです。もしも前後のリンクボタンが表示されなかったり動作しなかったりするときは「Ctrl」＋「F5」でキャッシュをクリアしてみてください。
１点、すぐ上に書いていますが、ギャラリー内の画像を入れ替えた時や追加した時は、その画像のリンクが「画像をメディアファイルにリンク」に設定しないとライトボックスに表示されませんのでご注意を！
動作をカスタマイズしたいときは
今回はサンプルのように、ライトボックス表示で、前後の画像への移動ボタンを表示させ、クリックされたら次（または前）の画像をフェードアウト＆フェードインで表示させ、最後の画像になったら先頭の画像に移動するという形にしており、それは「gallery-switch-image.js」の以下の部分で指定しています。
// ギャラリーごとに初期化
GLightbox({
selector: `[data-glightbox="${groupName}"]`,
loop: true,
slideEffect: 'fade',
zoomable: false
});GitHubに公開されている「GLightbox」の「Lightbox Options」の部分に設定できるオプションと値が掲載されていますので、追加・変更をしてご自身の利用環境に合った形にしてください。
テストした感触では、「loop: true」にした状態で「slideEffect: ‘slide’」にすると、最後の画像になった時に逆にスライドしたり、サササーっと画像が早送りっぽくなったりするのでループさせるならフェードにした方がいいと思います
補足：ページ内にある複数のギャラリーの画像を一緒に切り替え表示してよければ
ここまでの実装では、ページ内に複数のギャラリーが存在した場合、それぞれのギャラリーに自動でIDを振って別々にライトボックスが表示されるようにするため、テーマ内に別のjsファイルを作って読み込ませる必要がありましたが、ページ内のギャラリーにある画像すべてを一緒にスライド表示してよけば、ファイルを作らず以下のコードを有効化しているテーマのfunctions.phpへ追加するだけで実装できます。
function pwcn_enqueue_glightbox() {
// GLightboxのCSSを読み込む
wp_enqueue_style('glightbox-css', 'https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css');
// GLightboxのJSを読み込む
wp_enqueue_script('glightbox-js', 'https://cdn.jsdelivr.net/npm/glightbox/dist/js/glightbox.min.js', array(), null, true);
// 実行コード
$custom_script_pre = "
document.addEventListener('DOMContentLoaded', function () {
const lightbox = GLightbox({
selector: '.wp-block-gallery a',
touchNavigation: true,
loop: true,
zoomable: true
});
});
";
//タブを除去
$custom_script_deltab = preg_replace('/\t+/', '', $custom_script_pre);
//改行を除去
$script = str_replace(PHP_EOL, '', $custom_script_deltab);
wp_add_inline_script('glightbox-js', $script);
}
add_action('wp_enqueue_scripts', 'pwcn_enqueue_glightbox');外部ファイルを読み込む必要がないため手順通りにファイルやコードを追加したのに動かないというトラブルは回避できますが、恐らくギャラリーごとに含まれる画像を切り替え表示させたいでしょうから、あまり実用的ではないかも知れません。
Luminousを使ったギャラリーのページ送りの実装方法
上記で追加したコードの代わりに以下のコードを追加してください。これまで紹介した「GLightbox」での実装がうまくいっている場合にはコードの入れ替えだけで動作すると思います。
function pwcn_theme_luminous_every_gallery_block() {
wp_enqueue_style(
'luminous-css',
'https://cdn.jsdelivr.net/npm/luminous-lightbox@2.4.0/dist/luminous-basic.min.css'
);
wp_enqueue_script(
'luminous-js',
'https://cdn.jsdelivr.net/npm/luminous-lightbox@2.4.0/dist/luminous.min.js',
array(),
'2.4.0',
true
);
$custom_script_pre = "
document.addEventListener('DOMContentLoaded', function () {
const galleries = document.querySelectorAll('.wp-block-gallery');
if (galleries.length > 0 && typeof LuminousGallery !== 'undefined') {
galleries.forEach(gallery => {
const links = gallery.querySelectorAll('a');
if (links.length > 0) {
new LuminousGallery(links, {}, {
arrowNavigation: true
});
}
});
}
});";
//タブを除去
$custom_script_deltab = preg_replace('/\t+/', '', $custom_script_pre);
//改行を除去
$script = str_replace(PHP_EOL, '', $custom_script_deltab);
wp_add_inline_script('luminous-js', $script);
}
add_action('wp_enqueue_scripts', 'pwcn_theme_luminous_every_gallery_block');いかがでしょう？冒頭で書いた通り、画像がパッパッパッと入れ替わる感じですよね。CSSでアニメーションさせてみようと思い試行錯誤しましたが、このライブラリは、画像切り替え時に画像のURLが変わるだけで、HTML上に「これが有効になってる画像だぞ」という印がない（HTML上のクラスやタグの変化がない）ためカスタマイズできませんでした。
