WordPress全般

WordPressに好きな大きさのサムネイルを自作して登録する方法

全般

今回は、WordPressに好きな大きさのサムネイルやアイキャッチを登録する方法を書き留めておく。

テーマで使われているアイキャッチを自作したアスペクト比に変更しなおしたいときや、オリジナルの要素を作りたいときに重要になる。

サムネイルのサイズって何とかならないの？

WordPressのカスタマイズを行っているとき、なかなか使用しているテーマだけでは融通が効かないときがある。

そのひとつが、サムネイルやアイキャッチの大きさだ。

例えば「9:16」で生成されるアイキャッチを「1:3」くらいのトリミングした横長の画像に変更したいとき、または「1:1」で生成されるサムネイルを「2:1」でトリミングした縦長の画像にしたいとき。

しかし、求めているアスペクト比がテーマで用意されていない場合はどうしたらいいものか……

functions.phpにコードを付け加えるだけ！

さて、WordPressにも現在使用しているテーマにも用意されていないサムネイルを生成して使いたいときはどうしたらよいのだろうか？

実は、WordPress専用のPHP関数をfunctions.phpに付け加えるだけで簡単に解決することができる。

add_image_size()で新しいサイズを登録しよう

さて、WordPressに新しいサムネイルのサイズを登録したいときは、下記のPHPコードを使おう。

PHPコード
add_image_size( $name, $width, $height, $crop = false );

この関数をfunctions.phpに入力するだけで、オリジナルのサイズのサムネイルを登録することができる。

関数の解説
  • 「$name」は画像サイズの識別子である。
    必ず入力しなければならない。
  • 「$width」は画像の幅である。単位はpx。
    必ず入力しなければならない。
  • 「$height」は画像の高さである。単位はpx。
    必ず入力しなければならない。
  • 「$crop」は画像を切り取るか否か、つまりトリミングの有無である。
    「false」ならば画像は拡大・縮小され、「true」ならば画像の中心を起点にトリミングされる。
    特に深い理由がない限り「true」を推奨する。

トリミングで画像を切り取る座標は、ある程度配列「array」で指定できる。このように「array（x、y）」と決めることが可能だ。

ただし、xの部分にはleft・center・right、yの部分にはtop・center・bottom、つまりどちらの座標もこの三種類のうちからひとつしか選べない。なので、pxや%を使って詳細に指定することは不可能。
例えば、自作したサムネイルはいつも左上を切り取りとって表示させたいのであれば「array( ‘left’, ‘top’ )」としよう。

このようにあまり融通が効かないので、細かく設定する必要は無いと考えている。

「$width」や「$height」にゼロを設定してはならない。

使用例

それでは表記法の見本も兼ねていくつか例を挙げたい。

PHPコード
// オリジナルサイズのサムネイル登録の例
add_image_size( 'mycus_thumb_240_135', 240, 135, false ); //　画像サイズ9:16、拡大or縮小
add_image_size( 'mycus_thumb_200_150', 200, 150, true ); //　画像サイズ3:4、中央トリミング
add_image_size( 'mycus_thumb_200_200', 200, 200, true ); //　画像サイズ1:1、中央トリミング
add_image_size( 'mycus_thumb_700_140', 700, 140, true ); //　画像サイズ1:2、中央トリミング
add_image_size( 'mycus_thumb_100_250', 100, 250, true ); //　画像サイズ5:2、中央トリミング
add_image_size( 'mycus_thumb_200_200_left_top', 200, 200, array( 'left', 'top' ) ); //　画像サイズ1:1、左上トリミング

このような形で追加したらよい。

なお、サムネイルの登録名は既存のものと被らず、かつ自分がいつか確認するときにわかりやすい命名を心掛けよう。

そして、これらのサムネイルを使用するときはこのように書こう。

PHPコード
// サムネイル名は''で囲ったまま使う
'mycus_thumb_700_140'

// 何かの関数のどこかで使っているときの例
$hoge -> ( 'hoge_hoge', 'mycus_thumb_700_140' );

基本的に、サムネイル名は「‘（アポストロフィー）」ごと使おう。

これで、サムネイルの新規登録と使用方法の説明は終わりになる。

だが、まだ少々問題が残っている。

既存の画像を対応させるには

さて、新しいサムネイルを登録した。しかし、PHPファイル上でサムネイル名を使用してもWebサイト上に呼び出されてない！

この原因は、今までアップロードした画像がそのままになっているからだ。なので、新たに登録したサムネイルに対応させるために今までアップロードした画像を生成し直さなければならない。

下記で紹介する画像再生成プラグインを使うことで、新たに登録したサムネイルも正しく呼び出すことが出来る。

自作したサムネイルが出力されていない問題を解決する【画像再生成】
mycus-tom.com

これで一件落着だ。

最後に

今回紹介したものは、すべてWordPressの関数なのでなにか不具合が起きることなどは考えにくい。

ただし、「;（セミコロン）」の忘れなどでエラーを引き起こす可能性もあるので、正しく入力できているか注意しよう。

今回は、WordPressのオリジナルのサムネイルの生成について忘れないうちに書き留めておいた。

Cocoonのカスタマイズを行う上で、サムネイルを変更したいと思ったことが何度かあったので。

この記事が役に立つと嬉しい。