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

ワードプレス

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

 

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

-ワードプレス

関連記事

MW WP Formが動かない!確認画面にいかない!原因は?

入力画面でループして確認画面やエラーの表示に遷移しない、せっかく入力したのに確認画面を押すと、リロードされて消えてしまい、先に進まない…。なかなか解決せずはまってしまったMW WP Form。試してみた内容をご紹介しています。

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

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

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

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

カスタム投稿プラグイン「Custom Post Type UI」のお引っ越し

カスタム投稿の移行 「Custom Post Type UI」は、簡単にカスタム分類を設定して独自の投稿タイプを作れるプラグインです。function.phpに記述せずにカスタム投稿を作成できるのは初 …

よく使うWordPressテンプレートタグ

URLを出力するWordPressのテンプレートタグ phpファイルにテンプレートタグを使用することで、自動でURLを取得して表示してくれます。ドメインが変わってもコードの修正なし! ホームページのU …

サイトに訪れていただきありがとうございます!このブログでは、調べたこと、試したことを次回スムーズに行うための覚え書きをアップしています。