[WP]ループ内で、サムネイルのリンクを取得する方法！

2014年2月17日

しゅんぼー(@shun_kashiwa)です。今回はWordPressのテーマ作成のお話です。

ループ内で、サムネイルを取得するというと、基本は「the_post_thumbnail()」だと思います。
しかし、これだとimgタグごと出力されてしまい、自分で色々やりたい場合には不便です。

今回は、自分のメモも兼ねて、サムネイルのURLを取得して、いろいろ弄くる方法をご紹介します。

コード

コードはこんな感じです。

$image_id = get_post_thumbnail_id();
$image_url = wp_get_attachment_image_src($image_id, true);
echo $image_url[0]

$image_id = get_post_thumbnail_id();

$image_url = wp_get_attachment_image_src($image_id, true);

echo $image_url[0]

まず、1行目でサムネイルの画像IDを取得し、$image_idに代入します。

その後、そのsrcを「wp_get_attachment_image_src()」を使って取得。それが配列で返ってくるのですが、その1つ目の値がURLになります。

使い方

これを使えば、任意のクラスを付けて画像を出力するだけではなく、背景画像としても出力できます。

<?php
$image_id = get_post_thumbnail_id();
$image_url = wp_get_attachment_image_src($image_id, true);
?>
<div class="thumb" style="background-image:url('<?php echo $image_url[0]?>')">
</div>

<?php

$image_id = get_post_thumbnail_id();

$image_url = wp_get_attachment_image_src($image_id, true);

</div>

こんな感じのPHPをループの部分に書いてあげて

div.thumb{
width:500px;
height:300px;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}

div.thumb{

width:500px;

height:300px;

background-repeat: no-repeat;

background-position: center center;

background-size: cover;

}

こんな感じのCSSを書いてあげると、複雑な構造にせず、画像を中央に寄せられます（cover）。

これをJavaScriptとか使うと面倒くさいんですね。僕はそのためにこのコードを使っています。

さいごに

もじ、WordPressのテーマを作っていて、サムネイルをフィットさせたい場合は、是非使って下さい。

以上、しゅんぼー(@shun_kashiwa)でした。

Please Share !

Twitter Facebook Google+ LINE Hatebu