【WordPress】記事内の最初の画像をサムネイルとして表示する方法

WordPressで投稿一覧に表示されるサムネイル画像は、デフォルトでは投稿に設定されたアイキャッチ画像が使用されます。しかし、アイキャッチ画像が設定されていない場合、記事内の最初の画像を自動的にサムネイルとして表示する方法があります。本記事では、その実装方法を詳しく解説します。

functions.phpにコードを追加

まずは、使用しているテーマのfunctions.phpファイルにコードを追加して、記事内の最初の画像を取得する関数を作成します。以下のコードをfunctions.phpに追加してください。

function get_first_image_from_content($content) {
    $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $content, $matches);
    if ($output) {
        return $matches[1][0]; // 最初の画像のURLを返す
    }
    return false; // 画像が見つからない場合はfalseを返す
}

function display_post_thumbnail_or_first_image() {
    global $post;
    
    if (has_post_thumbnail()) {
        // アイキャッチ画像が設定されている場合
        the_post_thumbnail('thumbnail');
    } else {
        // アイキャッチ画像がない場合、記事内の最初の画像を表示
        $first_image_url = get_first_image_from_content($post->post_content);
        
        if ($first_image_url) {
            echo '<img src="' . esc_url($first_image_url) . '" alt="' . get_the_title() . '" />';
        }
    }
}

このコードは、投稿にアイキャッチ画像が設定されていない場合に、記事内の最初の画像を取得し、その画像をサムネイルとして表示します。

投稿一覧テンプレートに表示コードを追加

次に、投稿一覧のテンプレートファイル（通常はindex.phpやarchive.phpなど）に、先ほど作成した関数を呼び出すコードを追加します。以下のように記述します。

<?php if (have_posts()) : ?>
    <?php while (have_posts()) : the_post(); ?>
        <div class="post">
            <div class="post-thumbnail">
                <?php display_post_thumbnail_or_first_image(); ?>
            </div>
            <h2 class="post-title"><?php the_title(); ?></h2>
            <div class="post-excerpt">
                <?php the_excerpt(); ?>
            </div>
        </div>
    <?php endwhile; ?>
<?php endif; ?>

このコードを追加することで、投稿一覧において、アイキャッチ画像が設定されていない投稿にも、記事内の最初の画像がサムネイルとして表示されます。

サムネイル画像のスタイルを調整

最後に、サムネイル画像の表示をスタイルシート（style.css）で調整

.post-thumbnail img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

します。以下のCSSコードを追加して、サムネイル画像が適切に表示されるようにしましょう。

このCSSで、サムネイル画像が投稿の枠内にきれいに収まり、見栄えが良くなります。

まとめ

これで、WordPressの投稿一覧において、アイキャッチ画像が設定されていない投稿に対しても、記事内の最初の画像を自動的にサムネイルとして表示することができるようになります。テーマをカスタマイズする際に役立つ便利なテクニックですので、ぜひ活用してみてください。