BLOG

ブログ

WordPressでアイキャッチ画像のURLを取得する方法

webデザインWordPress
WordPressでアイキャッチ画像のURLを取得する方法

WordPressでアイキャッチ画像のURLのみを取得する方法です。よく使うわりに毎回ぐぐってしまうノウハウシリーズ。

通常のアイキャッチ表示では余計なコードが多い

WordPressでは記事にアイキャッチ画像をつけることができます。そのアイキャッチ画像を表示させるとき、通常は「the_post_thumbnail」や「get_the_post_thumbnail」を使います。しかしこれだと、

のようにimgタグやclassごと出力されてしまいます。

余計なもんはいらん!シンプルにURLだけ欲しい!!ってなりますよね。なる。


wp_get_attachment_image_srcで取得する

基本的な使い方

アイキャッチ画像のURLのみ取得するには、「wp_get_attachment_image_src」を使います。

基本的な使い方はこう。

上記の「アイキャッチ画像のID」は「get_post_thumbnail_id」で取得します。

で、wp_get_attachment_image_srcの戻り値は、配列として返ってきます。配列の1番目、[0]がアイキャッチ画像のURLなので、それをechoで表示すればOK。


例:ループ内の場合

↓もし、投稿にアイキャッチが付いていたり付いていなかったりする場合は、条件分岐で分けて、アイキャッチがない場合はNo Image画像を出す、などにすると親切ですね。


例:ループ外の場合

ループ外の場合も使い方は同じです。たとえばget_postsで任意の投稿を取得している場面ならこんな感じ。↓


アイキャッチ画像のURLだけ取得できると、カスタマイズの幅が広がります。カスタマイズの幅が広がると、デザインの幅が広がります。たとえば「アイキャッチ画像はURLだけで取得できる」ということを知っていれば、その画像を背景にすることもできるなとか、cssの任意のクラス名をつけて料理できるなとか、そうしたことをデザインを作る段階から考えることができます。

というわけで、WordPressって楽しいなという記事&備忘録でした。