「画像」ブロックにWordPress標準の拡大機能を自動で設定する方法

はじめに
実装手順
- 注意点
さいごに

はじめに

WordPress6.4 から、「画像」ブロックにLightbox機能（クリックで拡大）が追加されました（図1参照）。

しかし、全ての画像に効果を適用するには、手動で設定する必要があります。

そこで、全ての「画像」ブロックへ自動的に「クリックで拡大」設定を付与します。

この記事では、この方法について説明します。

実装手順

以下のコードをfunctions.phpに追加します。

add_filter('render_block_core/image', function ($block_content, $block) {
  if (isset($block['attrs']['lightbox']['enabled']) && $block['attrs']['lightbox']['enabled']) {
    return $block_content;
  }

  // Lightbox効果を追加
  $block['attrs']['lightbox'] = ['enabled' => true];

  return render_block($block);
}, 10, 2);

注意点

表1に示すCocoonの画像拡大効果と異なり、この方法では画像は1枚単位で表示され、次の画像へ移動するボタンは表示されません。

Cocoon設定

設定	大項目	項目	設定値
画像	画像の拡大効果	Lightbox	オン

「画像」ブロックに画像の拡大効果を自動で設定する方法

「Cocoonの画像に拡大効果用のリンクを自動追加する方法」を解説。Cocoon設定で画像の拡大効果を有効にした際、「画像」ブロックへメディアファイルへのリンクを自動で追加する方法や、既存のリンク・WordPress標準のライトボックスが設定されている場合の扱い、ギャラリーブロックでの注意点を分かりやすく紹介します。

しかし、「ギャラリー」ブロックは、WordPress 7.0から拡大表示時に画像切り替え（前後の次へ・戻る）ボタンが追加され、より便利になりました（図2参照）。

さいごに

今回紹介した方法を使えば、全ての「画像」ブロックに自動でWordPress標準の拡大機能（Lightbox）を設定できます。
手動でリンクを追加する手間が省け、記事内の画像をクリックするだけで拡大表示させることが可能です。