【Cocoonカスタマイズ】画像の拡大効果にキャプション表示を追加する方法

はじめに
完成イメージ
実装手順
さいごに

はじめに

以下の質問に回答します。

はじめまして。ローカルでサイト構築に向けて修業中の者です。Googleなどで検索してもなかなか情報を掴めなくご質問させていただきました。 Cocoon標準装備の画像拡大効果ライブラリの中で「 baguetteBox 」を選択時、本家サイト...

ライブラリ「baguetteBox」や「Lightbox」は、画像拡大時にキャプションを表示する機能を備えています。

しかし、メディアライブラリにキャプションを登録したり、Gutenbergエディターで画像にキャプションを追加したりしても、Cocoon設定→画像→「画像の拡大効果」にはキャプションが反映されません。

そこで、「baguetteBox」または「Lightbox」選択時に、拡大表示した画像へキャプションが表示されるよにします。

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

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

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

完成イメージ

実装手順

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

add_filter('render_block_core/image', function ($block_content, $block) {
  $zoom_attr_map = [
    'baguettebox' => 'data-caption',
    'lightbox'    => 'data-title',
  ];

  $zoom = get_image_zoom_effect();
  if (!isset($zoom_attr_map[$zoom])) {
    return $block_content;
  }

  $attr_name = $zoom_attr_map[$zoom];
  $caption_text = '';

  // figcaptionから取得
  if (preg_match('/<figcaption[^>]*>(.*?)<\/figcaption>/is', $block_content, $m)) {
    $caption_text = trim(wp_strip_all_tags($m[1]));
  }

  // figcaptionが空の場合、メディアのキャプションを取得
  if (empty($caption_text) && isset($block['attrs']['id'])) {
    $media_id   = $block['attrs']['id'];
    $attachment = get_post($media_id);

    if ($attachment && !empty($attachment->post_excerpt)) {
      $caption_text = trim(wp_strip_all_tags($attachment->post_excerpt));
    }
  }

  // キャプションが最終的に存在する場合のみ属性を追加
  if (!empty($caption_text)) {
    $processor = new WP_HTML_Tag_Processor($block_content);

    if ($processor->next_tag(['tag_name' => 'a'])) {
      $processor->set_attribute($attr_name, $caption_text);

      return $processor->get_updated_html();
    }
  }

  return $block_content;
}, 10, 2);

さいごに

今回紹介した方法を使えば、Gutenbergエディターで追加した画像キャプションを、「画像の拡大効果」で選択したbaguetteBoxやLightboxに表示させることができます。
これにより、拡大表示した画像でもキャプションが反映され、読者に対して情報や説明を自然に伝えることが可能になります。