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

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などのプラグインと関連付けることもできます。

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

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

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


関連記事

WordPressの画像を連続で投稿に挿入する 連続で画像を投稿に挿入
WordPressにて何枚もの画像を連続で挿入したい時があります。メディアを追加ウィンドウを自動で閉じないカスタマイズを紹介します。
WordPressで関連記事一覧を表示する方法 WordPressで関連記事を一覧表示する
WordPressなどで記事の隅っこによく見かける関連記事の一覧。プラグインを使用せずに実装する方法を紹介します。
WordPressでの子ページの作り方 固定ページを階層化し親ページに子ページ一覧を表示
WordPressの固定ページを階層化し、親ページに子ページの一覧を表示する方法を紹介します。プラグイン不使用です。
アイキャッチ画像の上に半透明の帯と記事タイトルをテキスト表示 画像の上に半透明の帯とテキストを表示
最近よく見かける、画像の上に半透明の帯を表示しテキストを配置する方法。簡単なCSSで実現できますのでお勧めです。
WordPressの固定ページや投稿記事に個別にcssを追加する 固定ページや投稿記事ごとに個別のCSSとJavaScriptを追加
WordPressテーマのスタイルシートとは別に、記事やページごとに追加指定したいcssがある場合には、function.phpをカスタマイズすれば可能となります。JavaScriptも同様に可能です。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>