WordPressで記事の最初にあるuploadsフォルダの画像をサムネイルで表示:メモ

記事最初の画像を取得して表示するコードというのは良く出回っていますが、今回はそれを少し調整。

記事の最初の、あるいは唯一の画像が別URLからひっぱって来ている画像である場合に問題となる可能性があるためです。

無駄があるかもれま知れませんが、とりあえずできたのでメモ。

[2016.1.5追記あり]

[2017.3.2追記]
この記事よりも良いと思える方法を書きました。

• WordPressで記事の最初の画像を取得してサムネイルサイズで表示する

実現したいこと

冒頭で既に触れていますが、実現したいことは以下の通り。

• 記事中の最初の画像を取得
• サムネイルとして記事一覧に表示
• WPのuploadsフォルダにある画像限定

上記のように「画像はWPのuploadsフォルダにある限定」とした理由は以下の通り。

記事中に広告用の画像を貼る場合、時には広告主指定のsrc属性をもった画像を挿入することがあります。

この場合、記事の印象を伝えるためのサムネイルに広告画像が出てしまい、あまり見映えがよろしくありません。

そこで、管理画面から普通にアップロードした画像のみを検索対象とすることで、広告画像を排除しようというのが目的となります。

コード[2016.1.5追記]

WordPress4.4 からレスポンシブイメージのレスポンシブイメージの srcset属性がサポートされました。
そのため、imgタグ内に存在する画像のパスがsrc属性とsrcset属性となります。

この記事の以前のコード(下の段落にあります)では、正規表現で「<」「>]を手がかりにしていためか、WordPress4.4 で取得した画像のパスの最後に意図しない文字列が付いてしまい画像が取得できない場合がありました。
例としては以下のようなパスが取得されていました。

https://webutubutu.com/wp-content/uploads/121111_02.gif 300w, https://webutubutu.com/wp-content/uploads/121111_02.gif 400w, https://webutubutu.com/wp-content/uploads/121111_02.gif 500w, https://webutubutu.com/wp-content/uploads/121111_02.gif 600w

拡張子の後の「 300w」が該当の部分です。
この部分はsrcset属性で幅と画像の対応を示す記述ですから、src属性で止らずにimg要素内にあるパスをつなげて取得していた模様です。
そこで、以下のように以前のコードを変更して対応しました。

function catch_that_image_thumbnail() {
 global $post;
 $postText = '';
 $postText = apply_filters('the_content', $post->post_content);
 if(isset($post) && preg_match('/<img.+src=[\'"]([^\'"]+\/uploads\/[^\'"]+)[\'"].*>/i', $postText , $matches)) {
   return $matches [1];
  } else {
   return get_stylesheet_directory_uri(). '/images/default.png';
  }
}

正規表現はそれほど自信がないので微妙なのですが、動作は確認しました。

なお、img要素のsrc属性自体はごく普通の状態のままですあｋら、最初からsrc属性に限定していたり、「<」「>」を手がかりにしていなかった場合には特に問題はおこらないかと思います。

コード

以下がコードです。

基本は以前の記事「WordPressで記事中の最初の画像の「サムネイルのサイズ」で設定した正方形の画像を表示:メモ」で参考にさせていただきました「[解決済み] 記事中一番最初の画像を自動表示するが画像なしの時はHTML非表示にしたい」のコードを元にしています。

function catch_that_image_thumbnail() {
          global $post;
          if ( preg_match_all( '/<img [^>]*"(http:[^">]*\/wp-content\/uploads\/[^">]*)"[^>]*>/u', $post->post_content, $matches) ) {
                    $first_img = $matches[1][0];
          } else {
                    $first_img_thumbnail = get_stylesheet_directory_uri(). '/images/default.png';
          }
          return $first_img_thumbnail;
}

上記のpreg_match_allで用いているphpの正規表現部分は、以下のページを参考にさせていただきました。

投稿コンテンツに挿入した画像（メディア）のリンクを抽出する

結び

当初はドメイン名でなんとかできないかと考えていたのですが、正規表現が上手くいかず。

実現できたら追記か新規で記事をかければと思います。

Twitter

Hatena

Facebook

Pocket