[WP]ループ内で、サムネイルのリンクを取得する方法!
2014年2月17日
しゅんぼー(@shun_kashiwa)です。今回はWordPressのテーマ作成のお話です。
ループ内で、サムネイルを取得するというと、基本は「the_post_thumbnail()」だと思います。
しかし、これだとimgタグごと出力されてしまい、自分で色々やりたい場合には不便です。
今回は、自分のメモも兼ねて、サムネイルのURLを取得して、いろいろ弄くる方法をご紹介します。
コード
コードはこんな感じです。
1 2 3 |
$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になります。
使い方
これを使えば、任意のクラスを付けて画像を出力するだけではなく、背景画像としても出力できます。
1 2 3 4 5 6 |
<?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をループの部分に書いてあげて
1 2 3 4 5 6 7 |
div.thumb{ width:500px; height:300px; background-repeat: no-repeat; background-position: center center; background-size: cover; } |
こんな感じのCSSを書いてあげると、複雑な構造にせず、画像を中央に寄せられます(cover)。
これをJavaScriptとか使うと面倒くさいんですね。僕はそのためにこのコードを使っています。
さいごに
もじ、WordPressのテーマを作っていて、サムネイルをフィットさせたい場合は、是非使って下さい。
以上、しゅんぼー(@shun_kashiwa)でした。