WordPressで記事内の画像を、一覧表示のときなどに取得してサムネイルで表示する方法。と、謎のob_startについて

WordPressでサイトを構築していると、TOPページなどにいわゆる「新着情報コーナー」として最近の記事の日付とタイトルなどを一覧表示する機会が結構あります。
そして、その時にタイトルだけじゃなくて、投稿内にはりつけられた最初の画像を表示したい。という要望が結構あります。
(アイキャッチ画像とかつかおうよ)って思わないこともないけど、過去の投稿がたくさんあるサイトのリニューアルなどのときなど、画像の中に貼り付けてある画像を使いたいシーンは結構あります。

さて、その方法について、Googleなどで
「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;
}

いつもながら、皆様の公開してくださる情報には本当に助けていただきます。
ありがとうございます。なんて思いながらありがたく使わせていただくのですが、、、

ひとつ気になるところがあります。

4,5行目のところに
ob_start();
ob_end_clean();
の記述が。

これはPHPでバッファリングするときに使う関数です。
参考:http://php.net/manual/ja/function.ob-start.php

上記のコードを1行づつみてみると。

    global $post, $posts;
    $first_img = '';

投稿を格納している$post変数を関数内でも使えるようにする。
返り値を入れるための変数を初期化

    ob_start();
    ob_end_clean();

ここが気になる。

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

正規表現で、投稿内のimgタグから画像のURLを取り出し。

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

投稿内に画像が貼り付けられていない時の処理。

という感じです。

そうなんです。
ob_start();
ob_end_clean();
だけ、何のためにあるのかわからないのです。
この関数でつかっている「catch_that_image」という関数名で検索すると似たようなコードが沢山でてくるのです。

おそらく、一番最初にこのコードを公開した人がいろいろと苦労をしたものと思われます。
いろいろ試しながらコードを書いていくうちに、テスト的に書いたコードをつい消し忘れる。ってのはよくあることです。

そして、その「コード」がとても便利なために、どんどんシェアされて広まっているのではないでしょうか。
と思うのですが。。。

そんなわけで、どなたか情報がありましたら教えて下さい。

情報募集中でございます。

  • 何かこういうときのために必要なのだ。という情報がありましたら教えて下さい。
  • もしくは、これは古いコードで今はこっちを使うんだぜ。ってのがありましたら教えて下さい

一応、不要と思われる部分を取り除いたコードを掲載しておきます。

function catch_that_image() {
    global $post, $posts;
    $first_img = '';
    $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;
}

投稿内で使うとき

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

こんな感じです。

“WordPressで記事内の画像を、一覧表示のときなどに取得してサムネイルで表示する方法。と、謎のob_startについて” への3件の返信

  1. 古い記事に申し訳ないです。

    全部の画像を取得するにはどうしたらいいのでしょうか?

    1. こんにちは、
      コード的には、5行目の
      $matches
      の中に、全部のimgタグが配列で入っていると思います。
      なので、
      $matchesを、foreachで回すなどで取得できると思います!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です