最終更新日:2021.10.26（公開:2021.4.25）

WordPress（ワードプレス）で記事内の画像をサムネイルにする方法！

仙台のWEB担当者の方、おばんです！

WordPressのサムネイルって毎回毎回設定するのって面倒ですよね？

「記事内からサムネイルを自動で拾ってくれたらいいのに」と考えたことがある方も多いはずです。

いちいちサムネイル画像を設定するのは面倒！
記事の中の写真をそのままサムネイルに使いたい！

という方には、大変おすすめな方法です。

記事の一番最初の画像を取得する

いつものように、function.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)){
        $first_img = "/images/default.jpg";
    }
    return $first_img;
}

imgタグを順番に取得

6行目のpreg_match_all()で正規表現検索を繰り返して、「imgタグを順番に取得」しています。


$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);

最初の画像を取得

7行目で「最初の画像を取得」しています。


$first_img = $matches [1] [0];

記事内に画像がない場合

「記事内にimgタグが存在していない場合」は、10行でdefault.jpgを$first_imgに入れています。

記事に画像を使っていない場合もきちんと想定されているんです。


if(empty($first_img)){
    $first_img = "/images/default.jpg";
}

画像を表示させる

以下のように記述すれば、表示されます。


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

応用編

ここで応用編です。「サムネイルがなければ、記事内の最初の画像をサムネイルにする」という感じにする場合は下記のようになります。


<?php if (has_post_thumbnail()) : ?>
    <?php the_post_thumbnail('single-thumbnails'); ?>
<?php else : ?>
    <img src="<?php echo catch_that_image(); ?>">
<?php endif ; ?>