【WordPress】画像のトリミングの基準点を変更する方法
MENU
  1. HOME
  2. WordPress / カスタマイズ
  3. 【WordPress】画像のトリミングの基準点を変更する方法

最近の作業実績

  • 2020年11月09日子テーマの導入で発生した不具合を修正いたしました。
  • 2020年11月09日LPサイトのレイアウトの崩れを修正いたしました。
  • 2020年11月04日カスタム投稿のアーカイブページで発生していた不具合を修正いたしました。
  • 2020年11月04日WordPressサイトのSEO対策に関するアドバイスをご提供いたしました
  • 2020年11月04日WordPressで構築されたサイトのトップページのデザイン一新しました
  • 2020年11月04日ループ部分のデザインを変更いたしました。
  • 2020年10月28日カスタム投稿専用のカレンダーウィジェットを実装いたしました。
  • 2020年10月28日内部SEO対策を最適化いたしました。
  • 2020年10月28日WordPressサイトのサーバー移管を行いました。
  • 2020年10月28日新規サイト(WordPress)を制作いたしました
  • 2020年10月10日既存サイトをWordPressで再構築いたしました。
  • 2020年10月04日WordPress各ユーザーのユーザー名を変更いたしました。
  • 2020年10月04日PHPのバージョンアップに伴うデータベース確立エラーを解消いたしました。
  • 2020年10月04日WordPressサイトのサーバー移管を担当いたしました。
  • 2020年10月04日複雑怪奇なテーマ構造の一部を分かりやすく再構築いたしました。
  • 2020年10月04日既存サイトにWordPressを導入いたしました。
  • 2020年09月29日WordPress、プラグイン、テーマ、PHPのバージョンアップを行いました。
  • 2020年09月29日WordPressのセキュリティ対策を導入いたしました。
  • 2020年09月22日WordPressのパスワードをデータベースから直接変更いたしました。
  • 2020年09月21日WordPressテーマにオリジナルのPHPファイルを実装いたしました。
  • このエリアには直近の制作実績を一部掲載しております。
  • 制作実績はリアルタイム反映ではありません。

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

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

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