アイキャッチ画像を出力させる時、the_post_thumbnail()を使用すれば簡単にimgタグを出力してくれますが、このアイキャッチ画像の、URL部分だけを取得したいという時、ありませんか？
私は、すごくあります。笑
なので、自分で関数を作ってみました。
目次
完成した関数のコード
先に完成形となるコードを以下に記述しておきます。
投稿IDからアイキャッチ画像のURLだけを取得する関数
function get_thumb_url($size = 'full', $post_id = null) {
$post_id = ($post_id) ? $post_id : get_the_ID(); //第2引数が指定されていればそれを、指定がなければ現在の投稿IDをセット
if (!has_post_thumbnail($post_id)) return false; //指定した投稿がアイキャッチ画像を持たない場合、falseを返す
$thumb_id = get_post_thumbnail_id($post_id); // 指定した投稿のアイキャッチ画像の画像IDを取得
$thumb_img = wp_get_attachment_image_src($thumb_id, $size); // 画像の情報を配列で取得
$thumb_src = $thumb_img[0]; // 配列の中からURLの情報だけ取得
return $thumb_src; //URLを返す
}引数は2つ指定できるようにしています。
- 第1引数ではサイズの指定ができます。使える値はWordPressで使える 「"thumbnail", "medium", "large", "full"」 の4パターン。
- 第2引数では、投稿IDを指定できます。省略すると、「現在の投稿」の投稿のアイキャッチ画像が取得できます。
ポイントとなる処理の流れをざっくり説明すると、
- 投稿IDに関する指定がなければ、「現在の投稿」の投稿IDを
get_the_ID()で取得する。 has_post_thumbnail()でその投稿がアイキャッチ画像を持っているか調べ、持っていない場合はfalseを返すget_post_thumbnail_id()を使って、指定した投稿のアイキャッチ画像の 画像IDを取得wp_get_attachment_image_src()で、アイキャッチ画像の指定したサイズに関する情報を 配列で取得- 配列の中からURL情報だけを取得
- 取得したURLを返す
となっています。
さらにいくつか補足で説明をしておくと、
- 「処理1」の投稿IDの操作ですが、 3項演算子という記法を用いているので、見慣れない方はググってみてください。
- 「処理2」でのreturnの中身は、アイキャッチ画像がない場合に表示する「No Image画像」のURLを返すようにしていてもいいでしょう。wp_get_attachment_image_src()で取得できる情報は配列に格納されており、画像のurlに関する情報はその配列の1番目に格納されています
- 「処理4」で取得できる配列の中身は具体的に、"[0] => url、[1] => width、[2] => height、[3] =>リサイズされいているかの真偽値" です。
アイキャッチ画像を持っていない場合の返り値をNoImage画像のURLにする場合
アイキャッチ画像を登録していない画像は全て同じ画像（NoImage画像）を表示したい、というケースも多いかと思います。
そのような場合は、すでに補足しました通り「処理2」での返り値をNoImage画像のURLにすると便利です。
さらに、このNoImage画像のURLは別の場所で定数として管理しておくようにしておくと良いかと思います。
私が実際に使っているコードの例を挙げておきます。
例：NoImageのURLを定数で管理
//関数の外で定数を定義
define("DIRE", get_template_directory_uri()); //テンプレートディレクトリまでのURL
define("NOIMG",DIRE."/img/no-image.jpg" ); //NoImage画像のURL
//関数定義
function get_thumb_url($size = 'full', $post_id = null) {
$post_id = ($post_id) ? $post_id : get_the_ID();
if (!has_post_thumbnail($post_id)) return NOIMG; //NoImageの定数 NOIMG を返すようにする
$thumb_id = get_post_thumbnail_id($post_id);
$thumb_img = wp_get_attachment_image_src($thumb_id, $size);
$thumb_src = $thumb_img[0];
return $thumb_src;
}get_thumb_url()の呼び出し方
さて、先ほどの関数を呼び出してみましょう。
例：get_thumb_url()の使い方
//現在の投稿のサムネイル画像（フルサイズ）のURLを取得する。
$thumb_full_url = get_thumb_url();
//現在の投稿のサムネイル画像（大サイズ）のURLを取得する。
$thumb_large_url = get_thumb_url('large');
//投稿ID 10 の投稿のサムネイル画像（大サイズ）のURLを取得する。
$thumb10_large_url = get_thumb_url('large',10);
//現在の投稿のサムネイル画像（フルサイズ）をimgタグで出力 （alt属性には記事タイトル）
echo '<img src="'.get_thumb_url().'" alt="'.get_the_title().'">';
こんな感じ！
さて、先ほどの関数を呼び出してみましょう。
例：get_thumb_url()の使い方
//現在の投稿のサムネイル画像（フルサイズ）のURLを取得する。
$thumb_full_url = get_thumb_url();
//現在の投稿のサムネイル画像（大サイズ）のURLを取得する。
$thumb_large_url = get_thumb_url('large');
//投稿ID 10 の投稿のサムネイル画像（大サイズ）のURLを取得する。
$thumb10_large_url = get_thumb_url('large',10);
//現在の投稿のサムネイル画像（フルサイズ）をimgタグで出力 （alt属性には記事タイトル）
echo '<img src="'.get_thumb_url().'" alt="'.get_the_title().'">';
こんな感じ！
コメント
コメント一覧 （2件）
$thumb10_large_url = get_thumb_src(‘large’,10);
↓
$thumb10_large_url = get_thumb_url(‘large’,10);
ご指摘ありがとうございます。修正しておきました！