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

ワードプレス

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

 

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

-ワードプレス

関連記事

アイキャッチ画像を出力するテンプレートタグ(& object-fit)

分岐でアイキャッチ画像を表示させたい! アイキャッチ画像を設定しない場合、何か代わりの画像を出力させたい こちらはアイキャッチ画像が設定されていない場合「no-image.png」を表示させる例です。 …

特定のページだけに表示させたい! よく使う条件分岐

phpで使える便利な条件分岐 「トップページだけに表示させたい」「一覧ページだけ変更したい」 そんな時便利なのが条件分岐です。 トップページとその他 <?php if ( is_home() | …

【MW WP Form】必須項目をラジオボタン選択肢によって変えたい

MW WP Formの必須項目を分岐で変更! お問い合わせフォームなどで、選択肢によって分岐させ、フォームの項目を変えるのは難しい。例えば、資料請求を選んだら住所入力欄が出てくるとか。 必須が多いとフ …

固定ページでphpを使いたい

例えばトップページを固定ページで作成したとき、お知らせの新着一覧を固定ページ上で好きな位置に配置したいな、と考えたことはありませんか?

特定のページだけにcssやjsを読み込ませたい!

JavaScriptやcssのファイル、読み込まれるのに時間がかかりページが重くなります。 必要なページだけにリンクさせたいですよね。 今日はページごとにファイルをリンクする方法をまとめました! ❶h …