ハシウェブ

Web制作、プログラミングに関する情報を発信するブログ

アフィリエイト広告を利用しています

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

この記事は、最初の投稿から1年以上が経過しています。

最終更新から488日が経過しています。

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

「WordPressのギャラリーブロックをかっこよくしたい」

「ギャラリーブロックの画像をポップアップ表示できないかな?」

悩み

こんな悩みにお答えします。

functions.phpにこの記事で解説するコードをコピペするだけで、ギャラリーブロックを以下のページのようなポップアップに対応したギャラリーにすることができます。

ギャラリーブロックにポップアップを対応させたページ

ポップアップには、funcybox.jsを使います。

デモページ作成時の環境は、WordPress:6.1.1、テーマSWELL:2.7.2.1、PHP:7.4.33です。

この記事で解説する方法は、PHP、JavaScriptの知識がない人でも利用できます。
ただし、使用しているテーマやプラグインの相性によっては不具合がおきる可能性はありますので、バックアップをとり、すぐ元に戻せる状態にして利用ください。

この記事を読み終えると、ギャラリーブロックにfancyboxを適用しポップアップ表示させることで、投稿ページをかっこよくすることができます。

私は、2015年からWeb制作の仕事をはじめて、200件ほどのWebサイトを制作してきました。
その間、いろいろな失敗を繰り返し、クライアントからのフィードバックや本などで勉強することにより、多くのノウハウを得ることができました。

目次
  1. ギャラリーブロックで拡大画像をポップアップ表示させる方法
    1. デフォルトのギャラリーブロックは拡大がかっこよくない
    2. ギャラリーブロックを設定する
      1. カラム
      2. リンク先
      3. 画像サイズ
    3. functions.phpにソースコードを貼り付ける
      1. 【解説】fancybox CSSとJavaScriptの読込
      2. 【解説】ギャラリーブロックのHTMLをfancybox対応に書き換え
      3. 【解説】(おまけ)ギャラリーブロックの画像がすべて同じサイズになるようにCSSを追加(一覧表示の最終行を拡大しない)
  2. まとめ

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

デフォルトのギャラリーブロックは拡大がかっこよくない

WordPressのブロックエディタにデフォルトであるギャラリーブロックはそのままでも拡大表示をさせることはできます。

ただし拡大画像は画像自体を開くだけなのでかっこよくありません。

かっこよくないだけでなく、ギャラリーでありながら拡大画像を「開く」、「閉じる」を何度も繰り返さないといけないため、ユーザーの操作性も悪いです。

これをfuncybox.jsを使って改善したいと思います

funcybox.jsについては以下の記事で解説していますが、今回のギャラリーブロックのカスタマイズには不要なので安心してください。

fancybox3の使い方、カスタマイズ例(v3.5) ポップアップ簡単設置【jQuery】

モーダルウインドウ・ポップアップウインドウを簡単に設置したいですか?この記事では、jQueryプラグインfancyboxの使い方を紹介しています。ぜひご覧ください。

「もっとカスタマイズをしたい」という場合には参考になると思いますが、バージョンなどが違うとコードの書き方も変わるので注意してください。

ギャラリーブロックを設定する

投稿または固定ページの投稿画面を開きます。

ギャラリーブロックを選択します。

ギャラリーで表示したい画像を選択します。

ギャラリーブロックを選択した状態で、右サイドバーの設定をします。

カラム

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

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

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

リンク先

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

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

画像サイズ

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

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

functions.phpにソースコードを貼り付ける

WordPress管理画面・左サイドバーの「外観」「テーマエディター」をクリックします。

テーマを編集画面で右サイドバーにある「テーマのための関数 (functions.php)」をクリックします。

functions.phpのいちばん下に、以下のソースコードをコピペします。

ギャラリーブロックにポップアップを対応させたページ

// fancybox CSSとJSの読込
add_action("wp_enqueue_scripts", "fancybox_scripts");
function fancybox_scripts() {
	
	if( is_singular() ){
		// CDN fancybox css
		wp_enqueue_style(
			"fancybox",
			"//cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.css"
		);
		// CDN fancybox js
		wp_enqueue_script(
			"fancybox",
			"//cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.umd.js",
			"",
			"",
			true
		);
	}
}

// ギャラリーブロックのHTMLをfancybox対応に書き換え
add_action( "wp_enqueue_scripts", "gallery_funcybox_js" );
function gallery_funcybox_js(){
	if( is_singular() ){
$data = <<<EOT
const parents = document.querySelectorAll(".wp-block-gallery");
for (let i = 0; i < parents.length; i++) {
	const children = parents[i].querySelectorAll("figure");

	for (let j = 0; j < children.length; j++) {
		children[j].children[0].setAttribute("data-fancybox", "gallery" + i );

		if( children[j].children[1] ){
			const figcaption = children[j].children[1].textContent;
			children[j].children[0].setAttribute("data-caption", figcaption);
		}
	}
}
EOT;
		wp_add_inline_script( "fancybox", $data );
	}
}

// ギャラリーブロックの画像がすべて同じサイズにする(一覧表示の最終行を拡大しない)
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() ){
$data = <<<EOT
.wp-block-gallery.has-nested-images figure.wp-block-image {
	flex-grow: 0;
}
EOT;
		wp_add_inline_style( "wp-block-library", $data );
	}
}

意味がわからなくても上記のソースコードを貼り付ければポップアップは動きます。

ここからはソースコードの解説です。

【解説】fancybox CSSとJavaScriptの読込

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の閉じタグ前に読み込むことができます。

【解説】ギャラリーブロックのHTMLをfancybox対応に書き換え

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属性を追加しているだけです。

【解説】(おまけ)ギャラリーブロックの画像がすべて同じサイズになるようにCSSを追加(一覧表示の最終行を拡大しない)

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が直接追加されます。

まとめ

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

まとめると…

  • 投稿画面でギャラリーブロックを設定する
    • 【必須】リンク先:メディアファイル
    • 【推奨】カラム:4
    • 【推奨】画像サイズ:サムネイル
  • functions.phpにコードをコピペする
    • CDNからfancybox.jsのCSSとJavaScriptを読み込む
    • ギャラリーブロックのHTMLをfancybox対応に書き換え
    • (おまけ)ギャラリーブロックの画像がすべて同じサイズになるようにCSSを追加(一覧表示の最終行を拡大しない)

ギャラリーブロックにポップアップを対応させたページ

ギャラリーブロックにfancyboxを適用しポップアップ表示させることで投稿ページをかっこよくすることができます。

【WordPress】ブロックパターンをテンプレートにする方法を解説

WordPressでブロックパターンを投稿ページのテンプレートにしたいですか?この記事では、ブロックパターンを設定する方法と、そのブロックパターンを投稿ページのテンプレートにする方法を解説しています。ぜひご覧ください。