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