WordPress 画像のトリミングサイズに関するガイド

WordPress 3.9 は、内部的に非常に強力な機能を備えて登場しました。多くの新機能の中でも素晴らしいのは、WordPress にアップロードされた画像の切り抜き位置を制御できる機能が追加されたことです。これは本当に洗練されています。

先に進む前に、WordPress コアに組み込まれたこの素晴らしい貢献をしてくれた Brad Touesnard に多大な感謝を申し上げます。これは、この新機能の活用方法を詳しく説明するだけでなく、この機能の範囲全体をよく理解して理解する絶好の機会になると思いました。

はじめに – 画像サイズの追加またはカスタマイズ

デフォルトでは、WordPress はイメージの 3 倍の追加バージョンを生成します。「サムネイル」、「中」、「大」バージョン。アップロードされた元の画像サイズは「フル」バージョンと呼ばれます。

デフォルトのカスタマイズ

これらの各トリミングサイズのデフォルト値は、非常に簡単に上書きできます。 WordPress ダッシュボードの [設定] >> [メディア] に移動して値を変更するか、次のようにテーマまたはプラグイン関数ファイルを介して変更することができます。

update_option('thumbnail_size_w', 250);
update_option('thumbnail_size_h', 250);
update_option('thumbnail_crop', 1);

サイズを追加する

この関数をテーマまたはプラグイン関数ファイルにすばやく簡単に配置できます。

add_image_size( $name, $width, $height, $crop );

最終的には次のようになります。

add_image_size( 'homepage-thumb', 250, 250, true );

ヒント: 追加の画像サイズには必ず独自の一意の名前を付けてください ;-)。

知っておくべきことはすべて、WordPress Codex から見つけることができます。

WordPress 3.9 以降の魔法 – 切り抜き位置の制御

パラメータ $crop は、以前は単なるブール値 (true または false) でした。したがって、true に設定されている場合は、ソフト比例クロップまたはハードクロップのいずれかになります (ハードクロップとソフトクロップの違いについては、さらに読み進めてください)。ただし、配列を使用してクロップ領域の位置 (x_crop_position、y_crop_position) を指定できるようになりました。私は中央から切り取られた画像が好きなので、たとえば関数は次のようになります。

add_image_size( 'homepage-thumb', 250, 250, array( 'center', 'center' ) );

$crop パラメータは引き続き true/false 値を受け入れ、Brad によれば完全な下位互換性があります。構文はCSSのbackground-positionプロパティの構文と同一であるため、デザイナーと開発者の両方にとって馴染みのある構文ですが、明確にするためにここではいずれの場合も構文を示します。

left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom

トリミングできました。どうやって使用すればよいでしょうか?

素晴らしいニュースです…全く同じです!!完全な内訳については、いつものように WordPress Codex を参照してください。いずれにせよ、ここに注意事項があります。テーマまたはプラグインでこのカスタムイメージを呼び出すには。私たちが使用した例では、次のようになります。

the_post_thumbnail('homepage-thumb');

または…

wp_get_attachment_url( get_post_thumbnail_id($post->ID, 'homepage-thumb') );

しかし、既存のすべての画像はどうなるのでしょうか?

ご存知のとおり、クロップサイズはアップロード時に循環して生成されます。これは、カスタムの切り抜き位置を追加したり、新しい切り抜きサイズを変更/追加してこの新機能を利用した後、アップロード時に生成されたものが残り、これらの新しい画像バージョンはいずれも利用できないことを意味します。クールではありません！

ああ、でも待ってください。幸いなことに、WordPress コミュニティには賢くて素晴らしい人たちがたくさんいるので、窮地を救ってくれます。サムネイルの再生成プラグインは次のとおりです。このプラグインは長い間存在しており、素晴らしいです。アップロードされた既存の画像をすべて循環し、追加またはカスタマイズした新しい画像サイズをすべて再生成します。うおおお問題が解決しました 🙂

ハード vs.ソフトクロップ - あなたが決めました

硬作物

ソフトクロップ

知っておくべきこと…

アップロードされた画像のいずれかの寸法（幅または高さ）が、設定されたトリミングサイズより小さい場合、その画像はスキップされ、そのサイズのバージョンは作成されません。 WordPress は、設定されたすべての画像サイズを循環し、生成しようとしているバージョンよりも大きい画像のバージョンのみを作成します。このような場合、テーマまたはプラグイン内で画像が取得され、存在しない場合、フォールバックとしてデフォルトで元の「フル」画像が使用されます。

この素晴らしい新機能をテーマやプラグインに実装して楽しんでください。さあ、画像をトリミングしてみましょう 🙂