WordPressで記事中の最初の画像の「サムネイルのサイズ」で設定した正方形の画像を表示:メモ

もはや恒例のバッドノウハウかもしれないメモ。

phpで画像を加工しようと思ったが、そういえばWordPressには画像登録時に設定したサイズの画像を自動で作成する仕組みがあったのを思い出し、それを引っ張ってくればいいのではと考えて色々試した事柄です。

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

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

実現したいこと

まずは実現したいこと。

• 記事一覧の横に記事中の最初の画像を入れたい
• レイアウトの問題で、画像は正方形の状態にしたい

やり方はいろいろあるとは思いますが、冒頭に書いたようにWordPressには画像登録時に設定したサイズの画像を自動で作成する仕組みがあり、それを利用する方法を考えました。

具体的には、ダッシュボードの「設定」の「メディア」にある「サムネイルのサイズ」で設定できるサムネイルを利用します。
既にある画像を利用するので楽な辺面、「サムネイルのサイズ」の設定に左右されますから汎用性はほとんどありません。

最初の画像を取得

まず、WordPressの記事中の最初の画像を取得するコードは以下の情報そのままでOKです。

[解決済み] 記事中一番最初の画像を自動表示するが画像なしの時はHTML非表示にしたい

何となくやり方は考えられても実際にコードが書ける訳でもないので、こうして形にできる方はすごいなぁと思わずにはおれません。…感嘆ばかりもしていられませんが。

thumbnailで設定したサイズの画像を表示

サムネイルの設定が縦横150pxの正方形だと仮定して、前述のリンク先のコードを参考に書き換えます。

function catch_that_image_thumbnail() {
  global $post;
  if ( preg_match_all( '/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches) ) {
    $first_img = $matches[1][0];
    $first_img_thumbnail = substr_replace($first_img, '-150x150',strrpos($first_img,'.'),0) ;
  } else {
    $first_img_thumbnail = get_stylesheet_directory_uri(). '/images/default-150x150.png';
  }
  return $first_img_thumbnail;
}

やっていることは単純で、前述のコードで取得した画像のurlにサムネイルとして生成された際に付く「-150×150」という文字列を追加しただけです。

あとは、以下のコードで出力すれば表示されるはずです。

<img src="<?php echo catch_that_image_thumbnail(); ?>" />

結び

使うシーンがあるのかどうなのかわかりませんが、一応メモとして。

Twitter

Hatena

Facebook

Pocket