【WordPress】ループ中に投稿・固定ページのアイキャッチ画像を出力する方法

こんにちは！

WEB制作会社で働いている現役エンジニアです。

今回はWordPressのテーマの開発でループ処理中に投稿・固定ページ紐づいたアイキャッチ画像の出力方法についてご紹介します。

ループ処理中にアイキャッチ画像を出力する方法

アイキャッチ画像を出力する方法はとても簡単です。

早速ご紹介します。コードは以下になります。

<?php the_post_thumbnail(); ?>

この1行を書くだけでアイキャッチ画像が出力されます。

サイズを指定したい場合は引数にサイズを書いてあげましょう。

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

こんな感じに引数にthumbnailを入れてあげるとサムネイルサイズに出力されます。

他にもmedium,large,fullなど用意されているので必要な場合は使用してください。

各サイズは以下になります。

もっと詳しく知りたい人は下記をご覧ください。

先程のコードでアイキャッチは出力できますが、ページにアイキャッチ画像が登録されていない場合は何にも表示されて状態になっています。

ですので何も表示されないというのを避けるために、もしアイキャッチ画像が登録されてない場合は代わりの画像を表示するという条件分岐を追加してあげるのをおすすめします。

コード下記になります。

<?php if (has_post_thumbnail()) : ?> <?php the_post_thumbnail('thumbnail'); ?> <?php else : ?> <img src="代わりのデフォルト画像パス" /> <?php endif ; ?>

上記のコードでアイキャッチ画像が登録されてない場合はデフォルト画像が出力されます。

コードを書いたけどアイキャッチ画像が表示されないって人はfunction.phpに下記コードが書いてあるか確認しましょう。

add_theme_support('post-thumbnails');

こちらはアイキャッチ画像を有効にする処理です。

このコードが書いて場合はアイキャッチが表示されませんので注意が必要です。

またカスタム投稿タイプの場合は別でアイキャッチ画像を有効にする必要があるので注意が必要です。

いかがでしたでしょうか。アイキャッチ画像はとても簡単に出力できるのでとても便利です。

それではまた！