【WordPress】子テーマからサムネイル画像サイズをオーバーライドする

WordPressでadd image sizeをオーバーライド

記事内に商品プロモーションが含まれる場合があります

子テーマでWordPressをカスタマイズしているときに、何かと困るのがfuctions.phpの関数のオーバーライドです。このページでは、WordPressの親テーマで指定されているサムネイル画像のサイズを、子テーマから変更する方法を紹介します。

親テーマを直接編集してはダメなの?

親テーマのfuctions.phpなどのファイルを直接編集すると、テーマをアップデートした際に、ファイルが上書きされてしまいます。つまり、アップデート後にファイルの編集を再度しなければならなくなります。

できれば子テーマでカスタマイズは完結

というわけで、できれば親テーマを触ることなく、子テーマだけでカスタマイズを行うのが理想的です。子テーマについては下の記事で詳しく解説しています。

add_image_sizeを子テーマからオーバーライドする方法

ここからは具体的な手順を解説をしていきます。

手順1:どのサムネイル画像をオーバーライドするか決める

まず、どの画像のサムネイル画像のサイズを変えるのかを決めましょう。親テーマのfuctions.phpなどのファイルを見ると、おそらく下記のようなコードが見つかるかと思います。

functions.php
add_image_size( '◯◯', 520, 300, true );

このコードによりWordPressにサムネイル画像を登録しています。

◯◯にはサムネイルの名前が入っています。上の例での520と300はそれぞれサムネイルの幅と高さのpx指定ですね。trueは「指定したサイズに画像をトリミングする」という指定になります。

手順2:子テーマにオーバーライド用のコードを書く

上の例では、520×300pxのサムネイル画像が登録されていますが、高さを半分(150px)にしたいとします。その場合には子テーマのfunctions.phpに下記のコードを追加します。

functions.php
//サムネイル画像をオーバーライド
function my_change_thumb_size() {
	add_image_size( '◯◯', 520, 150, true );
}
add_action( 'after_setup_theme', 'my_change_thumb_size', 11);
//END サムネイル画像をオーバーライド

変えたいサイズの値で指定しなおすわけですね。◯◯にはさきほどのサムネイル名と同じ名前を入れましょう。

親テーマで、add_image_sizeが含まれる関数がif(!function_exists())と定義されている場合には、上のようにオーバーライドする必要はありません。中身を変えた同名の関数を記述すればOKです。

手順3:Regenerate Thumbnailsでサムネイル画像を再生成

これで設定は完了ですが、すでにアップロードされている画像は新サイズに自動リサイズされません。そこで「Regenerate Thumbnails」というプラグインを使って、アップロード済みの画像も新サイズに変えましょう。

使い方は簡単。プラグインをインストール&有効化して「ツール」「Regenerate Thumbnails」「すべてのサムネイルを再生成する」をクリックするだけです。

同じカテゴリーの記事
同じカテゴリーの記事一覧
WordPressの使い方
サルワカ