WordPressのループ内でアイキャッチ画像を表示させる

WordPressのループ内でアイキャッチ画像を表示させる書き方とfunctions.phpの設定について

WordPress関連記事

• 

  【WordPress】ローカル開発からサーバーへ移行に便利な「Search Replace DB」の使い方

• 

  .htaccessでhttpにアクセスされたときに自動でhttpsに「www」のあり・なし統一して301リダイレクトする

• 

  WordPressの条件分岐タグでページを判別する

• 

  WordPressの投稿記事内に外部URLのOGPを取得してカードを作る

• 

  WordPressで取得したタイトルからHTMLタグを削除するthe_title_attribute()

• 

  【WordPress】ループ内で取得したパーマリンクやタイトルを変数に入れる

• 

  【WordPress】アイキャッチ画像のURLのみ取得して属性やクラスなどを自由にカスタムする

• 

  WordPressのループ内でアイキャッチ画像を表示させる

functions.phpの設定でアイキャッチ画像を有効にする

functions.php

add_theme_support('post-thumbnails');

一からfunctions.phpを作っていて、アイキャッチ画像の設定がないのに気づいて調べました。
上記のコードをfunctions.phpに記述すると記事内でアイキャッチ画像が設定できます。

ループ内でアイキャッチ画像を表示させる

php

<?php if(have_posts()): 
    while (have_posts()): 
        the_post();
        the_post_thumbnail('large'); 
    endwhile;
else : ?>
<p>表示できる記事がありません。</p>
<?php endif; ?>

アイキャッチ画像の表示部分はthe_post_thumbnail('large');です。
引数にthumbnail、medium、large、fullの中から選ぶと画像の表示サイズを変更できます。

アイキャッチ画像がない場合、別の画像を表示させる

php

<?php if(have_posts()): 
    while (have_posts()): 
        the_post();
        if (has_post_thumbnail()) : 
            the_post_thumbnail('large'); 
        else : ?>
            <img src="<?php echo TEMPLATEPATH; ?>/img/nowprinting.jpg" alt="画像準備中">
        <?php endif ; 
    endwhile;
else : ?>
<p>表示できる記事がありません。</p>
<?php endif; ?>

上のアイキャッチ画像の表示部分にif文でアイキャッチ画像があるかを判別します。
if (has_post_thumbnail()) : の部分です。
あるならそのままthe_post_thumbnail('large');で、
ない場合は別の保存場所にある画像を読みに行きます。