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

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

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

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');で、
ない場合は別の保存場所にある画像を読みに行きます。

コメント

タイトルとURLをコピーしました