WordPress 画像をCropで中心以外のでのトリミングの方向を指定する

wordpress crop aling
このエントリーをはてなブックマークに追加
PR

WordPressでは画像をアップロードすると自動で色々なサイズの画像を生成することが出来るのですが、その画像を生成するときに自動でトリミングを行うことが出来ますが、デフォルトでは中心部を基準にしたトリミングになりますがオプションを設定する事でトリミングの仕方を指定できます。

 

add_image_size の crop にオプションを追加してトリミングの方法を指定する

まずは、Wordpressで画像の生成の基本的な部分の説明になりますが。functions.php でアップロードされた画像から指定した画像サイズを生成する方法。

 

 

画像サイズを追加する場合

add_image_size( 'create_image_name', width, height );

//実例
add_image_size( 'category_random', 300, 300 );

指定の画像サイズを追加する場合は上記の文が基本になります。

  • create_image_name = 識別するための名前
  • width = 画像の横幅の指定 0を指定すると無制限 単位はピクセル
  • height = 画像の縦幅の指定 0を指定すると無制限 単位はピクセル

 

 

画像サイズを追加及びトリミングを行う場合

add_image_size( 'create_image_name', width, height, crop );

//実例
add_image_size( 'slide', 1000, 200, true );

自動トリミングを行う場合は、heightの指定の後にカンマを付け true とすることでcropが有効になりトリミングされます。trueのみとした場合は画像の中心を基準にトリミングが行われる。

  • create_image_name = 識別するための名前
  • width = 画像の横幅の指定 0を指定すると無制限
  • height = 画像の縦幅の指定 0を指定すると無制限
  • crop = トリミングのオプションの指定 true で有効 false で無効。 falseの時は省略可

 

 

画像サイズの追加及びトリミングで方向を指定する場合

add_image_size( 'create_image_name', width, height, array( 'Horizon', 'Vertical' ) );

//実例
add_image_size( 'big_image', 500, 300, array( 'left', 'top' ) );

トリミング方向を指定する場合は、cropの有効か無効か指定する箇所でarrayで縦軸と横軸での基準となる一を指定することでトリミングの方向を指定する事ができます。

  • create_image_name = 識別するための名前
  • width = 画像の横幅の指定 0を指定すると無制限
  • height = 画像の縦幅の指定 0を指定すると無制限
  • crop = トリミングのオプションの指定 true で有効 false で無効。 falseの時は省略可 。方向指定時には arrayを使用する
  • Vertical = 縦軸でのトリミングの開始地点を決める 指定出来る値は top center bottom
  • Horizon = 横軸でのトリミングの開始地点を決める 指定出来る値は left center right

 

WordPressの公式の日本語CODEXにはこの方法は紹介されていないようですが、実はcropの方向を指定することが可能で、Wordpressのコアファイル wp-includes/media.php に載っています。Wordpressでの画像の自動生成はよく使う機能のひとつでさらにWordpressは画像アップロード周りが良く出来ていますのでPCの方でリサイズとか圧縮とかトリミングとかはWordpressのテーマファイルの方でしっかり考えて工夫すると、ポンポンっとアップロードするだけで良くなる。

WordPressでは画像サイズの追加と設定をうまく使いこなすことで日々の更新でかなり時間短縮に繋げれれる部分であったりします、実はあまり知られていないこのオプションも有効に活用しましょう。

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)