WordPress:アイキャッチ画像の確認と出力

WordPressアイキャッチ画像を表示する場合のアイキャッチの存在確認出力方法をメモします。

アイキャッチが設定されているかどうか調べる場合は「has_post_thumbnail()」関数を使用します。
また、「the_post_thumbnail()」関数でアイキャッチ画像を出力することができます。

下記にWordPressの「has_post_thumbnail()」「the_post_thumbnail()」の説明と記述方法を記載します。


has_post_thumbnail()

アイキャッチ画像が設定されているか確認します。

has_post_thumbnail()

記事を指定してアイキャッチ画像の確認を行う場合は
引数に記事IDを記述します。

has_post_thumbnail(記事ID)

アイキャッチ画像が設定されている場合はtrue、
設定されていない場合はfalseを返します。


the_post_thumbnail()

アイキャッチ画像を出力します。

the_post_thumbnail()

引数を指定することによってアイキャッチ画像のサイズやクラスなどを設定することが可能です。

the_post_thumbnail(サイズ, 属性)

サイズや属性は配列で指定します。


アイキャッチ画像の確認と出力

アイキャッチ画像が存在するかどうかを「has_post_thumbnail()」を使用して確認します。

アイキャッチ画像が存在する場合は「the_post_thumbnail()」で出力します。
存在しない場合は「no image」などを出力するといいと思います。

<?php
// アイキャッチ画像の確認
if ( has_post_thumbnail()) {
    // 存在する
    the_post_thumbnail();
}
else {
    // 存在しない
    echo '<img src="noimage.jpg">';
}
?>

投稿記事をループさせて上記のコードを記述するようにすれば、
アイキャッチ画像を表示することができます。

<?php if (have_posts()): ?>
<?php while (have_posts()): the_post(); ?>
    <div>
    <?php if (has_post_thumbnail()): ?>
        <?php the_post_thumbnail(array(200, 200), array( 'class' => 'thumbimg')); ?>
    <?php else: ?>
        <img src="<?php echo get_template_directory_uri(); ?>/img/noimage.jpg" />
    <?php endif; ?>
    </div>
<?php endwhile; ?>
<?php endif; ?>

アイキャッチ画像を使用するとその記事がどのような内容なのかを一目で閲覧者に伝えることができるので、
記事にあった画像を用意できれば、設定した方がいいと思います。

  • このエントリーをはてなブックマークに追加

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です