ワードプレス(WordPress)を使って不特定多数でサイトを運営する際によく発生する、画像の縦横比率問題についてのエントリーです。 例えば、4:3の画像を維持したデザインしていても、アップロードする画像サイズによっては縦横比が崩れてしまう場合があります。どんな画像がアップロードされても必ず縦横比を維持するテクニックを共有します。
画像の縦横比率問題
WordPressのadd image sizeを使うことで、画像をアップロードした時に指定した画像サイズを自動的に作成することが出来ます。 関数リファレンス/add image size 例えばアイキャッチ画像を以下のように設定していたとします。
|
1 2 3 4 |
// アイキャッチ画像 add_theme_support( 'post-thumbnails' ); add_image_size( 'blog-list', 200, 150, true ); add_image_size( 'blog-list-big', 360, 270, true ); |
画像をアップした時に360*270以下の画像がアップされると縦横比が崩れてしまいます。
サンプル例
横幅360px * 縦幅150pxの画像をアップすると、blog-list-bigの画像サイズは横幅360px * 縦幅150pxになります。
これはアップロードされた画像の縦横サイズが指定したサイズに満たないことで起こります。
きれいに整頓されている状態↓↓
デザインが崩れてしまっている状態↓↓
これを解決するには画像をアップする制限をすれば解決できますが、上記デザインだと、360 * 270pxの画像アップ制限をかけなくてはいけません。 360 * 270px以下の画像サイズはよくありますし、このサイズで制限をかけた方が問題になりそうです。
解決方法
- アップロード出来るサイズを制限します
- blog-list-bigが360 * 270pxだった場合はblog-list-bigを表示しなかった場合はblog-listを表示します。
アップロード出来るサイズを制限します
最低限の必要サイズを制限します。SNSのために必要な最低サイズである200 * 200px以下はアップロード出来ないようにします。 以下をfunctions.phpに書くことで、管理者以外は200 * 200px以下の画像はアップ出来なくなります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
/** * 画像アップロードのバリデーション * 200px * 200px以上でないと画像をアップ出来ないように設定（画像サイズが小さいと縦横比率を維持出来ない） */ if (!current_user_can('administrator')) { // 管理者権限以外 function tc_handle_upload_prefilter($file) { $img=getimagesize($file['tmp_name']); $minimum = array('width' => '200', 'height' => '200'); $width= $img[0]; $height =$img[1]; if ($width < $minimum['width'] ) { return array("error"=>"画像の横幅サイズが小さすぎます。 横幅サイズは{$minimum['width']}px必要です。アップロード画像は{$width}pxです。"); } elseif ($height < $minimum['height']) { return array("error"=>"画像の縦幅サイズが小さすぎます。 縦幅サイズは{$minimum['height']}px必要です。アップロード画像は{$height}pxです。"); } else { return $file; } } add_filter('wp_handle_upload_prefilter','tc_handle_upload_prefilter'); } |
blog-list-bigが360 * 270pxだった場合はblog-list-bigを表示しなかった場合はblog-listを表示します。
以下のソースコードをアイキャッチ画像を取得したい場所に書き込みます。 やっていることは、 「投稿画像のファイル名と拡張子、ディレクトリを取得して360×270の画像が存在するかチェックして、あった場合となかった場合で表示する画像を切ける」 です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!-- Featuredイメージを取得 --> <?php if ( has_post_thumbnail() ) : ?> <?php //画像ファイル名を取得してファイル名と拡張子に分ける $featured_image = pathinfo(get_attached_file(get_post_thumbnail_id($post->ID))); $featured_image_filename = $featured_image['filename']; // ファイル名を取得 $featured_image_extension = $featured_image['extension']; //拡張子を取得 $featured_image_dirname = $featured_image['dirname']; //ディレクトリを取得 // 360-270の画像ファイル名を定義 $check_featured_image = $featured_image_filename . '-360x270.' . $featured_image_extension; // 360-270の画像ファイル名のディレクトリを定義して $check_file_pass = $featured_image_dirname . '/' . $check_featured_image; if (file_exists($check_file_pass)) { the_post_thumbnail('blog-list-big'); } else { the_post_thumbnail('blog-list'); } ?> <?php endif; ?> |
- 5行目で、投稿のアイキャッチ画像情報を取得します。
- 6〜8行目で、ファイル名、拡張子、ディレクトリを取得します。
- 10行目でblog-list-big(360 * 270px)の画像ファイル名を生成します。これはWordpressのファイル名生成ルールに沿って定義しています。
- 14〜19行目でファイルが存在した場合と存在しない場合の処理を書きます。
なかった場合にblog-list(200 * 150px)の画像サイズを読み込むため、画像が少し荒れてしまいますが、縦横比がずれてしまうよりはいいのでこれで良しとしました。 以上が、ワードプレス(WordPress)のアイキャッチ画像の縦横比を維持してサムネイルを表示するテクニックです。是非参考にしてみてください！
LEAVE A REPLY