アイキャッチ画像を表示させる方法【WordPress】

WordPressの投稿・編集画面にアイキャッチ画像を登録できる項目を追加し、登録したアイキャッチ画像を記事ページに表示する方法をご紹介します。

functions.phpにアイキャッチ画像を表示させる記述を追記

※functions.phpファイル内に以下を追記することで、WordPressの投稿を編集画面にアイキャッチ画像が表示されます。

add_theme_support('post-thumbnails');

投稿を編集画面イメージ

赤枠箇所に「アイキャッチ画像を設定」が表示されます。

archive.php（投稿一覧ページ）にアイキャッチ画像を表示させる記述

※例としてarchive.php（投稿一覧ページ）に登録したアイキャッチ画像と投稿リンク・タイトル・カテゴリー名を表示させてみます。

	<?php if (have_posts()): ?>
            <ul>
            <?php while (have_posts()): the_post(); ?>
		<li>
			 <!--投稿リンク-->
		<a href="<?php the_permalink(); ?>">
<?php
	$image_id = get_post_thumbnail_id();
	//アイキャッチ画像のURLを取得
	$image_url = wp_get_attachment_image_src($image_id, true);
	if(has_post_thumbnail()):
?>
		   <!--アイキャッチ画像-->
<div class="thumb"><img src="<?php echo $image_url[0]; ?>" alt=""></div>
<?php endif; ?>
		<!--カテゴリー名-->
		<div class="cat">WEB</div>
		<!--タイトル-->
		<h2><?php the_title(); ?></h2>
		</a>
		</li>
            <?php endwhile; ?>
            </ul>
	<?php endif; ?>

　
WordPress使ってるとアイキャッチ画像の表示って結構当たり前ですが、WordPressサイト作る時、直ぐに思い出せ無かったりするので備忘録として掲載します。

　
※流用される場合は自己責任でお願いします。