Single Post
アイキャッチにキャプションを出力する方法
アイキャッチ画像などに出典元や撮影場所の情報を表示する事は時々あると思います。先日、クライアント様よりご要望頂きWordPressのアイキャッチにキャプションを出力するコードを作成したので、備忘録も兼ねて記載しておきます。必要であれば、ご自由にコピーペーストしてお使いください。
<?php if(has_post_thumbnail()): /* アイキャッチ画像 */ ?>
<?php the_post_thumbnail( array(1000, 667) ); if(get_post(get_post_thumbnail_id())->post_excerpt) {
echo '<span class="img_caption">' . get_post(get_post_thumbnail_id())->post_excerpt . '</span>'; } ?>
<?php else: ?>
<img src="<?php echo get_template_directory_uri(); ?>/img/dummy.jpg" alt="イメージ画像" />
<?php endif; ?>
上記のコードではアイキャッチ画像の下にキャプションが表示されます。【span】で囲んでタイトルやブログ文章の文字と差別化できるようにしています。single.phpなどで表示させたい箇所に記載してください。
.img_caption{
font-size: 12px;
color: #555;
padding: 5px 0;
}
私は、上記のようにCSSを記載して使っています。上記コードにより、写真の下にキャプションが表示されるようになりました。
まとめ
画像のキャプションを上手く使うことによって、出典元表示、掲載意図、画像説明をする事ができます。写真をメインにサイト運営をされている方にとっては、撮影日時やカメラの設定なども詳細に説明できるので、画像キャプション出力はブログ記載者、閲覧者双方にメリットのある機能だといえます。
