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

ワードプレス

2019-08-18

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

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(); ?>" />

 

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

-ワードプレス

関連記事

最初の数行を表示させて、残りは会員限定で閲覧できるWPの限定コンテンツを作りたい

【プラグイン無し】moreタグ以降はログインで表示させる限定をコンテンツを作成! 今回はログインフォーム、限定コンテンツについて調べました! やりたいことは下記になります。 ・コンテンツの最初の数行を …

バージョンアップしたContact Form 7 に入力確認画面をつけたい!

入力確認画面が作れるプラグイン「Contact Form 7 Multi-Step Forms」 Contact Form 7をアップデートしたらフォームが動かなくなってしまった! 調べてみると確認画 …

【MW WP Form】フォーム入力が必要なダウンロードボタンを作りたい!

MW WP Formで作る資料ダウンロード用フォーム 先日、お客さまの要望で「名前などを入力してもらってから資料をダウンロードできるような仕組みにしてほしい」というのがありました。 登録すると資料がも …

MW WP Formセレクトボックスに特定カテゴリーの記事タイトルを自動で表示させたい!

フォームセレクトボックスの選択肢をカテゴリーと連動 フォームの質問事項が頻繁に変わるとき、例えば商品が変わる度、注文フォームをいちいち修正するのは慣れていないと大変です。 新しい記事をアップしたら自動 …

【MW WP Form】ラジオボタンの選択項目によって分岐させたい!

ラジオボタンの選択によって表示・非表示を変える 難しいと思って避けてた案件… 下のサンプルのように、選択したラジオボタンによって表示・非表示を切り変えるフォームを作ります! 資料請求のラジオボタンで「 …