投稿で使用された画像を本文下に一覧表示する方法

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

/**
 * ブロック配列を再帰的に走査して画像ブロックのIDを収集
 *
 * @param array $blocks ブロック構造の配列
 * @param array $image_ids 画像IDを保持する参照配列
 * @return void
 */
if (!function_exists('collect_block_image_ids')):
function collect_block_image_ids(array $blocks, array &$image_ids) {
  foreach ($blocks as $block) {
    if (
      isset($block['blockName']) &&
      $block['blockName'] === 'core/image' &&
      !empty($block['attrs']['id'])
    ) {
      $image_id = (int) $block['attrs']['id'];

      if ($image_id > 0) {
        $image_ids[$image_id] = true;
      }
    }

    // インナーブロックを再帰的に走査
    if (!empty($block['innerBlocks']) && is_array($block['innerBlocks'])) {
      collect_block_image_ids($block['innerBlocks'], $image_ids);
    }
  }
}
endif;


/**
 * 本文HTMLから画像IDを収集
 *
 * @param string $content 本文HTML
 * @param array $image_ids 画像IDを保持する参照配列
 * @return void
 */
if (!function_exists('collect_content_image_ids')):
function collect_content_image_ids(string $content, array &$image_ids) {
  if (!preg_match_all('/<img\b[^>]*\bsrc=["\']([^"\']+)["\'][^>]*>/i', $content, $matches)) {
    return;
  }

  foreach ($matches[1] as $image_url) {
    $image_id = attachment_url_to_postid($image_url);

    if ($image_id > 0) {
      $image_ids[$image_id] = true;
    }
  }
}
endif;


// 本文を変更
add_filter('the_content', function ($content) {
  if (!is_singular('post')) {
    return $content;
  }

  $post_id   = get_the_ID();
  $eye_catch = true;
  $image_ids = [];

  // アイキャッチ画像のIDを取得
  if ($eye_catch && has_post_thumbnail($post_id)) {
    $thumb_id = (int) get_post_thumbnail_id($post_id);

    if ($thumb_id > 0) {
      $image_ids[$thumb_id] = true;
    }
  }

  // 本文ブロックを解析して画像ブロックのIDを収集
  $blocks = parse_blocks(get_post_field('post_content', $post_id));
  collect_block_image_ids($blocks, $image_ids);

  // クラシック本文から画像IDを収集
  collect_content_image_ids(get_post_field('post_content', $post_id), $image_ids);

  if (empty($image_ids)) {
    return $content;
  }

  // 画像のズーム表示設定を取得
  $zoom = get_image_zoom_effect();

  ob_start();
  ?>
  <div class="used-images-gallery">
    <h2 class="used-images-gallery__title">この記事で使用されている画像</h2>
    <div class="used-images-gallery__grid">
      <?php foreach (array_keys($image_ids) as $id): ?>
        <?php
        $full = wp_get_attachment_url($id);
        $img  = wp_get_attachment_image($id, 'medium', false, ['class' => 'used-images-gallery__image']);

        if (!$full || !$img) {
          continue;
        }
        ?>

        <figure class="used-images-gallery__item">
          <?php if ($zoom !== 'none') : ?>
            <a href="<?= esc_url($full); ?>" class="used-images-gallery__link">
              <?= $img; ?>
            </a>
          <?php else : ?>
            <?= $img; ?>
          <?php endif; ?>
        </figure>
      <?php endforeach; ?>
    </div>
  </div>
  <?php
  return $content . ob_get_clean();
});

以下のコードをstyle.cssに追加します。

:root {
  --my-column: 4;
}

/* 表示幅≦834pxのときは2列に変更 */
@media (width <= 834px) {
  :root {
    --my-column: 2;
  }
}

.used-images-gallery__grid {
  display: grid;
  gap: 15px;
  grid-template-columns: repeat(var(--my-column), minmax(0, 1fr));
}

.used-images-gallery__item img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}