【WordPress】アイキャッチに一番目の画像・No Imageを表示する方法

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

2.ループ内で呼び出す

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

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

3.まとめ

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

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

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

・【jquery.cookie.js】初回だけポップアップ（モーダル）を簡単に作る方法

・【CSS・JS】ひと文字ずつ色を変える方法

・WordPressパスワード保護のテキスト変更、都度入力

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

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

良かったらハートを押してね！

CONTACT

お問い合わせ

ご不明な点やご質問等、
まずはお気軽にお問い合わせください。

CONTACT

オンラインでのお打ち合わせも可能

ホームページを作りたい	ホームページを作った後	こんなことも
新しく作りたい	更新代行してほしい	写真撮影をしてほしい	多言語対応したい
スマホ対応したい	保守管理してほしい	動画をつくりたい	ライティングをしてほしい
リニューアルしたい	SEO対策をしたい	印刷物をつくりたい	イラストを描いてほしい
プチリニューアルしたい	WEB広告を出したい	ロゴをつくりたい	自社で簡単に更新したい
採用に特化したい			HP制作・運営サポートサービス
全部任せたい			採用特設HP「ウェブサイ」

【WordPress】アイキャッチに一番目の画像・No Imageを表示する方法

HTML

ホームページ制作

画像

CSS

Word Press

タグ

PHP

コーディング

おすすめの記事

人気の記事

おすすめ記事

カテゴリー

最近の投稿

アーカイブ

CONTACT