WordPressでアイキャッチ画像のサイズを変更する方法

アイキャッチ画像のサイズがバラバラなんやけどきれいに揃える方法はないんか？

テーマのアイキャッチ画像の設定サイズより小さい画像を使用していると表示サイズがバラバラになることがあるよ

なるほど。でも画像サイズを揃えるのはめんどくさいな…

そんな時はアイキャッチ画像のサイズを小さめに設定したらいいよ

アイキャッチ画像のサイズを変更するのには、WordPressを構成するファイルを変更する必要があります。必ず変更する前には、バックアップをとっておきましょう。

アイキャッチ画像のサイズを変更する方法は２種類あります。

1. set_post_thumbnail_size()で指定する方法
2. the_post_thumbnail()に指定する方法

２つとも行った場合、the_post_thumbnail()に指定する方法が優先されます。サイズの変更がうまくいかない場合は確認してください。

この後の説明は、アイキャッチ画像の設定ができる前提で進めます。もし、アイキャッチ画像が表示されていない方は、WordPressでアイキャッチ画像が表示されない場合の対処法の記事を見て解決しておいてください。

set_post_thumbnail_size()で指定する

この方法は、functions.phpファイルを編集します。次のコードをfunctions.phpファイルに追加してください。

set_post_thumbnail_size( 100, 100 );

()の中に書いてある数字は任意で指定できます。前から順番にアイキャッチ画像の幅、高さになります。

また数字の後ろにtrueという単語を入れると切り抜きモードになります。

set_post_thumbnail_size( 100, 100, true );

切抜きモードは画像がサイズに合わせてリサイズされることなく、切り抜きが行われます。

the_post_thumbnail()に指定する

この方法は、the_post_thumbnail()の()の中にアイキャッチ画像のサイズを指定する方法になります。

いくつか指定する方法があります。the_post_thumbnail()の場所がわからない場合、WordPressでカスタマイズするテンプレートを確認する方法の記事を参考にして修正箇所を探してください。

サイズを直接指定する方法

まずアイキャッチ画像のサイズを直接数字で指定する方法です。()の中に次のように数字を指定してください。

the_post_thumbnail( array( 100, 100 ) );

array( 100, 100 )にある２つの数字は任意で指定できます。前から順番にアイキャッチ画像の幅、高さになります。好みのサイズに合わせて数字を入力してください。

テーマに設定されている画像サイズを用いる方法

テーマに設定されている画像サイズを用いる方法です。設定 ≫ メディアから確認できるように、WordPressではもともといくつかの画像サイズを生成します。

これらの画像サイズをアイキャッチ画像にも適用することができます。次のコードを参考に、アイキャッチ画像に設定したいサイズを選択してください。

the_post_thumbnail( 'thumbnail' );   // サムネイル
the_post_thumbnail( 'medium' );      // 中サイズ
the_post_thumbnail( 'large' );       // 大サイズ
the_post_thumbnail( 'full' );        // フルサイズ (アップロードした画像の元サイズ)

新たに画像サイズを追加する方法

自分で画像サイズを定義して、それを利用する方法があります。

次のコードをfunctions.phpファイルに追加してください。

add_image_size( 'sample-thumb', 300, 9999 );

続いてthe_post_thumbnail()の記述を次のように変更してください。

the_post_thumbnail( 'sample-thumb' );

add_image_size()で最初に記載したキーワードをthe_post_thumbnail()に指定する形式をとります。

add_image_size()に設定するキーワードは好きなものを指定できます。また、その後に続く数字は任意のものを指定できます。数字は順番に画像の幅、高さを表します。

特にこだわりがなければ、初心者にはサイズを直接指定する方法がおすすめだよ