ウィジェットの画像をLightboxで拡大表示する方法

はじめに

Cocoon設定→画像→本文画像設定「画像の拡大効果」は、投稿や固定ページの本文内にしか適用されません。
これはWordPress標準の「クリックで拡大」機能も同様です。

そのため、「ギャラリー」ウィジェットで画像をクリックすると、メディアファイルそのものへ移動してしまい、ブラウザの「戻る」ボタンを押さないと元のページに戻れないという不便さがあります。

そこで、本文以外の場所にある「メディアファイルへのリンク」を持つ画像全てに拡大効果が適用されるようにします（図1参照）。

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

実装手順

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

// 画像の拡大効果を有効
add_filter('is_lightboxable_page', '__return_true');


// 画像リンクに属性を追加
add_filter('wp_get_attachment_link', function ($html) {
  if (is_feed()) {
    return $html;
  }

  $map = [
    'is_lightbox_effect_enable'  => 'add_lightbox_property',
    'is_lity_effect_enable'      => 'add_lity_property',
    'is_spotlight_effect_enable' => 'add_spotlight_property',
  ];

  foreach ($map as $is_enabled => $add_property) {
    if ($is_enabled()) {
      return $add_property($html);
    }
  }

  return $html;
});


// スクリプトの内容を変更
add_filter('script_loader_tag', function ($tag, $handle, $src) {
  if ($handle !== 'baguettebox-js') {
    return $tag;
  }

  return preg_replace('/(\.entry-content)/', '$1, .widget_media_gallery', $tag);
}, 10, 3);

注意点

前述の通り、「ギャラリー」ウィジェットはWordPress標準のLightbox機能（クリックで拡大）に対応していません。
そのため、代替案としてパターンに「ギャラリー」ブロックを配置する方法でも実現可能です。

さいごに

今回紹介した方法を使えば、本文以外のウィジェットエリアなどにある画像も、滑らかなポップアップ表示で閲覧できるようになります。
Cocoonの利便性をさらに高めたい方は、ぜひ試してみてください。