ワードプレスでアイキャッチ（サムネイル）画像を任意のサイズで表示する

ワードプレスでサイトを作成し、特にブログ執筆をする際にはサムネイル（アイキャッチ）画像が、見た目の印象において重要になってきますね。

ただ、記事一覧のループ画面や、記事個別画面、サイドバー等、それぞれの場所に最適なサイズで画像を表示させたいものです。

もちろん共通の１つの画像を出力させて、CSS で大きさを調整することも可能ですが、無駄にサイズの大きな画像を読み込むと、サイト表示スピードの低下にもつながります。

そこで、今回は欲しい場所に欲しいサイズでサムネイル画像を出力する方法のご紹介です。

サムネイル画像を有効化させる

そもそもの大前提となりますが、ワードプレスでアイキャッチ画像を使用するには、この機能を有効化させておく必要があります。

ワードプレスはデフォルトでアイキャッチ画像を（おそらく）利用できませんので、設定がまだの方はここからスタートとなります。

functions.phpを編集

下記のコードを記述することで、サムネイル画像を利用できるようになります。

サムネイル画像の大きさを定義する

さて、ここからが本記事のメインとなります。

functions.phpを編集

はじめに、サイト内で使用するサムネイル画像の大きさを、必要な数だけ定義しておきます。
今回は、(1)ループ画面 (2)個別記事画面 (3)サイドバー の３箇所に表示させることを前提とします。

まずは、functions.php に下記を記載します。

上記は３種類の画像サイズについて、それぞれの名前とサイズを割り当てています。

(1)size_loop (2)size_single (3)size_side

当然ですが、名前はご自身で使いやすい内容に変更して問題ありません。

数値に関しては、横幅：縦幅の長さをピクセル値で指定しています。
こちらも欲しいサイズを記述して問題ありません。

テンプレートファイルに記述し出力する

上記のfunctions.php への記述で、画像サイズが定義されたので、あとは欲しい部分に表示させるコードを記載すれば完成です。

必要に応じて、index.php やsingle.php 等に下記のコードを記載してください。

ちなみに上記は、サムネイル画像出力の基本タグ（下記）をカスタムした格好になります。

以上、ワードプレスでサムネイル画像を任意のサイズで表示する方法のご紹介でした。