この記事では、ワードプレスの記事を投稿する際に、アイキャッチ画像が指定されていない場合、記事の中の一番目の画像をアイキャッチとして表示する方法をご紹介します。

一番目の画像を設定していない場合は「No Image」などのデフォルト画像をアイキャッチに表示することも可能です。併せてやり方をご紹介しますね！

簡単に言うと、

アイキャッチ
↓（なければ）
記事の一番目の画像
↓（これも、なければ）
「No Image」などのデフォルト画像

という優先順位で表示されます！

この設定をしておけば、一覧ページに画像がなくなる心配がありません！
弊社でも頻繁に使用している便利な設定ですので、ぜひ使ってみてください。

目次

1. functions.phpに記述
2. ループ内で呼び出す
3. まとめ

まず、functions.phpに記事の1番目の画像を取得する。
それがない場合はデフォルト画像取得する、という記述をします。

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 = "https://wwg.co.jp/img/no_img.jpg";
        //ここに「No Image」などのデフォルト画像にしたい画像のURLを入れてます。
    }
    return $first_img;
}

次にindex.phpやarchive.phpのループ内に画像を呼び出す記述をします。

<?php if (has_post_thumbnail()): ?>
    <?php the_post_thumbnail('thumbnail'); ?>
<?php else : ?>
    <img src="<?php echo catch_that_image(); ?>" alt="<?php the_title(); ?>" />
<?php endif ; ?>

以上で完了です！
ぜひ、使ってみてください。

ブログ記事のアイキャッチについて、以下のような設定にする方法をご紹介しました。

・アイキャッチを設定しない際、記事内最初の画像を表示する
・記事内に画像が一枚もない場合、「No Image」などのデフォルト画像を表示する

ブログのクリック率にも大きく影響するアイキャッチ。せっかくなら、何かしらの画像がきちんと表示されるようにしたいですね。

愛知県内から名古屋市を中心にホームページ制作を行っている会社
株式会社 WWG（ダブルダブルジー）
愛知県 名古屋市中村区名駅5-16-17　花車ビル南館5F

TEL： 052-890-7007（2021-12/16～変更）
※ ホームページ制作や活用サポートのお問い合わせはコチラから