[WordPress]アイキャッチ画像のURLを取得してサムネイルから大きい画像にリンクしてみる

アイキャッチ

最近またWordPressの案件ばかりやらせていただいてます下山です。
アイキャッチ画像を使ってると、よくある悩みが画像のURLだけ取得できないかな・・・ってことだと思います。




まずはアイキャッチ画像を使用するには?

オリジナルテーマでアイキャッチ画像を使用するにはfunctions.phpに以下を追加します。

add_theme_support('post-thumbnails');
set_post_thumbnail_size( 300, 300, true );

横300ピクセル、縦300ピクセルのサイズに切り抜きます。
引数にtrueとすると、画像をリサイズしたとき、はみ出す部分はカットされます。何も指定しなければ、画像はカットされず、幅と高さにあうように縮小されます。

functions.phpに上記を指定してないとアイキャット画像の機能すら使えないので注意が必要です。

アイキャッチ画像を表示する基本

まずは通常?のアイキャッチ画像を表示する方法を。

サムネイル画像
<?php the_post_thumbnail('thumbnail'); ?>

中サイズ画像
<?php the_post_thumbnail('medium'); ?>

大サイズ画像
<?php the_post_thumbnail('large'); ?>

アイキャッチ画像の指定サイズ
<?php the_post_thumbnail(); ?>

サイズ指定
<?php the_post_thumbnail(array(300, 300)); ?>

例えば<?php the_post_thumbnail(); ?>のように書くと<img src=”http://hoge.com/wp-content/uploads/2016/01/hoge.jpg” width=”300″ height=”300″>みたいに返ってきますね。

とここまではいつものアイキャッチ画像の使い方。

imgタグじゃなくてhttp://hoge.com/wp-content/uploads/2016/01/hoge.jpgを取得したい!

wp_get_attachment_image_src()関数を使用します。
wp_get_attachment_image_src()関数は画像のパスや幅、高さを配列で返してくれる関数です。

配列
[0] => http://hoge.com/wp-content/uploads/2016/01/hoge.jpg //画像のURL
[1] => 300 //幅
[2] => 300 //高さ

[0]を引っこ抜けばいいわけですね。

wp_get_attachment_image_src() の使い方

//アイキャッチ画像があるかないか
<?php if ( has_post_thumbnail() ) : ?>
<?php
//アイキャッチ画像のIDを取得
$img_id = get_post_thumbnail_id();
//サムネイルサイズの画像を$img_thimbnailに代入
$img_thumbnail = wp_get_attachment_image_src( $img_id , 'thumbnail' );
//大サイズの画像を$img_thimbnailに代入
$img_large = wp_get_attachment_image_src( $img_id , 'large' );
//aタグとimgタグに$img_thumbnailと$img_largeの[0]をそれぞれ配置
echo '<a href="'.$img_large[0].'" rel="group"><img src="'.$img_thumbnail[0].'" alt=""></a>';
?>
<?php else: ?>
//アイキャッチ画像の設定がない場合の処理(ダミー画像を表示)
<img src="<?php bloginfo('template_directory'); ?>/img/dmy.png" alt="">
<?php endif; ?>

ちょっとオマケまで付けてみましたが、これでリンクをしたり属性を追加したりできるようになりますね。
mediumやfullで画像サイズの変更もできます。変数名は変更しなくても大丈夫ですが、気持ち悪い方はmediumにしたら変数名を$img_mediumに変更してもいいと思いますよ。

まとめ

get_post_thumbnail_id()は覚えておくと便利な関数なのでぜひ活用してみてください。