ページの最初の画像を自動でアイキャッチにする

読みやすさや視線誘導のために、記事一覧にアイキャッチ画像を設定します。
「読んでみたい」と思ってもらえるアイキャッチ画像を準備したいですね！

WordPressでは編集画面右下の「アイキャッチ画像を設定」で簡単に指定できます。
ですが、お客さんから設定漏れや時短のために自動的に投稿内の画像をアイキャッチにしたい、というご要望をいただくこともあります。確かに、時短できるところは削って凝りたいところに時間をかけたいです。

ページの最初の画像を自動でアイキャッチにする

functions.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 = "/images/default.jpg";
    }
    return $first_img;
}

 

画像サイズはcssで適宜調整します。
「/images/default.jpg」の部分には、ページに画像が使われていない場合に表示させる画像を指定します。

ループのサムネイル部分をこちらに差し替えます。

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

 

こちらの記事を参考にさせていただきました。ありがとうございました。