【WordPress】アイキャッチなどに使用する、アップロード画像のトリミング位置を変更する方法

2015年1月27日

| カテゴリー： WordPress

こんにちは！福岡でホームページ制作を行なうアイドットデザインの越水です。

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 &gt;= $orig_w &amp;&amp; $new_h &gt;= $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 );

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;

1 2	$s_x = 0; $s_y = 0;

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

$s_x = $orig_w;
$s_y = 0;

1 2	$s_x = $orig_w; $s_y = 0;

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

$s_x = 0;
$s_y = $orig_h;

1 2	$s_x = 0; $s_y = $orig_h;

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

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

1 2	$s_x = $orig_w; $s_y = $orig_h;

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

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

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

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

参考サイト

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

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

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

【WordPress】アイキャッチなどに使用する、アップロード画像のトリミング位置を変更する方法

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

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

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

参考サイト

Facebookページに「いいね！」して更新情報をチェック！

関連記事

WordPressのビジュアルエディタ表示を実際に公開されるページ表示に近づける方法

初めてWordPressオリジナルテーマを作る時に知っておきたい基礎

WordPressのカテゴリーをつくるときにカスタムフィールドを使って入力項目を追加する

【WordPress】投稿記事内にソースコードを綺麗に表示させるプラグイン Crayon Syntax Highlighter

WordPressで全てのカテゴリーの全記事を一覧表示させるページを作る

お気軽にお問い合わせください！