【WordPress】画像のトリミングの基準点を変更する方法

この投稿は2019/09/15に加筆修正いたしました。

WordPressで画像のトリミングの基準点を変更する方法をご紹介しました。画像の中央を基準に行われるトリミングを、6つの基準から好きなものに変更することができます。コピペと簡単な修正で実装可能です。参考にしてください。

この記事は約 8 分で読めます。

今回は、WordPressで画像トリミングの基準点を変更する方法をご紹介します。

WordPressで画像をアップロードすると、アイキャッチ、カスタムサイズで予め設定したサイズに、画像が自動的にトリミングされます。

WordPressのトリミングは、画像の中央を基準とするのがデフォルトの状態です。

しかし、場合によってはトリミングの基準点を変更する必要が出てくるかもしれません。
私自身、過去の案件でトリミングの基準点を変更する場面に遭遇しました。

今回は、トリミングの基準点を変更する方法をまとめてみました。
参考にしてください。

WordPressで画像トリミングの基準点を変更する方法

画像トリミングの基準点を変更するのは、難しいカスタマイズではありません。
コードを追加するだけでトリミングの基準点を変更することができあｍす。

以下のコードを「function.php」に追記してください。

function my_awesome_image_resize_dimensions( $payload, $orig_w, $orig_h, $dest_w, $dest_h, $crop ){
 if( false ) return $payload;
 if ( $crop ) {
 $aspect_ratio = $orig_w / $orig_h;
 $new_w = min($dest_w, $orig_w);
 $new_h = min($dest_h, $orig_h);
 if ( !$new_w ) $new_w = intval($new_h * $aspect_ratio);
 if ( !$new_h ) $new_h = intval($new_w / $aspect_ratio);
 $size_ratio = max($new_w / $orig_w, $new_h / $orig_h);
 $crop_w = round($new_w / $size_ratio);
 $crop_h = round($new_h / $size_ratio);
 $s_x = ($orig_w - $crop_w) / 2;
 $s_y = 0;
 } else {
 $crop_w = $orig_w;
 $crop_h = $orig_h;
 $s_x = ($orig_w - $crop_w) / 2;
 $s_y = 0;
 list( $new_w, $new_h ) = wp_constrain_dimensions( $orig_w, $orig_h, $dest_w, $dest_h );
 }
 if ( $new_w >= $orig_w && $new_h >= $orig_h ) return false;
 return array( 0, 0, (int) $s_x, (int) $s_y, (int) $new_w, (int) $new_h, (int) $crop_w, (int) $crop_h );
 }
 add_filter( 'image_resize_dimensions', 'my_awesome_image_resize_dimensions', 10, 6 );

参考：WordPressで画像トリミングの基準点を上中央に

上記のコードを記述すると、トリミングの基準を【画像上部の中央】に変更できます。

この他をトリミングの基準にしたい場合、次の項をご覧ください。
詳しく説明しています。

今回の方法では、画像ごとに個別に基準点を指定することはできません。
調べた限りでは、画像ごとにトリミングの基準を変える方法はありませんでした。

WordPressのトリミングの基準点を自由に変更する

先ほどは、トリミングの基準を【画像上部の中央】に変更するコードをご紹介しました。
ここでは、それ以外を基準にする方法をご紹介します。

トリミングの基準を【左上】にする。
トリミングの基準を【右上】にする。
トリミングの基準を【左下】にする。
トリミングの基準を【右下】にする。
トリミングの基準を【画像下部の中央】にする。

個別に解説していきます。

基準を変更する方法

下記のコードは、先ほどご紹介したのと同じコードです。

function my_awesome_image_resize_dimensions( $payload, $orig_w, $orig_h, $dest_w, $dest_h, $crop ){
 if( false ) return $payload;
 if ( $crop ) {
 $aspect_ratio = $orig_w / $orig_h;
 $new_w = min($dest_w, $orig_w);
 $new_h = min($dest_h, $orig_h);
 if ( !$new_w ) $new_w = intval($new_h * $aspect_ratio);
 if ( !$new_h ) $new_h = intval($new_w / $aspect_ratio);
 $size_ratio = max($new_w / $orig_w, $new_h / $orig_h);
 $crop_w = round($new_w / $size_ratio);
 $crop_h = round($new_h / $size_ratio);
 $s_x = ($orig_w - $crop_w) / 2;
 $s_y = 0;
 } else {
 $crop_w = $orig_w;
 $crop_h = $orig_h;
 $s_x = ($orig_w - $crop_w) / 2;
 $s_y = 0;
 list( $new_w, $new_h ) = wp_constrain_dimensions( $orig_w, $orig_h, $dest_w, $dest_h );
 }
 if ( $new_w >= $orig_w && $new_h >= $orig_h ) return false;
 return array( 0, 0, (int) $s_x, (int) $s_y, (int) $new_w, (int) $new_h, (int) $crop_w, (int) $crop_h );
 }
 add_filter( 'image_resize_dimensions', 'my_awesome_image_resize_dimensions', 10, 6 );

先ほどのコードを比べると、赤文字になっている行が4つあります。

$s_x = ($orig_w - $crop_w) / 2;
 $s_y = 0;

上記の部分がコードの中に2箇所あります。
2行×2箇所＝4行。

この4つの行を修正することで、基準点を自由に変更することができます。

トリミングの基準を【左上】にする方法

トリミングの基準を【左上】にする場合、以下のようにコードを書き換えましょう。

$s_x = ($orig_w - $crop_w) / 2;
 $s_y = 0;

上記の部分を以下に書き換えます。

$s_x = 0;
 $s_y = 0;

書き換える場所は2箇所ありますので、注意してください。

トリミングの基準を【右上】にする方法

トリミングの基準を【右上】にする場合、以下のようにコードを書き換えましょう。

$s_x = ($orig_w - $crop_w) / 2;
 $s_y = 0;

上記の部分を以下に書き換えます。

$s_x = $orig_w;
 $s_y = 0;

書き換える場所は2箇所あります。

トリミングの基準を【左下】にする方法

トリミングの基準を【左下】にする場合、以下のようにコードを書き換えましょう。

$s_x = ($orig_w - $crop_w) / 2;
 $s_y = 0;

上記の部分を以下に書き換えます。

$s_x = 0;
 $s_y = $orig_h;

こちらも書き換える箇所は2箇所ですよ。

トリミングの基準を【右下】にする方法

トリミングの基準を【右下】にする場合、以下のようにコードを書き換えましょう。

$s_x = ($orig_w - $crop_w) / 2;
 $s_y = 0;

上記の部分を以下に書き換えます。

$s_x = $orig_w;
 $s_y = $orig_h;

こちらも2箇所を書き換えてください。

トリミングの基準を【画像下部の中央】にする方法

トリミングの基準を【画像下部の中央】にする場合、以下のようにコードを書き換えましょう。

$s_x = ($orig_w - $crop_w) / 2;
 $s_y = 0;

上記の部分を以下に書き換えます。

$s_x = ($orig_w - $crop_w) / 2;
 $s_y = $orig_h;

書き換える箇所は2箇所あります。

まとめ

WordPressで画像のトリミングの基準点を変更する方法をご紹介しました。

トリミングの基準を【画像上部の中央】にする。
トリミングの基準を【左上】にする。
トリミングの基準を【右上】にする。
トリミングの基準を【左下】にする。
トリミングの基準を【右下】にする。
トリミングの基準を【画像下部の中央】にする。

トリミングの基準を上記6つから選ぶことができます。

トリミングの基準は画像ごとに変更できません。
この点だけ注意が必要です。

Wordpressのカスタマイズや不具合など
何かお困りのことはありませんか？

Wordpressに関連するあなたのお悩み、解決いたします。
次のような方は、お気軽にご相談下さい。

Wordpressサイトをカスタマイズしたいが、やり方が分からないで困っている。カスタマイズの知識が豊富な人に任せたい。
Wordpressサイトに不具合が発生したが、直し方が分からない。不具合の修正経験が豊富な人に任せたい。
既存サイトにWordPressを導入したいが、やり方が複雑で自分ではできそうにもない。経験が豊富な人に任せたい。
WordPressがハッキングされたが修正の仕方が分からない。サイトを元通りにできる人を探している。
Wordpressで0からサイトを制作したいが、自分ではできそうにもない。プロにサイト制作を委託したい。

一つでも該当する方は、以下のフォームからお気軽にご相談下さい。

WordPressに関して今すぐ相談する

著者：takaya kondo

岡山在住のWordPress専門フリーランサーです。Wordpressを使ったWEBサイト制作を中心に10年間ほど活動させていただいています。

Wordpress関連の記事でお役に立てれば幸いです。

【関連記事】あなたが興味のありそうな関連記事をご紹介します。

2023/09/06
メディアにアップロードした画像が勝手に縮小される場合の対処法
メディアに画像をアップロードした時、画像サイズが勝手に縮小された経験はありませんか？この記事では、画像が勝手に縮小されないようにする対策についてまとめてみました。興味のある方は参考にしてください。記事を読む
2022/09/26
【WordPress】コンタクトフォーム7で本文が外国語だけなら送信できなくする方法
メールフォームの本文が外国語だけなら送信できなくする方法をご紹介しております。コードのコピペだけで導入できるようにしておりますので、興味のある方は参考にしてください。記事を読む
2023/10/16
【保存版】WordPressの条件分岐まとめ【42選】
WordPressのカスタマイズでよく使う条件分岐を41個まとめてみました。条件分岐を知れば、カスタマイズの幅がグンと広がります。参考にしてください。記事を読む
2022/09/15
【WordPress】get_post()が固定ページやウィジェットエリアで動作しない時の解決方法
get_post()が固定ページやウィジェットエリアで動作しない時の解決方法をご紹介しています。たった1行のコードを追加するだけで解決できる可能性がありますので、興味のある方は参考にしてください。記事を読む
2022/09/13
【WordPress】カテゴリー単位でRSSフィードを出力する方法
カテゴリー単位でRSSフィードを出力する方法をご紹介します。コピペで使えるコードを掲載しておりますので、興味のある方は試してみてください。記事を読む