WordPressの記事タイトル一覧にアイキャッチ画像を表示

WordPressをカスタマイズし、記事タイトル一覧のページを作成している方は多いと思います。
そのページ内でタイトルと一緒にアイキャッチ画像を表示すれば、さらに見やすいページが完成すると思います。
この画像のようなページです。

とても簡単にできるカスタマイズなので、ぜひ挑戦してみてください。

the_post_thumbnailを使用する

アイキャッチ画像を表示する一番簡単な方法は、アイキャッチ画像を表示したい場所に、

<?php the_post_thumbnail(); ?>

上記コードを埋め込む方法です。
パラメータなしの状態では、メディア設定でのサムネイルのサイズのものが表示されます。

ちなみに、用意されているパラメータは、

the_post_thumbnail('thumbnail');       // サムネイル
the_post_thumbnail('medium');          // 中サイズ
the_post_thumbnail('large');           // 大サイズ
 
the_post_thumbnail( array(100,100) );  // 指定サイズ

このようになっています。

これだけでも、十分に見やすい記事タイトル一覧ページができますが、アイキャッチ画像が必ず正方形になってしまいます。
もっと自在にアイキャッチ画像を扱いたい場合には、次項目のやり方を試してみてください。

get_post_thumbnail_idを使うやり方

アイキャッチ画像のURLを取得し、imgタグにて画像を貼り付けることができれば、画像表示のさせ方についての自由度がかなり高くなります。
そんなやり方が下記のコードで可能となります。

<img src="<?php $image_id = get_post_thumbnail_id(); $image_url = wp_get_attachment_image_src($image_id, ”, true); echo $image_url[0]; ?>" />

通常のimgタグと同様に使用できますので、widthプロパティで画像の幅を指定したり、jQuery Colorboxなどのプラグインと関連付けることもできます。

私の場合は、アイキャッチ画像に記事へのリンクも設定し、下記のように使用しています。

<a href="<?php the_permalink(); ?>">
	<p><?php the_title() ?></p>
	<img src="<?php $image_id = get_post_thumbnail_id(); $image_url = wp_get_attachment_image_src($image_id, ”, true); echo $image_url[0]; ?>" width="100%" class="colorbox-0" />
</a>

widthについては、私の環境での設定なので、ご自身の環境に合わせて変更をしてください。
また、jQuery Colorboxの機能を動かすためにはimgタグのclassにcolorbox-***の設定が必要です。
詳細は割愛しますが私の場合は、この設定でjQuery Colorboxが機能します。

get_post_thumbnail_id応用編

get_post_thumbnail_idを使用すれば、こんな画像のようなアイキャッチ画像の表示ができます。
これは、アイキャッチ画像の縦横比を崩さずに縮小表示をし、さらに半透明の帯の上に記事タイトルをテキスト表示しています。
記事タイトルは画像ではなく、テキストにて表示をしているのです。
重要な部分なので2度言ってしまいました。
些細なことですが、テキストで表示をすればSEOにも良いだろうし、記事のタイトルを修正した時にも、もちろん新しいタイトルにて表示されますのでとても合理的です。

画像上に半透明の帯と記事タイトルをテキスト表示する方法については、またいつか別記事にて紹介しようと思います。

感想

WordPressのアイキャッチ画像の機能、実は最初は一切使用していませんでした。
アイキャッチ画像を表示する場面が思いつかず、存在意義が見いだせなかったのです。

しかし、アイキャッチ画像に関連したWordPressの関数が存在することを知り、記事タイトルの一覧ページを作成した時にアイキャッチ画像の使い道が思い浮かんだのです。
アイキャッチ画像、使いこなすことができればとても便利なものだと思います。

アイキャッチ画像の使い道がない場合でも、記事を作成する時にはアイキャッチ画像を登録しておくことをオススメします。