「画像」ブロックに添付ファイルページへのリンクを自動で設定する方法

Cocoonカスタマイズ集
この記事は約2分で読めます。
記事内に広告が含まれています。

はじめに

Gutenbergエディター

「画像」ブロックに「添付ファイルページへのリンク」を設定することができます(図1参照)。
添付ファイルページではコメントを有効にしておくと、読者から画像について直接コメントをもらうことも可能です。

しかし、全ての画像にリンクを設定するには、手動で操作する必要があります。

そこで、全ての「画像」ブロックに自動で添付ファイルページへのリンクを追加します。

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

実装手順

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

add_filter('render_block_core/image', function ($block_content, $block) {
  // 画像タグにすでにリンクが含まれている場合、または画像IDが取得できない場合はそのまま返す
  if (strpos($block_content, '<a ') !== false || empty($block['attrs']['id'])) {
    return $block_content;
  }

  // 画像の添付ファイルページのパーマリンクを取得
  $attachment_page_url = get_attachment_link($block['attrs']['id']);

  // 取得した添付ファイルページのURLをリンクとして画像全体に付与
  $pattern       = '/(<img[^>]+>)/i';
  $replacement   = '<a href="' . esc_url($attachment_page_url) . '">$1</a>';
  $block_content = preg_replace($pattern, $replacement, $block_content);

  return $block_content;
}, 10, 2);

さいごに

今回紹介した方法を使えば、全ての「画像」ブロックに自動で添付ファイルページリンクを設定できます。
手動でリンクを追加する手間が省け、記事内の画像に対して読者からコメントをもらうことも可能です。

タイトルとURLをコピーしました