WordPressでPHPを使ってアイキャッチ画像を取得する方法はいくつかあります。
今回は、アイキャッチ画像の取得方法について解説していきます。
WordPress のアイキャッチ画像を取得する方法
the_post_thumbnail()
the_post_thumbnail()は一番シンプルなアイキャッチ画像の取得関数です。
<img
width="346"
height="237"
src="https://sample.jp/wp-content/uploads/2022/06/image.webp"
class="attachment-post-thumbnail size-post-thumbnail wp-post-image"
alt=""
loading="lazy"
srcset="https://sample.jp/wp-content/uploads/2022/06/image.webp 346w, https://sample.jp/wp-content/uploads/2022/06/image-300x205.webp 300w"
sizes="(max-width: 346px) 100vw, 346px"
/>こちらの関数は、実行するとすぐに出力されるため、アイキャッチ画像を表示したい箇所でthe_post_thumbnail()を実行するのが一般的です。
出力せずに一度変数に格納したい場合は、get_the_post_thumbnail()を使用します。
画像サイズを指定する
アイキャッチ画像のサイズを指定して出力したい場合は、第一引数に画像サイズを指定します。
指定できるのはthumbnail(サムネイル) medium(中サイズ) large(大サイズ) full(フルサイズ)の4つです。
the_post_thumbnail('thumbnail');
the_post_thumbnail('medium');
the_post_thumbnail('large');
the_post_thumbnail('full');ここで指定できる画像サイズというのは、メディア設定の画像サイズで設定しているサイズになります。
こちらのサイズに依存しないサイズを指定したい場合はarray(150,100)のように数値で指定するようにしてください。
the_post_thumbnail(array(150,100));altタグやclassなども指定できる
作成しているテーマやプラグイン固有のclass名やaltタグを指定したい場合はarray("class" => "custom-wide", alt="text", "data-port"="west")のように配列を第2引数に与えます。
画像サイズを指定したくない(デフォルトのままにしたい)場合は、第一引数をnullにしておきましょう。
the_post_thumbnail(null,array("class" => "custom-wide", alt="text", "data-port"="west"));get_the_post_thumbnail()
the_post_thumbnail()はアイキャッチ画像を表示するHTMLをそのまま出力してしまいますが、一度変数に格納したい場合は、get_the_post_thumbnail()を使用します。
使い方は先ほど解説したthe_post_thumbnail()とほとんど同じですが、こちらは記事 ID を指定して、特定の記事のアイキャッチを取得することができます。
//現在の記事のアイキャッチを取得する
$img = get_the_post_thumbnail();
//投稿IDが243の記事のアイキャッチ画像を取得する
$img = get_the_post_thumbnail(243);
//投稿IDが243の記事の中サイズのアイキャッチ画像を取得する
$img = get_the_post_thumbnail(243,'medium');
//投稿IDが243の記事の中サイズのアイキャッチ画像を取得し、その際にalt属性を追加する
$img = get_the_post_thumbnail(243,null,array('alt' => 'text');異なる記事のアイキャッチ画像を取得することができるので、新着記事一覧でアイキャッチ画像を表示する際などに使用することが多いです。
the_post_thumbnail_url()
アイキャッチ画像の HTML ではなく、アイキャッチ画像の URL が欲しい場合もあるでしょう。
その場合はthe_post_thumbnail_url()を使用します。
<img src="<?php the_post_thumbnail_url(); ?>">get_the_post_thumbnail_url()
アイキャッチ画像の URL を出力せず、変数に格納したい場合はget_the_post_thumbnail_url()を使用します。
使い方はthe_post_thumbnail_url()とほとんど同じですが、記事 ID を指定できるため、現在の記事とは異なる記事のアイキャッチ画像の URL を取得することが可能です。
//現在の記事の
$url = get_the_post_thumbnail_url();
//投稿IDが243の記事のアイキャッチ画像の URL を取得する
$url = get_the_post_thumbnail_url();wp_get_attachment_image_src()
wp_get_attachment_image_src()は、自分でimgタグを構築する際などに使用します。
wp_get_attachment_image_src()は、画像IDを指定することで、URL・幅・高さ・リサイズされているかどうかを取得することが出来ます。
global $post;
$img_id= get_post_thumbnail_id($post->ID);
$image = wp_get_attachment_image_src($img_id);Array
(
[0] => https://sample.jp/wp-content/uploads/2022/06/image-150x150.webp
[1] => 150
[2] => 150
[3] => 1
)一度アイキャッチ画像のIDを取得しておく必要があるため、アイキャッチ画像の情報をwp_get_attachment_image_src()で取得する場合は、get_post_thumbnail_id()でアイキャッチ画像の ID を取得してからwp_get_attachment_image_src()でアイキャッチ画像情報を取得するようにしてください。
これら5つの方法が、PHP でアイキャッチ画像を取得する方法です。
基本的にはこの5つの方法を知っていたら問題ないので、使いやすい方法を採用すると良いでしょう。
