【WordPress】アイキャッチ画像を表示、取得する関数のまとめ

コンテンツ

アイキャッチ画像を表示、取得できる関数

WordPressのアイキャッチ画像をユーザー側に表示したり取得できる関数をまとめました。

URLのみを取得したい場合やimgタグ付きで出力したい場合など、
案件によって処理が異なる場合も多々あります。
良ければ、こちらの記事を参考にしてみて下さい。

因みに、
アイキャッチを扱う場合には以下の様な関数が用意されています。

the_post_thumbnail()
get_the_post_thumbnail()
the_post_thumbnail_url()
get_the_post_thumbnail_url()
wp_get_attachment_image_src()

the_post_thumbnail()

まずは、基本のthe_post_thumbnail()からです。

こちらの関数は、imgタグとセットでアイキャッチ画像URLを出力してくれるので、
アイキャッチを簡単に表示できる便利なタグです。
このような形で出力されます。
<img width="150" height="150" src="https://deep-blog.jp/engineer/wp-content/uploads/2020/07/04-150x150.jpg" class="attachment-100x100 size-100x100 wp-post-image" alt="" />

一番オーソドックスな使い方は以下の様なコードになります。

・
・
<?php while($the_query->have_posts()):$the_query->the_post(); ?>
・
<?php if(has_post_thumbnail()): ?>
<?php the_post_thumbnail(); ?>
<?php endif; ?>
・
<?php endwhile; ?>
・
・

【アイキャッチの画像サイズを指定】

もし、アイキャッチの画像サイズを指定して出力したい場合は、
the_post_thumbnail("large")というように第一引数に画像サイズを指定することも出来ます。

指定できるのは、「thumbnail」「medium」「large」「full」です。
あと、array()で画像サイズを直接指定することも出来ます。
こんな感じです。
the_post_thumbnail(array(100, 100));

【altやclass、idなどを指定】

デフォルトのままだとaltが空になっています。
SEO上あまり良くないですね。

あと、imgタグにclassを指定したい場合もあります。

その場合は、第二引数に配列で指定することが出来ます。
altを指定する場合　=> array("alt" => "altの内容")
classを指定する場合　=> array("class" => "クラス名")
idを指定する場合　=> array("id" => "ID名")

複数設定する場合は、array("alt" => "altの内容", "class" => "クラス名")のようにまとめて設定すればOKです。
例：the_post_thumbnail("thumbnail", array("alt" => get_the_title(), "class" => "sample"));

また、imgタグにスタイルを直指定したい場合は、array("style" => "max-width:500px;max-height:500px;")とすることも出来ます。
要は、第二引数には配列で指定すれば何でもOKです。

get_the_post_thumbnail()

上記で説明したthe_post_thumbnail()はimgタグを出力してしまいますが、
imgタグを一旦取得したい場合にはget_the_post_thumbnail()を利用します。

基本的な使い方はthe_post_thumbnail()と似ていますが、
こちらの関数は、第一引数に記事ID、第二引数に画像サイズ、第三引数にaltやclassなどを指定することもできます。

出力したい場合にはecho()関数で出力する処理が必要です。

echo get_the_post_thumbnail("thumbnail", array("alt" => get_the_title(), "class" => "sample"));

the_post_thumbnail_url()

the_post_thumbnail_url()関数は、アイキャッチ画像のURLのみを出力してくれる関数です。

・
・
have_posts()):$the_query->the_post(); ?>
・
・
<?php while($the_query->have_posts()):$the_query->the_post(); ?>
・
<?php if(has_post_thumbnail()): ?>
<img src="<?php the_post_thumbnail_url(); ?>" alt="<?php get_the_title(); ?>">
<?php endif; ?>
・
<?php endwhile; ?>
・
・

the_post_thumbnail_url("large")というように第一引数に画像サイズを指定することも出来ます。
指定できるのは、「thumbnail」「medium」「large」「full」です。

get_the_post_thumbnail_url()

アイキャッチ画像のURLを取得して処理を行う場合には、
get_the_post_thumbnail_url()を利用します。

出力したい場合にはecho()関数で出力する処理が必要です。

こちらの関数は、第一引数に記事ID、第二引数に画像サイズを指定することもできます。
the_post_thumbnail($post->ID, "thumbnail");
※指定できる画像サイズは「thumbnail」「medium」「large」「full」です。

第一引数を指定しない場合には以下の様になります。
the_post_thumbnail("", "thumbnail");

wp_get_attachment_image_src()

wp_get_attachment_image_src()を使ってアイキャッチ画像のURLを取得することも出来ます。

使い方はこのような感じです。

<?php
$attach_id = get_post_thumbnail_id($post->ID);
$image = wp_get_attachment_image_src($attach_id);
?>
<img src="<?php echo esc_url($image[0]); ?>" alt="<?php get_the_title(); ?>">

こちらの関数は、第一引数に画像IDをしてします。
また、第二引数に画像サイズを指定することもできます。
the_post_thumbnail($post->ID, "thumbnail");

因みに、画像URL以外にも、横幅、高さ、真偽値（リサイズされいている場合はtrue、元のサイズの場合はfalse）を配列で取得することも出来ます。

//print_r($image)
↓
Array
(
[0] => https://deep-blog.jp/engineer/wp-content/uploads/2020/07/04-150x150.jpg
[1] => 150
[2] => 150
[3] => 1
)