ちょっと自己紹介

こんにちは？皆さんのところはもう夏ですか？？

僕の住む新潟はまだ梅雨明けしていないので、もう少ししたら夏が来るのだと思います。
新潟では夏になると色々なところで夏祭りがあって、花火が上がります。

有名なところだけでも長岡の花火や、片貝の花火、柏崎の花火も有名ですね！

さて、自己紹介が遅れましたが…

はじめまして、yasaiです。基本的にHTML書いたり、CSS書いたり、jQuery書いたりしてます。

ムズカシイことはできないので、日々勉強中です！(できるようになりたいのです)

ここでは日々ハマったことや、ちょっと気が付いたことを書いていこうと思います。

今日はWordpressのお話です。

記事の一覧に記事の最初の画像を表示する(アイキャッチではなくて)

トップページなんかで、カテゴリー記事の一覧を表示する、よくあるパターンです。

文字だけだとさみしいので画像も載せたいなと思ったので、調べてみました。

アイキャッチ画像使うと簡単なんでしょうが、クライアントワークだとアイキャッチの設定をしてもらうより、記事の一番最初の画像を表示してしまった方がよいことってありませんか？

まずはfunction.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 = "dummy.jpg"; 
    }
    return $first_img;
}

まず投稿内に画像があるかどうかを調べます。ある場合には$first_imgに最初の画像を格納します。

画像がなかった場合は、$first_imgにdummy.jpgを格納します。(※dummy.jpgは用意してください。)

これであとはcatch_that_imagedeで呼び出すことができました。

<img src="<?php echo catch_that_image(); ?>" alt="">

参考にさせていただいたサイトです。

• WordPress（ワードプレス）で記事の一番最初の画像を取得する方法
• 記事内の一番最初の画像を取得してサムネイル画像表示

このように参考にさせていただいたものや、自分で思いついたことを備忘録のように書いていきます。これからもお付き合いください。よろしくお願いします！

Tweet