「wp_get_attachment_image_src」で画像サイズを指定する

※ページ内に広告が表示されます。

WordPressのプラグイン「Simple GA Ranking」を導入した時、アイキャッチ画像のサムネイルを表示するカスタマイズをしたのですが、「wp_get_attachment_image_src」による画像サイズの指定でちょっと悩みました。それを解消した時のメモです。

なおプラグイン「EWWW Image Optimizer」を導入しており、それによって作成されるサムネイルが関係しています。

参考サイト

下記「Simple GA Ranking でサムネイルを使う」を参考にさせていただきました。ありがとうございます。

Simple GA Ranking でサムネイルを使う | 雑廉堂の雑記帳
記事のランキング一覧にサムネイルをつけてみました。

サムネイル画像のサイズ指定

Simple GA Rankingをウィジェットで表示するのですが、そこにアイキャッチのサムネイル画像を表示するために、「wp_get_attachment_image_src」で画像ファイルの情報を取得します。

参照:関数リファレンス/wp get attachment image src

<?php wp_get_attachment_image_src( $attachment_id, $size, $icon ); ?>

ここの第2引数に「$size」というものがあり、そこでサイズ指定をします。ここには

  • thumbnail
  • medium
  • large
  • full

といった文字列が入るのですが、ほかに「array(○, ○)」という指定ができます(○の中はピクセル数)。

私は横長のサムネイル画像を使いたかったので、プラグイン「EWWW Image Optimizer」が自動で作成する画像サイズをチェックします。

EWWW Image Optimizerの設定画面にある「リサイズ」タブを見ると、

  • thumb120 – 120 x 68
  • thumb160 – 160 x 90
  • thumb320 – 320 x 180

などの画像が作られていることがわかります。ここから、例えば「thumb160」の画像を表示させたい場合は、

wp_get_attachment_image_src( get_post_thumbnail_id( $id ), array(160, 90) )

といった指定をすると、当該画像の情報を呼びだすことができます。めでたしめでたし。

まとめ

というわけで、「wp_get_attachment_image_src」で画像サイズを指定したい場合は、事前にどのようなサイズの画像が作成されているのかを確認し、それをarray()で指定したらいいよ、というお話でした。

なお今回はEWWW Image Optimizerによって作成された画像のサイズを指定しましたが、導入していない場合は、事前にどのようなサムネイル画像が生成されているか、チェックしてみてください。

コメント

タイトルとURLをコピーしました