WordPressでアイキャッチ画像のURLのみを取得して出力する方法

アイキャッチ画像に設定した画像をページに表示させる場合、imgタグに画像URLがはいった状態で欲しい場合と、画像URLのみが欲しい場合との2パターンあります。
画像を直接表示させる場合には、imgタグつきで問題ないのですが、CSSをつかって背景画像として表示させる場合にはimgタグ自体はいりません。
使用箇所に応じてアイキャッチの出力方法が異なりますので、この記事ではアイキャッチの出力方法について解説します。

アイキャッチに設定した画像を表示する方法

imgタグつきで表示する方法

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

‘画像サイズのID’には、thumbnail・medium・large・fullの4種類から選択して書き換えます。そこで選択した画像サイズで出力されます。

画像のサイズの違いについてはこちらの記事をご覧ください。

画像のURLのみを取得して出力する

画像のURLのみを取得して表示する

<?php the_post_thumbnail_url('画像サイズ'); ?>

投稿IDを指定して画像のURLを取得して表示する

<?php echo get_the_post_thumbnail_url(get_the_ID(),'画像サイズ');

画像のURLのみを取得したいときの多くが、CSSのbackground-imageをつかって背景画像にアイキャッチを設定したいケースだと思います。
背景画像にアイキャッチ画像を設定する場合には、CSSファイルに記入するのではなくPHPファイルにエレメントとしてbackground-imageを書いてあげます。

<h1 style="background-image: url(<?php the_post_thumbnail_url('large'); ?>);">
	<?php the_title(); ?>
</h1>