MENU

アイキャッチ画像を表示させたいとき、the_post_thumbnail()を使用すれば簡単に画像が表示できますが、画像のurlだけを取得したいという場面はありませんか?

今回は、そんな時に使える便利なコードをメモしていきます。

目次

標準の関数を組み合わせるだけ

先に完成形となるコードを以下に記述しておきます。

// アイキャッチ画像のIDを取得
$thumb_id = get_post_thumbnail_id();

// $sizeサイズの画像情報を取得
$thumb_img = wp_get_attachment_image_src($thumb_id, $size);

// 取得した情報の中からurlだけ取得
$thumb_src = $thumb_img[0];

まず、ポイントとなるのは5行目のwp_get_attachment_image_src関数です。

この関数を使用することでアイキャッチ画像に関する様々な情報を取得できます。

wp_get_attachment_image_src関数の引数にはアイキャッチ画像のIDと画像サイズの2種類が必要となっており、このとき必要なIDを、2行目のget_post_thumbnail_id関数で取得しておく、というのが全体の流れです

引数に指定できる画像サイズの種類はthe_post_thumbnail関数と同じです。

  • full
  • large
  • medium
  • thumbnail

の4種類ですね。

wp_get_attachment_image_src()で取得できる情報は配列に格納されており、画像のurlに関する情報はその配列の1番目に格納されています

8行目でその中身を変数に代入することで、画像のurlが無事に取得できます。

get_post_thumbnail_id()の引数は?

get_post_thumbnail_id関数は本来、取得したいアイキャッチ画像を使用している投稿のpostIDを引数に指定します。

ですがループ内であれば、( )の中身が空の時はその時ループで回っている投稿のID(post->ID)がそのまま入力されるので、基本的には空のままで問題ないです。

もし別の投稿で使用しているアイキャッチ画像の情報を取得したければ、

get_post_thumbnail_id(投稿ID);

というように数値を引数に指定してあげてください。

新しい関数にまとめておくと便利

以上の流れを新しい関数としてfunction.phpに定義しておけば、1行の記述でアイキャッチ画像のurlが取得できるようになります。

私が普段使用している使い方をまとめておきます。

function get_thumb_src($size = 'full'){
  // アイキャッチ画像のIDを取得
  $thumb_id = get_post_thumbnail_id();
  // 画像内容を取得
  $thumb_img = wp_get_attachment_image_src($thumb_id, $size);
  // urlだけ取得
  $thumb_src = $thumb_img[0];
  return $thumb_src;
}

function.phpに上記の関数を定義しておき、get_thumb_src() を任意の変数に代入してアイキャッチ画像のurlを取得します。

例としては次のような感じです

$src = get_thumb_src('large');

今回は以上です。どなたかの参考になれば幸いです。

- Thank you for reading this to the end. -
TOPへ Top