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サイト作る時、直ぐに思い出せ無かったりするので備忘録として掲載します。
※流用される場合は自己責任でお願いします。
ディスプレイ広告