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

function get_first_image_from_content( $content ) {
    if ( preg_match( '/<img[^>]+src=["\']([^"\']+)["\'][^>]*>/i', $content, $matches ) ) {
        return $matches[1]; // 最初の画像の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="' . esc_attr( get_the_title() ) . '" />';
        }
    }
}

preg_match_all( '/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $content, $matches );
// $content = '<img src="A.jpg"><p>text</p><img src="B.jpg">'
// -> $matches[1][0] は "B.jpg"（最後の画像。誤り）

preg_match( '/<img[^>]+src=["\']([^"\']+)["\'][^>]*>/i', $content, $matches );
// 同じ $content で -> $matches[1] は "A.jpg"（最初の画像。正しい）

<?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; ?>

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