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>

ウェブサイト制作や動画制作のご相談はお気軽に

今すぐ問い合わせる

お問い合わせ

コメントは受け付けていません。

お問い合わせ・ご相談

お見積りのご依頼やそのほかのお仕事のご相談などはお問い合わせフォームからお問い合わせください。

お問い合わせする
会社案内ダウンロード

弊社の会社案内をPDFでご用意しております。社内での検討時などにご利用ください。

ダウンロードする

お電話でのお問い合わせはこちら

※電話番号はおかけ間違いのないようご注意ください。
※セールス目的のお電話はご遠慮ください。