こんにちは！福岡でホームページ制作を行なうシンス株式会社の越水です。

WordPressでホームページ制作をしているときに気を遣いたいのがアイキャッチ画像です。

記事一覧の見栄えを良くしてくれるアイキャッチ画像ですが、WordPressの場合、アップロードした画像ファイルはデフォルトで画像中央からトリミングされるようになっています。

こうしたトリミング位置のせいで、画像の見せたい部分がうまく表示出来ない場合が結構あります。

せっかくアイキャッチ画像を設定しても、思い通りの画像位置が表示できないとなんだかもやもやしますよね。

そこで今回はWordPressでアップロード画像の切り抜き位置を変更する方法を紹介します。

アップロード画像の切り抜き基準点を変更するにはfunctions.phpで関数を上書きする

デフォルトの切り抜き基準点についてはWordPressのコアファイルに記述があるのですが、コアファイルをいじってしまうとWordPressのバージョンアップ時にまたやり直しをしないといけません。

そこでfunctions.phpで切り抜き位置を設定している関数を上書きしてしまいましょう。

画像切り抜き位置を「画像の一番上、左右中央」に設定

以下の記述をfunctions.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 );

その他のトリミング位置に変更する場合

切抜き基準点を変更したい場合は上記ソースコードの$s_xと$s_yの値を書き換えます。 一応その他4パターンをならべて記載しておきます。 例えば基準点を左上にする場合は、

$s_x = 0;
$s_y = 0;

基準点を右上にする場合は、

$s_x = $orig_w;
$s_y = 0;

基準点を左下にする場合は、

$s_x = 0;
$s_y = $orig_h;

基準点を右下にする場合は、

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

などに書き換えれば良いでしょう。

アイキャッチ画像の切抜き調整は、WordPressでホームページ制作をするときに度々必要になるので覚えておくと便利だと思います。

画像をアップロードする都度切抜き位置を選びたいという場合は、次のようなプラグインを利用すると良さそうです。

アイキャッチ画像のトリミング位置を自由に変更するプラグイン「Thumbnail Crop Position」

参考サイト

今回の記事は以下のブログを参考にさせて頂きました。

【WordPress】アップロード画像の切り抜き基準点を「中心」から「左上」にする方法 | ITキヲスク

企業や商品の認知拡大を実現するホームページ制作、Webマーケティングのご要望にお応えします。