アイキャッチ画像にキャプションを追加する

2017/1/16 WordPress

WordPressのアイキャッチ画像機能は以下のコードをfunction.phpに記述すると利用可能になります。

add_theme_support( 'post-thumbnails' );

設定したアイキャッチ画像を投稿で表示するときは通常以下の関数を使用します。

the_post_thumbnail();

これでアイキャッチ画像は表示されるのですが、キャプションも表示したい場合があっても表示できません。また、関数にキャプションを表示するための機能も特にないのでこの関数だけではキャプションを表示することができません。独自でキャプションを抽出して表示させるしかないようです。
そこで、the_post_thumbnail()関数の下に下記のコードを追記すると表示できるようになります。

echo (get_post( get_post_thumbnail_id() )->post_excerpt);

the_post_thumbnailで表示する画像をアップロードしたときに設定したキャプションを呼び出して表示しています。これでキャプションの表示はできるようになったのですが、このままでは投稿文と同じように表示され、表示位置やフォントサイズなどのスタイルが良くありません。
投稿文中に画像を挿入したときには、キャプションは文字が小さくセンタリングされて表示されます。それと同じように表示させようと思います。
通常画像を挿入したときにキャプションを表示するのは、WordPressがショートコードを使って表示できるようにしています。その処理でキャプション文字をpタグでくくって、画像を表示するためのimgタグと共にdivタグでくくって、特定のクラス名を付けています。そのクラス名でスタイルを指定しているので、同じクラス名を使って上記で表示できるようにしたアイキャッチ画像とキャプションをdivとpタグで指定すれば同じスタイルで表示ができます。
下記のように記述します。

<div class="wp-caption">
    <?php the_post_thumbnail();
    echo '<p class="wp-caption-text">' . get_post( get_post_thumbnail_id() )->post_excerpt . '</p>'; ?>
</div>

サイトのデザインによっては、画像(imgたぐ)の幅とdivタグの幅が異なる場合はキャプションは画像幅のセンタリングではなく、サイト幅のセンタリングになるかも知れません。その場合はスタイルシートで画像とdivの幅を合わせてあげれば、画像にセンタリングされてキャプションが表示できます。

シェアする

,