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

はじめに

Cocoon設定→画像→画像の拡大効果は「画像ファイルへのリンク」が設定された「画像」ブロックにのみ拡大効果が適用されます。

そのため、全ての画像に効果を適用するには、手動でリンクを追加する必要があります。

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

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

Cocoonの画像拡大効果（Lightbox）ライブラリ各々お勧めの使いどころ

写真を暗転し拡大して表示するLightbox効果のあるJavaScriptライブラリの使いどころを紹介しています。

wp-cocoon.com

実装手順

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

add_filter('render_block_core/image', function ($block_content, $block) {
  // 既にリンクがある場合
  if (strpos($block_content, '<a ') !== false) {
    return $block_content;
  }

  // 添付ファイルページへのリンクが有効の場合
  if (isset($block['attrs']['linkDestination']) && $block['attrs']['linkDestination'] !== 'none') {
    return $block_content;
  }

  // WordPress標準のライトボックスが有効の場合
  if (isset($block['attrs']['lightbox']['enabled']) && $block['attrs']['lightbox']['enabled'] === true) {
    return $block_content;
  }

  // 拡大効果が有効でない場合
  if (get_image_zoom_effect() === 'none') {
    return $block_content;
  }

  // 画像URLを取得
  $image_url = wp_get_attachment_url($block['attrs']['id']);
  if (!$image_url) {
    return $block_content;
  }

  // リンクを追加
  $pattern = '/(<img[^>]+>)/i';
  $replacement = '<a href="' . esc_url($image_url) . '">$1</a>';
  $block_content = preg_replace($pattern, $replacement, $block_content);

  return $block_content;
}, 10, 2);

参考：「ギャラリー」ブロックのリンク設定

「ギャラリー」ブロックの場合、ブロックツールバーの「リンク」から「画像をメディアファイルにリンク」を選択すると、その設定がギャラリー内の全ての「画像」ブロックに適用されます（図1参照）。

さいごに

今回紹介した方法を使えば、手動でリンクを設定しなくても、拡大効果を全ての「画像」ブロックに自動で適用できます。
画像が多いサイトや更新頻度の高いブログにおいて、作業の手間を省きつつ見た目の統一感も保てるため、非常に実用的です。