WordPressで記事本文の最初の画像をサムネイルとして取得する方法

WordPressでは、記事本文に設定されている最初の画像を取得し、記事一覧などのサムネイルとして表示できます。

この記事では、functions.php に関数を追加し、記事本文から最初の画像IDを取得して、指定したサイズの画像URLを取得する方法を紹介します。

記事内の最初の画像を取得するコード

functions.phpにコードを追加

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

この関数では、記事本文に含まれる最初の wp-image-画像ID を取得し、その画像のURLを返します。

記事本文に画像がない場合や、画像URLを取得できない場合は、default.jpg のURLを返します。
default.jpg は、テーマ内の imagesフォルダなどにあらかじめ用意しておきます。

取得した画像を表示する

サムネイルサイズで取得する

WordPressの「サムネイル」サイズで画像を取得する場合は、以下のように記述します。

<img src="<?php echo catch_that_image('thumbnail'); ?>" alt="<?php the_title(); ?>" />

catch_that_image() の引数に thumbnail を指定すると、サムネイルサイズの画像URLを取得できます。
記事一覧など、比較的小さな画像を表示する場合に利用できます。

サイズを指定しない

画像サイズを指定せずに関数を呼び出すこともできます。

<img src="<?php echo catch_that_image(); ?>" alt="<?php the_title(); ?>" />

この場合は、関数の初期値である medium が使用されます。

function catch_that_image($size = 'medium')

そのため、サイズを指定しない場合は medium サイズの画像URLが返されます。

コードのポイント

記事本文から画像IDを取得する

以下の部分では、記事本文に含まれる wp-image-画像ID を正規表現で検索しています。

preg_match(
    '/wp-image-(\d+)/i',
    $post->post_content,
    $matches
);

例えば、記事本文の画像に以下のようなクラスが設定されている場合、

<img class="wp-image-123" src="..." alt="">

123 の部分が画像IDとして取得されます。

取得した画像IDは、以下の処理で整数に変換しています。

$img_id = (int) $matches[1];

指定したサイズの画像URLを取得する

取得した画像IDを image_downsize() に渡すことで、指定したサイズの画像情報を取得できます。

$image_array = image_downsize($img_id, $size);

例えば、

catch_that_image('thumbnail');

とした場合は、thumbnail サイズの画像が対象になります。

image_downsize() の戻り値に含まれる画像URLは $image_array[0] に格納されるため、以下のように返します。

return $image_array[0];

画像がない場合はデフォルト画像を表示する

記事本文に画像がない場合などは、あらかじめ用意したデフォルト画像を返します。

return $default_url;

デフォルト画像のURLは、以下の部分で指定しています。

$default_url = get_stylesheet_directory_uri() . '/images/default.jpg';

そのため、テーマ内に以下のような構成で default.jpg を用意しておきます。

テーマ
└─ images
└─ default.jpg

記事本文に画像がない場合でも、サムネイル部分を空白にせず、指定したデフォルト画像を表示できます。

まとめ

WordPressでは、記事本文に含まれる最初の画像IDを取得し、指定したサイズの画像URLをサムネイルとして利用できます。

functions.php に関数を追加しておけば、記事一覧などでアイキャッチ画像が設定されていない場合にも、本文内の画像をサムネイルとして表示できます。