先日ワードプレスでのサイトを構築していまして

「アイキャッチ画像のURLを取得したい」という場面に出くわしました。

具体的に言えばbackground-imageにアイキャッチ画像を表示させるために、アイキャッチ画像の保存先URLを何とか取得したい、という感じです。

せっかくなのでこの方法も備忘録として残しておこうと思います。

（アイキャッチ画像を登録する方法が知りたい方はまた別の記事を参考にしてみてください。それは済んでいる前提で話を進めます。）

 <?php the_post_thumbnail(‘full’); ?>ではダメ

アイキャッチ画像の表示といえば<?php the_post_thumbnail(‘full’); ?>が思い浮かびますがこれではimgタグごと表示されてしまうのでアイキャッチ画像のURLだけを取得する、ということはできません。

ではどうすればいいのか。

実はぴったりのタグがありました。

<?php the_post_thumbnail_url( ‘medium’ );?>がver4.4以降は使える

 

<?php the_post_thumbnail_url( 'medium' );?>

こんなテンプレートタグがあるみたいです。’medium’の箇所はサイズを入れるところなので’thumbnail’, ‘medium’, ‘large’, ‘full’など合うものを入れればいいようです。

このタグを例えば

<div style="background: url(<?php the_post_thumbnail_url( 'full' );?>) center center; background-size: cover;">

みたいな感じで使ってあげればアイキャッチ画像をいい感じに背景として使うことができるみたいです。

以上でした。