【WordPress】投稿に添付された画像をすべて取得してギャラリー表示する方法

WordPressでは、投稿に画像をアップロードすると、それらは「添付ファイル」として投稿に関連付けられます。本文中に挿入されていなくても、アップロードされた画像をすべて取得してギャラリー形式で表示することが可能です。

この記事では、現在の投稿に添付されたすべての画像を取得し、フロントエンドにギャラリーとして表示する方法を解説します。

添付画像を取得する関数：get_attached_media()
取得した画像をギャラリー形式で表示する
スタイルを整えて横並びギャラリーにする
ギャラリーとして表示する際の注意点
まとめ

添付画像を取得する関数：get_attached_media()

WordPressには、投稿に紐づくメディア（画像、動画など）を取得するための関数get_attached_media()があります。この関数を使えば、投稿IDに関連付けられたすべての画像を簡単に取得できます。

<?php
$images = get_attached_media('image', get_the_ID());
?>

このコードは、現在表示している投稿に添付されたすべての画像ファイルを取得します。

取得した画像をギャラリー形式で表示する

以下のコードは、取得した画像をループで回してサムネイル付きのギャラリーとして表示する例です。

<div class="post-gallery">
  <?php
  $images = get_attached_media('image', get_the_ID());
  if ($images) :
    foreach ($images as $image) :
      $img_url = wp_get_attachment_image_src($image->ID, 'medium')[0];
      echo '<div class="gallery-item">';
      echo '<img src="' . esc_url($img_url) . '" alt="' . esc_attr(get_the_title($image->ID)) . '">';
      echo '</div>';
    endforeach;
  endif;
  ?>
</div>

ここでは画像サイズに 'medium' を指定していますが、'thumbnail' や 'large' に変更することもできます。

スタイルを整えて横並びギャラリーにする

表示された画像をきれいに横並びにするには、CSSでレイアウトを整えましょう。以下はシンプルなギャラリー用スタイルの例です。

.post-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.gallery-item {
  width: calc(33.333% - 10px);
}

.gallery-item img {
  width: 100%;
  height: auto;
  display: block;
}

レスポンシブ対応を行いたい場合は、@mediaクエリを使って画像の幅を調整しましょう。