【WordPress】画像のトリミングの基準点を変更する方法
MENU
  • 記事公開:2019/05/23
  • 最終更新:2019/09/15

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

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

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

WordPressのカスタマイズはお任せください。

WordPressのカスタマイズを格安で代行いたします。ご希望のカスタマイズがあればご相談ください。

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

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

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

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

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

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

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

以下のコードを「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サイトをカスタマイズしてみたら、バグが発生して困っている。正常に動作するように正しくカスタマイズしてほしい。

一つでも該当する方は、以下のリンクからチェックしてみてください。

詳細を確認する


著者:takaya kondo

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

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

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

コメントを残す

(必須)

CAPTCHA