まえがき

この前ある案件でクライアントから「トップページの最新記事一覧に記事の中で使用されてる画像を表示させることは可能ですか。アイキャッチに登録するのが面倒なので。。。」というご要望をいただきました。。
確かに本文に絶対画像いれるのであればアイキャッチに画像を登録するの手間になりますよね。ググってみたらめちゃくちゃ簡単に対応できたので覚え書きです。

functions.phpにコードを追加する形です。

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

functions.phpにコードを追加する

下記コードを使用中のテーマの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;
}

10行目のパスは画像が無い時に表示する代替画像のパスを設定してください。

ザックリ説明すると、「preg_match_all()」関数で本文中のimgタグを$matchesに格納して$first_imgに代入。
$first_imgに値が入らなかった場合は代替画像のパスを出力するというコードですね。

出力するためのコード

functions.phpにコード追加できたら、実際に出力したいループ内に下記コードを追加してください。

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

特に難しいことはありませんね。
altは適宜変更してください。

出力した画像のサイズを制御する

今回紹介した方法で出力した画像をいい具合にリサイズしたいシチュエーションが多々あると思います。
実際KoToRiもそうでした。

しかし、今回ご紹介した方法だと「wp_get_attachment_image_src()」関数のようにメディアサイズを自由に指定することができないので
CSSで無理やり調整してやる必要があります。

といってもメチャクチャ簡単です。
画像自体に「max-width」と「max-height」を指定するだけです。
画像の最大サイズを「max-width」「max-height」で設定してやれば、最大サイズを超えないように縦横比固定で縮小してくれます。

って、CSSバリバリの方だったら説明されるまでも無いですね笑

まとめ

最初は「めんどくさそう」って感じでしたがやってみると簡単で非常に便利でした。
アイキャッチとかカスタムフィールドとかで画像登録するのメンドクサイ人はメンドクサイですからね。
こういう引き出しも持っているといざと言うとき提案できるのではないでしょうか。

参考サイト

wprecipes様

Thank you!