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

わぷー

この記事を読めば…
WordPressでアイキャッチ画像のサイズを変更する方法がわかります。

アイキャッチ画像のサイズがバラバラなんやけどきれいに揃える方法はないんか?
テーマのアイキャッチ画像の設定サイズより小さい画像を使用していると表示サイズがバラバラになることがあるよ
なるほど。でも画像サイズを揃えるのはめんどくさいな…
そんな時はアイキャッチ画像のサイズを小さめに設定したらいいよ

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

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

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

2つとも行った場合、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 )にある2つの数字は任意で指定できます。前から順番にアイキャッチ画像の幅、高さになります。好みのサイズに合わせて数字を入力してください。

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

テーマに設定されている画像サイズを用いる方法です。設定 ≫ メディアから確認できるように、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()に設定するキーワードは好きなものを指定できます。また、その後に続く数字は任意のものを指定できます。数字は順番に画像の幅、高さを表します。

ポイント
数字に9999を指定すると、その幅・高さは無制限になります。幅に合わせてアイキャッチ画像のサイズをリサイズしたい場合は、高さを9999にしておきましょう。

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

参考

よかったらシェアしてね!
  • URLをコピーしました!