サムネイル画像として使う方法としてはアイキャッチ画像で表示する方法もありますが、ここで紹介する方法は単純にブログを更新してその中に使っている最初の画像をサムネイル画像として使う方法なので、クライアント向けにカスタマイズをされるならこの方法が便利だと思います。

functions.phpにコードを追加

まずは下記のコードをfunctions.phpに追加してください。コードの中の $first_img = “http://detarame.moo.jp/wp/wp-content/themes/whbk5/images/default.jpg”のｱﾄﾞﾚｽはもしも記事内に画像がない場合に表示する画像なのでここは各自のサイトでご用意してアドレスを書き換えて下さい。

<?php
function catch_that_image() {
    global $post, $posts;
    $first_img = '';
    ob_start();
    ob_end_clean();
    $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
    $first_img = $matches [1] [0];

if(empty($first_img)){ //Defines a default image
        $first_img = "http://detarame.moo.jp/wp/wp-content/themes/whbk5/images/default.jpg";
    }
    return $first_img;
}
?>

表示させたい所、例えばトップページのPHPファイル内に下記のコードを書き入れると表示されます。この場合場横120px,縦90pxにしてあります。

<img src="<?php echo catch_that_image(); ?>" alt="" width="120" height="90" />

画像の位置はcss（スタイルシート）で調整してください。又リンクさせる場合は下記のコードを付けるとリンクできます。

<a href="<?php the_permalink(); ?>" >
<img class="alignleft" src="<?php echo catch_that_image(); ?>" alt="" width="120" height="90" />
</a>