WordPress:アイキャッチ画像と一緒に画像に設定したキャプションを表示

Date :
Category :
WordPress » 画像
Share this :

WordPressの中でも使用頻度が高いアイキャッチ画像ですが、通常の表示方法だと画像に設定したキャプションはアイキャッチ画像と一緒に表示されませんので、自動的にキャプションも表示させるようにします。

WordPressに画像をアップロードした時や画像の編集で設定できるキャプションですが、どういったことに活用したら…なんて方も少なくないと思います。

例えば、画像の著作権情報を入力する項目としてキャプションを使用すれば、画像と一緒に表示させることができます。
更に、アイキャッチ画像を使用することによって、表示させたい箇所の記述を使い分ければ、その情報の表示非表示が自由に行えるようになります(アーカイブでは非表示 / 記事では表示など)。

通常、アイキャッチ画像を表示させるには、ループ内の表示させたい箇所に

<?php the_post_thumbnail(); ?>

と記述を行いますが、キャプションも一緒に表示させるにはこの記述を変更します。

アイキャッチ画像にキャプションを表示させる記述

single.phpなどのループ内の表示させたい箇所に以下を追加してください。
既にアイキャッチ画像を設置している場合は、その箇所の書き換えになります。

ループ内

<?php the_post_thumbnail();
	if(get_post(get_post_thumbnail_id())->post_excerpt) {
		echo '<span>' . get_post(get_post_thumbnail_id())->post_excerpt . '</span>'; } ?>

この例では、キャプションの内容を<span>タグで括っていますので、用途に合わせて使用したいHTMLタグに書き換えてください。

上の記述を行うとHTMLの出力は以下のようになります。

<img width="○○○" height="○○○" src="○○○.jpg" class="○○○" alt="○○○" />
<span>キャプションの内容</span>

キャプションを出力する記述はif文を使用していますので、キャプションを設定していなければ<span>タグも含めて出力は行わず、アイキャッチ画像のみが表示されるようになっています。

以上、「WordPress:アイキャッチ画像と一緒に画像に設定したキャプションを表示」でした。