アイキャッチ画像を出力する方法【wordpress】

この記事の前提条件

対象: WordPress(テーマファイルの編集ができる環境)
難易度: ★☆☆
所要時間: 約3分

記事一覧や投稿詳細ページで、投稿ごとに設定したアイキャッチ画像を表示したい時に使うのがthe_post_thumbnail()です。基本の書き方と、アイキャッチが未設定の投稿でもレイアウトが崩れないようにする方法を紹介します。

目次非表示

基本の書き方
アイキャッチが未設定の場合に備える
まとめ

基本の書き方

ループ内(投稿一覧や投稿詳細のテンプレート)に、次の1行を記述するだけでアイキャッチ画像が出力されます。

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

引数の'medium'は、出力する画像のサイズ名です。WordPressは画像アップロード時に複数のサイズ(thumbnail・medium・large・fullなど)を自動生成しているので、用途に応じて使い分けます。表示サイズが小さい一覧ページでfull(元サイズ)を指定すると、無駄に大きな画像を読み込むことになり表示速度が落ちるので、なるべく実際の表示サイズに近いものを指定しましょう。

💡 独自サイズを使いたい場合

標準サイズがちょうど良くない場合は、functions.phpでadd_image_size()を使って独自のサイズを登録し、その名前をthe_post_thumbnail()に指定することもできます。

アイキャッチが未設定の場合に備える

アイキャッチ画像を設定し忘れている投稿があると、the_post_thumbnail()だけでは何も出力されず、記事一覧のレイアウトがガタつく原因になります。has_post_thumbnail()で「アイキャッチが設定されているか」を先に確認し、未設定の場合は代わりの画像を表示するようにしておくと安全です。

<?php if ( has_post_thumbnail() ): ?>
    <?php the_post_thumbnail( 'medium' ); ?>
<?php else: ?>
    <img src="<?php echo get_template_directory_uri(); ?>/images/noimg.jpg" alt="<?php the_title_attribute(); ?>">
<?php endif; ?>

代替画像(noimg.jpg)は、あらかじめテーマフォルダ内のimagesフォルダなどに用意しておく必要があります。alt属性にはthe_title_attribute()で投稿タイトルをそのまま出力しているので、画像自体は共通のダミーでも、それぞれの投稿に合ったテキストがスクリーンリーダーなどに伝わるようになっています。