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

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

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

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

添付画像を取得する関数: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クエリを使って画像の幅を調整しましょう。

ギャラリーとして表示する際の注意点

  • 本文内に挿入されていない画像もすべて表示されます
  • 画像以外の添付ファイル(PDFなど)は取得されません
  • 画像の表示順はアップロード順になります(必要ならget_children()で並び替え可)

まとめ

WordPressでは、get_attached_media()を使うことで、投稿にアップロードされた画像を簡単に取得し、ギャラリー表示が可能です。テーマのテンプレート内でループ処理とCSSを組み合わせることで、美しい一覧表示を実現できます。

カスタムギャラリー機能を実装したい方や、本文に依存しない画像出力をしたい場合は、今回の方法をぜひ活用してみてください。