【wordpress投稿】アイキャッチではなく最初の画像をサムネイルにする方法

こんにちは、カスミです。

さて、以下のようなお悩みをお持ちでしょうか?

投稿アーカイブ一覧ページで、サムネイルがアイキャッチ画像を読んでる。
これを記事内にでてくる最初の画像を呼び出したい。

OGP画像をアイキャッチではなく、最初の画像を呼び出したい。

このようなお悩みを解決致します。

本記事では、wordpress投稿記事内の最初の画像を呼び出す関数コードを紹介します。

最初の画像を呼び出すコード

//-----------------------------------------------------
// 【記事中の最初の画像を表示】
//-----------------------------------------------------
function post_firstimg() {
    global $post, $posts;
    $firstimg = '';
    ob_start();
    ob_end_clean();
    $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
    $firstimg = $matches [1] [0];
    if(empty($firstimg)){
        // 画像が無い場合は以下デフォルト画像を読み込む
        $firstimg = "/thamnail.jpg";
    }
    return $firstimg;
}

上記コードをfunctions.phpにコピペしましょう。

投稿アーカイブ一覧のimgタグ内、OGP画像タグ内のアイキャッチを読んでいる箇所に以下コードを入れて先ほどの関数を呼び出します。

<?php echo post_firstimg();?>

上記コードを入れる事で、記事内の最初の画像のURLが出力されます。

以上で完了です。

まとめ

カスタム投稿の際は$output変数内、$post->post_content$postをカスタム投稿配列が入ってる変数に変更すればOKです。

以上で解説を終わります。

Ads

関連記事

HTMLCSS プログラミング

【簡単】CSSを使って要素を非表示にせず、要素内のテキストだけ見た目上消す方法

2022.01.19
88
WordPress

wp_queryを使って記事一覧を好きな所に出力しよう【ワードプレス】

更新日:2019.11.27
91
HTMLCSS プログラミング

【簡単】スマホのぱんくずを一行にして、はみ出した分を横スクロールで見せる方法

2022.01.17
12
HTMLCSS プログラミング

inputタグのラジオやチェックボックスをボタン画像にする方法

2021.01.04
246