【WordPress】ギャラリーブロックで拡大画像をポップアップ表示させる方法を解説

カラムは､投稿ページの横幅にもよりますが､「4」以上がおすすめです｡

画像1枚や2枚程度を表示させるだけならギャラリーを使う必要があまりありません｡

また､はじめから大きい画像が表示されていると「ポップアップさせたときと大きさが変わらない」という状態になってしまうので､ギャラリーでポップアップさせるのであれば､最初の状態では小さいサイズで表示させておくのがおすすめです｡

リンク先は､必ず「メディアファイル」にしてください｡

ポップアップで開く画像になるので､「添付ファイルのページ」や「なし」を選択してしまうと拡大する画像がないことになってしまいます｡

画像サイズは､「サムネイル」がおすすめです｡

他のサイズでもいいのですが､はじめから大きい画像を表示させるとページの読み込み速度が遅くなってしまうので､サイズのいちばん小さい「サムネイル」だと多くの画像を表示させる場合でも遅くなりにくいです｡

add_action("wp_enqueue_scripts", "fancybox_scripts");
function fancybox_scripts() {

}

「wp_enqueue_scripts」アクションフックで､CDNからCSSとJavaScriptを読み込みます｡

「fancybox_scripts」は関数名でどんな名前にしてもかまいませんが､他で使っている名前は使えません｡
また､どんな関数なのかわからない名前もつけるべきではないです｡

if( is_singular() ){

}

投稿記事ページ､固定ページにだけ適用されるように､「is_singular」で条件分岐します｡

ギャラリーブロックが不要なページ(トップページや一覧ページ)で読み込むと､ページの読み込み速度が遅くなるため条件を絞っておきます｡

WordPressに慣れているのであれば､「たくさんのページでギャラリーブロックを使う場合は条件を広くする」､「特定のページだけで使う場合は条件を狭くする」など条件分岐を調整をしたほうがサイト全体でページ読み込み速度を最適化できます｡

wp_enqueue_style(
  "fancybox",
  "//cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.css"
);

「wp_enqueue_style」でHTMLのhead内にCSSファイルを読み込みます｡

wp_enqueue_script(
  "fancybox",
  "//cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.umd.js",
  "",
  "",
  true
);

「wp_enqueue_script」でHTMLにJavaScriptファイルを読み込みます｡

基本はHTMLのhead内に読み込まれますが､5番目の引数をtrueにすることでbodyの閉じタグ前に読み込むことができます｡

fancybox.jsをギャラリーブロックに適用するにはHTMLに属性を追加する必要があります｡

<figure class="is-layout-flex wp-block-gallery-1 wp-block-gallery has-nested-images columns-5 is-cropped">
  <figure class="wp-block-image size-thumbnail">
    <a href="(拡大画像ソース)">
      <img decoding="async" width="150" height="150" data-id="82"  src="(画像ソース)" data-src="(画像ソース)" alt="" class="wp-image-82 lazyload" data-aspectratio="150/150">
      <noscript>
        <img decoding="async" width="150" height="150" data-id="82"  src="(画像ソース)" alt="" class="wp-image-82">
      </noscript>
    </a>
    <figcaption class="wp-element-caption">(キャプション)</figcaption>
  </figure>

</figure>

ギャラリーブロックのHTMLソースはこんな感じです｡

フックで書き換えたほうがスマートな感じがしますが､よくわからなかったのでJavaScriptで書き換えることにしました｡

add_action( "wp_enqueue_scripts", "gallery_funcybox_js" );
function gallery_funcybox_js(){
  if( is_singular() ){

  }
}

「wp_enqueue_scripts」アクションフックで､JavaScriptを読み込みます｡
ここでも同様に「is_singular」で対象を投稿記事ページと固定ページに絞っておきます｡

ここでは､JavaScriptファイルを読み込むわけではなく､直接JavaScriptのコードを書いていきます｡

$data = <<<EOT

EOT;

PHPの「ヒアドキュメント」を使うことで､JavaScriptコードが改行をそのまま反映されます｡

「EOT」は"End Of Text"の略で､別の名前でも機能します｡

最終的に直接書いたJavaScriptコードを､$data変数に格納します｡

const parents = document.querySelectorAll(".wp-block-gallery");

ヒアドキュメントの中は､JavaScriptを書いていきます｡

「document.querySelectorAll」で､「.wp-block-gallery」をすべて取得し､「parents」に格納します｡(「parents」はどんな名前でもかまいません)

「.wp-block-gallery」はギャラリーブロックの親要素になります｡

for (let i = 0; i < parents.length; i++) {

}

取得した「.wp-block-gallery」の数だけ､for文でループさせます｡

for文の「i」は変数でどんな名前でもかまいませんが､「i」を使うことが一般的です｡

const children = parents[i].querySelectorAll("figure");

「.wp-block-gallery」の子要素にある「figure」を順番に取得し､「children」に格納します｡(「children」はどんな名前でもかまいません)

for (let j = 0; j < children.length; j++) {

}

for文を入れ子にする場合は「i」を使うと問題があるので､「j」「k」…という変数名を使います｡

children[j].children[0].setAttribute("data-fancybox", "gallery" + i );

ギャラリーブロック内の「figure」の子要素の1番目(jsでは0番目)のタグ(aタグ)に､「setAttribute」で「data-fancybox」属性を追加し､「gallery●」という値を指定します｡(「gallery」の部分はどんな名前でもかまいません)

「gallery●」の●はループさせた順番の数字が入ります｡

children[j].children[0].setAttribute("data-fancybox", "gallery" );

「data-fancybox」属性でグループわけをするので､「gallery」(変数をつけない)とすればfancyboxでポップアップしたときに複数のギャラリーブロックを同じスライドショーにすることができます｡

if( children[j].children[1] ){

}

ギャラリーブロックの画像のキャプション(代替テキスト)は入力されないこともあるので､if文で確認します｡

ギャラリーブロック内の「figure」の子要素の2番目(jsでは1番目)のタグ(figcaptionタグ)があるか判定します｡

const figcaption = children[j].children[1].textContent;

「textContent」で､figcaptionタグのテキストを取得し､「figcaption」に格納します｡(「figcaption」はどんな名前でもかまいません)

 children[j].children[0].setAttribute("data-caption", figcaption);

「setAttribute」で「data-caption」属性を追加し､「figcaption」(figcaptionタグのテキスト)を値に指定します｡

<figure class="is-layout-flex wp-block-gallery-1 wp-block-gallery has-nested-images columns-5 is-cropped">
  <figure class="wp-block-image size-thumbnail">
    <a href="(拡大画像ソース)" data-fancybox="(グループ名)" data-caption="(キャプション)">
      <img decoding="async" width="150" height="150" data-id="82"  src="(画像ソース)" data-src="(画像ソース)" alt="" class="wp-image-82 lazyload" data-aspectratio="150/150">
      <noscript>
        <img decoding="async" width="150" height="150" data-id="82"  src="(画像ソース)" alt="" class="wp-image-82">
      </noscript>
    </a>
    <figcaption class="wp-element-caption">(キャプション)</figcaption>
  </figure>

</figure>

最初のHTMLがJavaScriptの処理でこうなります｡

<a href="(拡大画像ソース)" data-fancybox="(グループ名)" data-caption="(キャプション)">

</a>

やっていることはaタグに､data-fancybox属性とdata-caption属性を追加しているだけです｡

add_action( "wp_enqueue_scripts", "gallery_flex_grow" );
add_action( "admin_enqueue_scripts", "gallery_flex_grow" );
function gallery_flex_grow(){
	if( is_singular() || is_admin() ){

	}
}

「wp_enqueue_scripts」「admin_enqueue_scripts」アクションフックで､JavaScriptを読み込みます｡
「is_singular」で対象を投稿記事ページと固定ページに絞り､で投稿画面でも反映するように「is_admin」も追加します｡

.wp-block-gallery.has-nested-images figure.wp-block-image {
	flex-grow: 0;
}

ギャラリーブロック内の画像のスタイルを､デフォルト「flex-grow:1;」から「flex-grow:0;」にします｡

「flex-grow:1;」は､親要素の全横幅に対して､子要素が自動的に均等幅で表示されます｡

自動的に両端揃えになることがありがたい場合もありますが､子要素数の最終行が列数に不足する場合､最終行だけ大きくなってしまうのが気持ち悪い状態になってしまいます｡

flex-growの初期値は0なので､「flex-grow:0;」とすることで上書きされ､flex-growを指定しないという状態になります｡

ギャラリーブロックの画像は指定した列数でwidthも指定されているので､指定列数にあわせた均等幅にすることができます｡

wp_add_inline_style( "wp-block-library", $data );

「wp_add_inline_style」で､head内の「wp-block-library」のあとに上記のCSSが直接追加されます｡