get_the_post_thumbnail()

Q: get_the_post_thumbnail() と the_post_thumbnail() の違いは？

get_the_post_thumbnail() は、画像を返り値として取得しますが、the_post_thumbnail() はHTMLタグをそのまま出力します。

Q: 画像がないときにデフォルト画像を表示するには？

has_post_thumbnail() でチェックし、ない場合はデフォルト画像を表示します。 <?php if ( has_post_thumbnail() ) { echo get_the_post_thumbnail();} else { echo '<img src="' . get_template_directory_uri() . '/images/default.png" alt="デフォルト画像">';}?>

Function

2025/3/31 Monday

get_the_post_thumbnail() は、投稿または固定ページに設定されたアイキャッチ画像をHTMLタグとして取得するテンプレートタグです。このタグはHTMLを直接返り値として取得するため、カスタムレイアウトや条件に応じた画像の出力に使われます。

機能の説明

get_the_post_thumbnail() は、投稿のアイキャッチ画像をHTMLの<img>タグ形式で取得するために使用します。画像を直接画面に出力せず、返り値として受け取るので、後から出力を制御したい場合や変数に格納して使う場面で便利です。

引数

$post（オプション）：投稿IDまたは投稿オブジェクト。指定しない場合は現在の投稿が対象。
$size（オプション）：表示する画像のサイズ。デフォルトは 'post-thumbnail'。
$attr（オプション）：<img> タグの属性を配列形式で渡せます。

返り値

HTML形式の<img>タグ。

シンプルなコード例

<?php echo get_the_post_thumbnail(null, 'medium'); ?>

このコードは、現在の投稿のアイキャッチ画像を「中サイズ」で取得して表示します。

使い方の解説

get_the_post_thumbnail() は、テーマファイル内で画像を変数として取得し、その後にカスタマイズして出力したい場合に使われます。例えば、CSSクラスを条件によって切り替えたり、エラーハンドリングを挟むことができます。

get_the_post_thumbnail( int|WP_Post|null $post = null, string|array $size = 'post-thumbnail', array $attr = [] );

$post: 投稿IDまたはオブジェクト。nullの場合、現在の投稿が対象。
$size: 画像サイズを指定。thumbnail, medium, large, full などが利用可能。
$attr: 画像のclassやalt属性を設定する配列。

使用例

<?php 
$image_html = get_the_post_thumbnail(get_the_ID(), 'large', ['class' => 'featured-image', 'alt' => 'アイキャッチ画像']);
echo $image_html;
?>

このコードは、現在の投稿のアイキャッチ画像を「大サイズ」で取得し、class と alt 属性を追加して表示します。

一緒に使うことが多い関連タグ

`has_post_thumbnail()`

has_post_thumbnail() は、投稿にアイキャッチ画像が設定されているかを確認するためのタグです。これを使うことで、アイキャッチ画像の有無に応じた処理ができます。

<?php 
if ( has_post_thumbnail() ) {
    echo get_the_post_thumbnail(null, 'medium');
} else {
    echo '<p>画像がありません。</p>';
}
?>

このコードでは、アイキャッチ画像がある場合は「中サイズ」で表示し、ない場合は「画像がありません」というメッセージを表示します。

`get_post_thumbnail_id()`

get_post_thumbnail_id() は、アイキャッチ画像のIDを取得するためのタグです。IDから直接画像情報を取得したいときに使います。

<?php 
$thumbnail_id = get_post_thumbnail_id();
$image_url = wp_get_attachment_url($thumbnail_id);
echo '<img src="' . esc_url($image_url) . '" alt="アイキャッチ">';
?>

このコードでは、アイキャッチ画像のIDを取得し、その画像のURLを使ってHTMLの<img>タグを出力します。

追加情報を取得したい場合

アイキャッチ画像に関する詳細情報（例：画像のURLやサイズ）を取得する場合、wp_get_attachment_image_src() を使います。

`wp_get_attachment_image_src()` で画像のURLやサイズを取得

<?php 
$thumbnail_id = get_post_thumbnail_id();
$image_data = wp_get_attachment_image_src($thumbnail_id, 'full');
echo 'URL: ' . $image_data[0] . ', 幅: ' . $image_data[1] . 'px, 高さ: ' . $image_data[2] . 'px';
?>

このコードは、アイキャッチ画像のURLと、その幅と高さを取得して表示します。

出力できる情報

[0]：画像のURL
[1]：画像の幅（ピクセル）
[2]：画像の高さ（ピクセル）
[3]：true/false（画像が縮小されているかどうか）

想定されるトラブル

画像が表示されない

投稿にアイキャッチ画像が設定されていない可能性があります。

解決方法

has_post_thumbnail() を使って、アイキャッチ画像があるかを事前に確認しましょう。

カスタム投稿タイプでアイキャッチが使えない

カスタム投稿タイプでアイキャッチ画像のサポートが有効化されていない可能性があります。

解決方法

functions.php に以下のコードを追加します。

add_post_type_support('custom_post_type', 'thumbnail');

サイズが指定どおりでない

画像サイズがテーマに登録されていないか、切り抜き設定が異なる可能性があります。

解決方法

テーマのfunctions.phpで画像サイズを追加します。

add_image_size('custom-size', 400, 300, true);

Q&A

`get_the_post_thumbnail()` と `the_post_thumbnail()` の違いは？

get_the_post_thumbnail() は、画像を返り値として取得しますが、the_post_thumbnail() はHTMLタグをそのまま出力します。

投稿のIDを指定して他の投稿の画像を取得できますか？

可能です。以下のように投稿IDを指定します。

<?php echo get_the_post_thumbnail(42, 'thumbnail'); ?>

画像がないときにデフォルト画像を表示するには？

has_post_thumbnail() でチェックし、ない場合はデフォルト画像を表示します。

<?php 
if ( has_post_thumbnail() ) {
    echo get_the_post_thumbnail();
} else {
    echo '<img src="' . get_template_directory_uri() . '/images/default.png" alt="デフォルト画像">';
}
?>