WordPressで記事の一番最初の画像を取得する方法

Question

###前提・実現したいこと
WordPressで記事の一番最初の画像を取得して、トップページの新着一覧にサムネイルとして表示させたいと思っているます。

###試したこと
以下のサイトの方法でトライするも、うまくいかない。

WordPress（ワードプレス）で記事の一番最初の画像を取得する方法

下記コードをfunction.phpに追記

function catch_that_image() {
    global $post, $posts;
    $first_img = '';
    ob_start();
    ob_end_clean();
    $output = preg_match_all('//i', $post->post_content, $matches);
    $first_img = $matches [1] [0];

if(empty($first_img)){ //Defines a default image
        $first_img = "piyopiyo.jpg";
    }
    return $first_img;
}

上記では「$post->post_content」で記事内の情報を取得しているが、いろいろ調べたところ、「$post->post_content」はショートコードをショートコードのまま表示してしまうことがわかった。

※自分の場合、投稿記事の画像部分をショートコード記述させている。

参考サイト：$post->post_content;は整形前の生のデータを抜き出してしまう

###発生している問題
どうにかショートコードで表示させている画像をTOPページでも参照できるようにしたいが方法がよくわからない。。。

良い方法があればご教示願います！

Answer 1

リンクされている記事に記載している通り、apply_filters を使えば良いと思います。

$output = preg_match_all('//i', apply_filters('the_content', $post->post_content), $matches);

ただ、正規表現が抜けている気がするのですが、本当に取得できるのでしょうか。多分下記のようになるとは思うのですが･･･。

$output = preg_match_all( '/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', apply_filters( 'the_content', $post->post_content ), $matches );

【記事の一番最初の画像を取得してサムネイルにするコード | WP TECH (WordPress技術専門 Tips)】
http://www.wp-tech.net/wordpress_tips/1703/

Comments

[tuckQ]

回答いただきありがとうございます！参考にしたサイトの正規表現がやたら短いし、変だなあと思っていたのですが、やはり抜けていたのですね。間違いがわかってよかったです。教えていただいたように早速ためしてみたのですが、```Undefined offset: 0 in /var/www/wordpress/wp-content/themes/stingerplus-child/functions.php on line 27 Call Stack 、、、```というエラーが発生しました。ソースでいうと``` $first_img = $matches [1][0];```の部分かと思います。うまくマッチが見つかってないということでしょうか？解決には至っておりませんが、理解が深まりました。ありがとうございます！

[kei344]

$outputにマッチした個数か、エラーの場合falseが変えるはずなので、var_dumpとかで確認してみてください。正規表現が正しくマッチするかも確認できていませんので、
・apply_filters( 'the_content', $post->post_content ) の中身
・正規表現がマッチしているか
・マッチしなかったときの処理
をそれぞれ確認してみてはいかがでしょう。

[tuckQ]

たびたびアドバイスいただきありがとうございます！var_dumpでapply_filters( 'the_content', $post->post_content ) の中身をみるところで立ち往生してしまっておりまして(^^;)、まだ解決には至っておりませんが、apply_filtersの仕組みなどもわかり、あともう一歩のところまで来ていると思うので、引き続き検証してみます！