WordPressで投稿内の最初の画像を取得/出力する方法

WordPressで投稿一覧などにサムネイルを表示する際は、アイキャッチ画像を利用することが多いです。しかし、アイキャッチ画像ではなく、投稿内の1枚目の画像をサムネイルとして使いたいというケースもあると思います。

Auto Post ThumbnailやXO Featured Image Toolsを使えば、投稿内の画像をアイキャッチ画像に自動登録してくれます。これらのプラグインを使えば、投稿一覧でアイキャッチ画像をサムネイルとして表示している場合でも対応可能です。

ですが、テーマ側で対処することも可能なので、その方法をご紹介したいと思います。プラグインを使いたくないとか、もっと柔軟にカスタマイズしたいという場合は、ぜひ参考にしていただければと思います。

WordPressで投稿の最初の画像を取得/出力する方法

まずは、適用しているテーマのfunctions.phpに以下を追加します。

function first_image() {
  global $post, $posts;
  $first_img = '';
  ob_start();
  ob_end_clean();
  preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
  $first_img = $matches[1][0];
  if(empty($first_img)){
    $first_img = '';
  }
  return $first_img;
}

上記の”$matches[1][0]”に1枚目の画像URLが入っています。”$matches[1][1]”が2枚目の画像URL、”$matches[1][2]”が3枚目の画像URLです。

続いて、投稿一覧などの画像を出力したい箇所に以下を追加します。

<?php if(first_image()): ?>
  <img src="<?php echo first_image(); ?>" alt="<?php the_title(); ?>">
<?php endif; ?>

投稿内に画像があれば、最初の画像が出力されます。そもそも投稿内に画像がなければ、何も出力されません。

最初の画像だけでなくすべての画像を取得したい場合

投稿内のすべての画像を取得/出力したい場合は、functions.phpに以下を追加します。

function post_images() {
  global $post, $posts;
  ob_start();
  ob_end_clean();
  preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
  return $matches[1];
}

これで投稿内のすべての画像URLが返ってくるようになります。

画像を出力したいところに、以下を追加すればすべての画像が出力されます。

<?php 
  if(post_images()):
  $images = post_images();
  foreach($images as $img):
?>
  <img src="<?php echo $img; ?>" alt="<?php the_title(); ?>">
<?php endforeach; endif; ?>

あとがき

プラグインを使わなくても、割と簡単に投稿内の画像を取得できますね。

テーマ側で対応してより細かくカスタマイズしたい時は、ぜひお試しください。

WordPressで投稿内の最初の画像を取得/出力する方法