Written by Kasumi

【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です。

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

目次

関連記事

HTMLCSS プログラミング

【簡単CSS】ある要素位置までスクロールしたらその要素を固定する方法【JavaScript不要】

2022.03.27
16714
WordPress

【WordPress】アーカイブで記事コンテンツを取得。コンテンツから任意のHTMLタグのみ取得する方法

2022.12.06
1402
WordPress

WordPressでアーカイブページの並び順を変更する方法【一括変更】

2022.10.21
4374
プログラミング

MANPローカルサーバーで400 Bad Request errorになりサイトが表示されない【解決!ローカルのドメイン・ディレクトリ名が原因かも?】

2022.04.18
915