WordPressでアイキャッチを記事一覧に表示する

料理ブログを書いていて、その一覧ページに、タイトルに合わせたアイキャッチの画像を並べたいと思いました。
アイキャッチの一覧 個別の記事ページで利用しているアイキャッチのサイズだと大きすぎます。
その大きな画像を無理やりwidthで縮めるのも、ページ表示のスピードを落とすだけなので避けたいです。

というわけで、記事のアイキャッチを使って、一覧に入る大きさになるように書き出させる方法をご紹介します。

function.phpに書く内容

まずは、アイキャッチを任意のサイズへ書き出す指示をします。


幅300px、高さ100pxに切り抜くという設定です。

falseとは
縮小時に切り抜きする場合はtrue、しない場合はfalseを指定(省略時はfalse)です。
ただ縮小しても、縦横の比率が変わらず綺麗に表示されるサイズであれば、falseにします。
比率が変わる場合は、trueでcrop(切り抜き)しましょう。

サムネイルはfunction.phpに書いた分だけ利用することが可能です。


function.phpにこのように書けば、アイキャッチとogpで利用することができます。

テンプレートに書く内容

次に、書きだしたアイキャッチを一覧へ表示させます。
index-thumbnailsを表示してください。無い場合は、「nothumbnail.png」を表示してください。という指示をしたコードです。
nothumbnail.pngを用意しておくと、デザインが綺麗にまとまりますね。

個別記事に書くアイキャッチ

ちなみに、個別記事ページでのアイキャッチは以下のように書いてありますので、ご参考までに。

function.phpには、


single.phpには、


アイキャッチはブログにおいて、わりと重要かなと考えております。
もちろん、一番大切なのは、コンテンツですが、そこまで興味を持たせるのはアイキャッチだったりする場合もあります。

濃紺ピッチャーの料理ブログでは、アイキャッチを毎回丁寧に作ることで、サイトのクオリティをあげて、信頼性を高める効果があり、その結果が数字にあらわれているのではないかと考えております。