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

仙台・宮城の皆さんこんにちは！

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

まとめ

自動で1枚目の画像を拾ってくるなら更新作業も楽になるんではないでしょうか。ブログを長く続けるために、少しでも楽な方法を考えるのは重要なことです。

それではまた！仙台・宮城でのホームページ制作やサイトリニューアルならアンドシークまで！もちろん宮城県外の方も大歓迎です！