the_post_thumbnail()

Q: the_post_thumbnail() で返り値として画像の URL を取得できますか？

the_post_thumbnail() は直接 HTML を出力するため、返り値を取得するには get_the_post_thumbnail() を使用します。 <?php $image_html = get_the_post_thumbnail(null, 'medium');echo $image_html;?>

Q: 特定の投稿のアイキャッチ画像を取得するにはどうすればいいですか？

the_post_thumbnail() にその投稿の ID を渡すことで、特定の投稿の画像を取得できます。 <?php the_post_thumbnail(42, 'thumbnail'); ?>

Q: アイキャッチ画像がない場合にデフォルト画像を表示するには？

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

Function

2025/1/4 Saturday2025/4/1 Tuesday

the_post_thumbnail() は、投稿や固定ページに設定されたアイキャッチ画像を出力するテンプレートタグです。

アイキャッチ画像をそのまま HTML の <img> タグとして表示するため、テーマファイルやカスタムテンプレートでよく使われます。

機能の説明

the_post_thumbnail() は、現在の投稿または指定した投稿に設定されているアイキャッチ画像を表示します。

サムネイルのサイズや属性を引数で指定でき、テーマ開発やカスタマイズに役立ちます。

引数

$size（オプション）: 画像のサイズを指定します（例: 'thumbnail', 'medium', 'full' など）。
$attr（オプション）: 画像の HTML 属性を配列形式で渡せます（例: class, alt など）。

返り値

HTML <img> タグを出力します（直接画面に表示するため、返り値はありません）。

シンプルなコード例

<?php the_post_thumbnail('medium'); ?>

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

使い方の解説

the_post_thumbnail() は、テーマのテンプレートファイル（例: single.php や content.php）の中で、投稿や固定ページのアイキャッチ画像を表示するために使用されます。

サイズの指定や属性の追加が可能なので、レイアウトに応じた柔軟な表示が可能です。

the_post_thumbnail( string|array $size = 'thumbnail', array $attr = [] );

$size: 画像のサイズ。WordPress のデフォルトサイズ（thumbnail, medium, large, full）や、add_image_size() で登録したカスタムサイズを指定可能です。
$attr: 画像のクラスや alt 属性などを設定する配列。

使用例

<?php 
the_post_thumbnail('large', ['class' => 'featured-image', 'alt' => '投稿のアイキャッチ']);
?>

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

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

`has_post_thumbnail()`

has_post_thumbnail() は、投稿にアイキャッチ画像が設定されているかをチェックするためのタグです。

これを使うことで、アイキャッチがあるときだけ the_post_thumbnail() を表示するように条件分岐ができます。

<?php 
if ( has_post_thumbnail() ) {
    the_post_thumbnail('medium');
} else {
    echo '<p>アイキャッチ画像が設定されていません。</p>';
}
?>

このコードでは、アイキャッチ画像が設定されている場合は「中サイズ」で表示し、ない場合はテキストメッセージを表示します。

使用例: 関連タグとの組み合わせ

<?php 
if ( has_post_thumbnail() ) {
    the_post_thumbnail('medium');
    echo '<p>この画像は ' . get_the_title() . ' のアイキャッチです。</p>';
}
?>

このコードでは、アイキャッチ画像を表示し、さらにその投稿のタイトルを使用して、画像の説明文を表示しています。

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

the_post_thumbnail() は画像を直接出力するため、返り値が必要な場合や追加の情報を取得したい場合は、get_post_thumbnail_id() や wp_get_attachment_image_src() などを組み合わせて使用します。

`wp_get_attachment_image_src()` で画像の URL を取得

<?php 
$thumbnail_id = get_post_thumbnail_id();
$image_src = wp_get_attachment_image_src($thumbnail_id, 'full');
echo '画像URL: ' . $image_src[0];
?>

このコードは、アイキャッチ画像の 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', 300, 300, true);

Q&A

`the_post_thumbnail()` で返り値として画像の URL を取得できますか？

the_post_thumbnail() は直接 HTML を出力するため、返り値を取得するには get_the_post_thumbnail() を使用します。

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

特定の投稿のアイキャッチ画像を取得するにはどうすればいいですか？

the_post_thumbnail() にその投稿の ID を渡すことで、特定の投稿の画像を取得できます。

<?php the_post_thumbnail(42, 'thumbnail'); ?>

アイキャッチ画像がない場合にデフォルト画像を表示するには？

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

<?php 
if ( has_post_thumbnail() ) {
    the_post_thumbnail('medium');
} else {
    echo '<img src="' . get_template_directory_uri() . '/images/default.png" alt="No Image">';
}
?>

まとめ

the_post_thumbnail() は、投稿や固定ページに設定されたアイキャッチ画像を表示するための便利なテンプレートタグです。

has_post_thumbnail() や get_post_thumbnail_id() などの関連タグと組み合わせることで、画像の有無に応じた表示切り替えや、特定のサイズ・属性を指定した画像表示が簡単に行えます。テーマ開発では、レイアウトに応じて最適な画像サイズやクラスを指定することで、デザインの自由度を高めることができます。