プラグインなしで「画像」ブロックにExif情報を表示する方法

以下に手順を示します。

1. 「画像」ブロックを配置します。
2. 高度な設定→CSSクラスにexifと入力します。

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

add_filter('render_block_core/image', function ($block_content, $block) {
  if (empty($block['attrs']['className']) || strpos($block['attrs']['className'], 'exif') === false) {
    return $block_content;
  }

  if (empty($block['attrs']['id'])) {
    return $block_content;
  }

  $image_id = $block['attrs']['id'];
  $meta     = wp_get_attachment_metadata($image_id);

  if (empty($meta['image_meta'])) {
    return $block_content;
  }

  $exif_data  = $meta['image_meta'];
  $exif_items = [];

  // カメラ名
  if (!empty($exif_data['camera'])) {
    $exif_items[] = $exif_data['camera'];
  }

  // シャッター速度
  if (!empty($exif_data['shutter_speed']) && (float) $exif_data['shutter_speed'] > 0) {
    $shutter_speed = (float) $exif_data['shutter_speed'];
    $exif_items[]  = '1/' . round(1 / $shutter_speed) . 'sec';
  }

  // 絞り値
  if (!empty($exif_data['aperture'])) {
    $exif_items[] = 'f/' . $exif_data['aperture'];
  }

  // ISO感度
  if (!empty($exif_data['iso'])) {
    $exif_items[] = 'ISO' . $exif_data['iso'];
  }

  // 焦点距離
  if (!empty($exif_data['focal_length'])) {
    $exif_items[] = $exif_data['focal_length'] . 'mm';
  }

  if (empty($exif_items)) {
    return $block_content;
  }

  ob_start();
  ?>
  <ul class="exif">
    <?php foreach ($exif_items as $item): ?>
      <li class="exif__item"><?= esc_html($item); ?></li>
    <?php endforeach; ?>
  </ul>
  <?php
  return $block_content . ob_get_clean();
}, 10, 2);

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

.exif {
  margin: 0;
  padding: 0;
  text-align: center;

  .exif__item {
    display: inline-block;
  }
}