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

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

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

ブロックエディタでは画像がpost_parentに紐付かないことがある
この手法は、画像のpost_parentが投稿IDに設定されていることが前提です。しかしWordPressのGutenberg公式Issueトラッカーで確認したところ、ブロックエディタの画像ブロックでアップロードした画像は、post_parentが投稿に紐付けられないことが多いという既知の制約があります。クラシックエディタの「メディアを追加」では自動的に投稿へ紐付いていましたが、Gutenbergではこの挙動が一貫していません。メディアライブラリに画像は存在するのに、この記事の方法では取得できない（一覧に出てこない）ケースがあることを念頭に置いてください。

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

添付画像を取得する関数：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でレイアウトを整えましょう。以下はシンプルなギャラリー用スタイルの例です。

style.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クエリを使って画像の幅を調整しましょう。

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

本文内に挿入されていない画像もすべて表示されます（ただし前述の通り、ブロックエディタではpost_parentが紐付かない画像は対象外になります）
画像以外の添付ファイル（PDFなど）は取得されません
画像の表示順はデフォルトでmenu_order順です。多くの画像はmenu_order=0のままのため結果的にアップロード順に近く見えることが多いですが、保証された順序ではありません。確実に日付順にしたい場合はget_children()で’orderby’ => ‘date’を明示的に指定してください

よくある質問（FAQ）

Q記事に添付された全画像を取得するには？

Aget_attached_media(‘image’, $post_id)で添付画像の配列を取得します。またはget_posts(array(‘post_type’ => ‘attachment’, ‘post_mime_type’ => ‘image’, ‘post_parent’ => $post_id))でも同様に取得できます。

Q添付画像をサムネイルサイズでギャラリー表示するコードは？

A取得した添付ファイルをforeachでループし、wp_get_attachment_image($att->ID, ‘thumbnail’)でサムネイルを出力します。lightbox連携にはdata-lightbox属性を追加します。

Qアイキャッチ画像を除いた添付画像のみを取得するには？

Aget_post_thumbnail_id($post_id)でアイキャッチIDを取得し、添付画像リストからarray_filterで除外します。array_filter($attachments, function($a) use ($thumb_id){ return $a->ID !== $thumb_id; })のように実装します。

まとめ

WordPressでは、get_attached_media()を使うことで、投稿にアップロードされた画像を簡単に取得し、ギャラリー表示が可能です。テーマのテンプレート内でループ処理とCSSを組み合わせることで、美しい一覧表示を実現できます。ただしブロックエディタ環境では、画像がpost_parentに紐付かず取得対象から漏れる場合がある点に注意してください。

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