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

電脳備忘録

wordpressはアイキャッチ画像っていうのが設定できるんですね。でも表示方法がいまいちわからなかったので先人のお力を拝借(google検索)することにしました。
そしたらまさに私が実装したかったことやっていらっしゃる方がいました。ありがたいですね。

wp_get_attachment_image_srcというタグを使えばアイキャッチ画像の「URL,横幅,高さ」が配列で返ってきます。

アイキャッチ画像の「URL,横幅,高さ」を取得する[WordPress(WP)]

そのままコピーさせていただき必要個所だけ変更しました。

<?php
$thumbnail_id = get_post_thumbnail_id($post->ID);
$image = wp_get_attachment_image_src( $thumbnail_id, 'full' ); 
$src = $image[0]; //url
$width = $image[1]; //横幅
$height = $image[2]; //高さ
?>
<img  src="<?php echo $src ; ?>" width="<?$width?>" height="<?$height?>">

上記の例では画像サイズ「full」を設定していますが、他に「large(大サイズ)」「medium(中サイズ)」「thumbnail(サムネイル)」といったパラメータがあるようです。

get_the_post_thumbnail($id); // パラメータなし -> サムネイル
get_the_post_thumbnail($id, 'thumbnail'); // サムネイル
get_the_post_thumbnail($id, 'medium'); // 中サイズ
get_the_post_thumbnail($id, 'large'); // 大サイズ
get_the_post_thumbnail($id, array(100,100) ); // 他のサイズ

WordPress Codex 日本語版:get the post thumbnail
Newer
Older
Dark
Light
menu