ウェブデザイナーの毎日のお仕事のメモ - mainichi web まいにちウェブ

作成日:2021.01.04  最終更新日:2021.01.14

WordPress

【初心者の方向け】wordpressでアイキャッチ画像を表示したいときのメモ

wordpressの投稿・カスタム投稿などで、アイキャッチ画像を指定して、一覧表示させるときなどにアイキャッチ画像も表示するためのメモです。

投稿でアイキャッチ画像を使うための下準備

アイキャッチ画像を使えるように有効化するには、まず、
functions.phpに、以下の1行を書く必要があります。

add_theme_support( 'post-thumbnails' );

この記述を書くと、wordpressの管理画面の投稿ページで、右側の『投稿』欄の下の方に『アイキャッチ画像』の項目が表示されます。
以下の画像の部分です。

投稿で指定したアイキャッチを表示させる方法

以下のコードで、アイキャッチを表示できるようになります。

<?php if(have_posts()): while(have_posts()): the_post(); ?>
    <?php the_post_thumbnail('thumbnail'); ?>
<?php endwhile; endif; ?>

アイキャッチが指定されていない時に指定の画像を表示させる方法

以下のコードで、アイキャッチが指定されていなかった場合に、用意している他の画像を表示できるようになります。

<?php
  if (has_post_thumbnail()):
  the_post_thumbnail('thumbnail');
else:
?>
 <img src="noimage.jpg" alt="">
<?php endif; ?>

ちなみに、

the_post_thumbnail('thumbnail');

の太字にしている部分については、ご自身の用途によって書き換えます。
ちなみに、デフォルトでは、
thumbnail、medium、large、full
の4種類があり、サイズは以下の通りとなっています。

サイズ
thumbnail サムネイル 150 x 150
medium 中サイズ 300 x 300
large 大サイズ 1024 x 1024
full フルサイズ アップロードした元の画像のサイズ

最新記事