【WordPress】九十九悪嵐のうぇぶでざいんびぼうろく。〜アイキャッチ画像出力の関数をカスタマイズしてみる編〜

お久しぶりの『九十九悪嵐のうぇぶでざいんびぼうろく。』、そしてお初のWordPressに関する備忘録。
初めてのWordPressに関する備忘録はカスタム投稿タイプでも良かったのですが、「WordPressといえばカスタム投稿タイプみたいな節があるからな…ありきたり…なんか嫌…」ということで、初めてのWordPressに関する備忘録は「アイキャッチ画像出力の関数をカスタマイズしてみる」にしました。

具体的にどうカスタマイズするのか、というと、

・アイキャッチ画像がある場合→アイキャッチ画像をサムネイルとして出力する
・アイキャッチ画像がない、かつ、記事内に画像がある→記事内の一番目の画像をサムネイルとして出力する
・アイキャッチ画像がない、かつ、記事内にも画像がない→デフォルトの画像（「No Image」と書かれている画像、あるいは、サムネイルサイズに合わせたロゴなど）をサムネイルとして出力する

です！

それでは早速作っていきましょう〜。

作成方法

１．テーマにあるfunctions.phpに以下のコードを記述する。

function my_catch_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(has_post_thumbnail()) {
        $img_id = get_post_thumbnail_id();
        $img_url = wp_get_attachment_image_src($img_id, 'full', true);
        $first_img = $img_url[0];
    }
    if(empty($first_img)) {
        // アイキャッチ画像があればそちらを表示
        if(has_post_thumbnail()) {
            $img_id = get_post_thumbnail_id();
            $img_url = wp_get_attachment_image_src($img_id, 'full', true);
            $first_img = $img_url[0];
        }else {
            // 記事内で画像がなかった時のための画像を指定（ディレクトリ先や画像名称は任意）
            $first_img = esc_url(get_template_directory_uri(). '/assets/img/common/default.png');
        }
    }

    return $first_img;
}

２．サムネイル表示させるところで以下のコードを記述する。

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

参考

一覧ページ等で、アイキャッチ画像がなかったら一番目の画像を取得し、さらに画像がなかったら定義した画像を表示するカスタマイズ方法