WordPressでアイキャッチ画像のURLのみを取得する方法です。よく使うわりに毎回ぐぐってしまうシリーズ。
この記事の目次
通常のアイキャッチ表示では余計なコードが多い
WordPressでは記事にアイキャッチ画像をつけることができます。そのアイキャッチ画像を表示させるとき、通常は「the_post_thumbnail」や「get_the_post_thumbnail」を使います。しかしこれだと、
<img width="XXX" height="XXX" src="https://XXX.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="">
のようにimgタグやclassごと出力されてしまいます。
余計なもんはいらん！シンプルにURLだけ欲しい！！ってなりますよね。なる。
wp_get_attachment_image_srcで取得する
基本的な使い方
アイキャッチ画像のURLのみ取得するには、「wp_get_attachment_image_src」を使います。
基本的な使い方はこう。
<?php wp_get_attachment_image_src( 表示したいアイキャッチ画像のID ); ?>
上記の「アイキャッチ画像のID」は「get_post_thumbnail_id」で取得します。
wp_get_attachment_image_srcの戻り値は、配列として返ってきます。配列の1番目、[0]がアイキャッチ画像のURLなので、それをechoで表示すればOKです。
例：ループ内の場合
<?php if ( have_posts() ) {
while ( have_posts() ) {
the_post();
$image_id = get_post_thumbnail_id(); //アイキャッチ画像IDを取得
$image = wp_get_attachment_image_src( $image_id ); //↑の画像IDの情報を取得
?>
<img src="<?php echo $image[0]; ?>">
<?php }
}
?>
↓もし、投稿にアイキャッチが付いていたり付いていなかったりする場合は、条件分岐で分けて、アイキャッチがない場合はNo Image画像を出す、などにすると親切ですね。
<?php if ( have_posts() ) {
while ( have_posts() ) {
the_post();
if(has_post_thumbnail()){ //アイキャッチ画像があったら
$image_id = get_post_thumbnail_id(); //アイキャッチ画像IDを取得
$image = wp_get_attachment_image_src( $image_id ); //↑の画像IDの情報を取得
$image_src = $image[0]; //↑の戻り値の1番目（URL）をsrcに入れる
}else{ //アイキャッチ画像がなかったら
//自分で用意したNo Image画像をsrcに入れる
$image_src = get_template_directory_uri() . "/noimage.png";
}
?>
<img src="<?php echo $image_src; ?>">
<?php }
}
?>
例：ループ外の場合
ループ外の場合も使い方は同じです。たとえばget_postsで任意の投稿を取得している場面ならこんな感じ。↓
<?php $args = array(); $posts = get_posts( $args ); foreach ( $posts as $post ) : setup_postdata( $post ); $image_id = get_post_thumbnail_id( $post->ID ); $image = wp_get_attachment_image_src( $image_id ); ?> <img src="<?php echo $image[0]; ?>"> <?php endforeach; wp_reset_postdata(); ?>
アイキャッチ画像のURLだけ取得できると、カスタマイズの幅が広がります。カスタマイズの幅が広がると、デザインの幅が広がります。たとえば「アイキャッチ画像はURLだけで取得できる」ということを知っていれば、その画像を背景にすることもできるなとか、cssの任意のクラス名をつけて料理できるなとか、そうしたことをデザインを作る段階から考えることができます。
というわけで、WordPressって楽しいなという記事＆備忘録でした。