アイキャッチ画像をサムネイルとして一覧ページに表示する方法 | OXY NOTES

実際にアイキャッチ画像を一覧ページに表示してみます

作業するにあたって注意点があります。サムネイルのサイズを指定する機能は新しくアップロードした画像から有効になります。「functions.php」等で指定するサイズを変更しても、既にアップロード、表示しているサムネイルのサイズは変わりません。面倒でもテストの時は、一度画像を削除して、再アップロードして確認するようにしてください。

今回は2つ目の方法で表示してみます。
1.「functions.php」の最後に以下のコードを追加。

1	add_image_size( 'single-post-thumbnail', 200, 160, true );

2.続いて「loop.php」の140行目あたり「<div class=”entry-meta”>」の上に以下のコードを追加。

1 2 3 4 5

<div class="thumbnail"><!-- CSSでデザイン用クラスの追加 -->      <a href="<?php the_permalink(); ?>"><!-- 投稿のリンクを取得 -->      <?php the_post_thumbnail( 'single-post-thumbnail', array('title' => ''.get_the_title().'') ); ?><!-- サムネイルの画像タイトルを投稿タイトルへ変更 -->      </a> </div>

3.メディアライブラリ画面で画像をアップロードしたら、「アイキャッチ画像として登録」をクリック。

実際のコード変更：loop.php　青字追加

<?php /* How to display all other posts. */ ?>

<?php else : ?>
<div id=”post-<?php the_ID(); ?>” <?php post_class(); ?>>
<h2 class=”entry-title”><a href=”<?php the_permalink(); ?>” rel=”bookmark”><?php the_title(); ?></a></h2>

<?php /* ——-How to display all other posts. ——-*/ ?>
<div class=”thumbnail”><!– CSSでデザイン用クラスの追加 –>
<a href=”<?php the_permalink(); ?>”><!– 投稿のリンクを取得 –>
<?php the_post_thumbnail( ‘single-post-thumbnail’, array(‘title’ => ”.get_the_title().”) ); ?><!– サムネイルの画像タイトルを投稿タイトルへ変更 –>
</a>
</div>
<?php /* ——-How to display all other posts. ——-*/ ?>

<div class=”entry-meta”>
<?php twentyten_posted_on(); ?>
</div><!– .entry-meta –>

 

情報源: WordPressでアイキャッチ画像をサムネイルとして一覧ページに表示する方法 | OXY NOTES