:: ワードプレス(WordPress)のアイキャッチ画像の縦横比を維持してサムネイルを表示するテクニック

/ , / WEB制作・開発

ワードプレス(WordPress)を使って不特定多数でサイトを運営する際によく発生する、画像の縦横比率問題についてのエントリーです。 例えば、4:3の画像を維持したデザインしていても、アップロードする画像サイズによっては縦横比が崩れてしまう場合があります。どんな画像がアップロードされても必ず縦横比を維持するテクニックを共有します。

 

    

 

画像の縦横比率問題

WordPressのadd image sizeを使うことで、画像をアップロードした時に指定した画像サイズを自動的に作成することが出来ます。  icon-external-link 関数リファレンス/add image size 例えばアイキャッチ画像を以下のように設定していたとします。

画像をアップした時に360*270以下の画像がアップされると縦横比が崩れてしまいます。

サンプル例

横幅360px * 縦幅150pxの画像をアップすると、blog-list-bigの画像サイズは横幅360px * 縦幅150pxになります。

これはアップロードされた画像の縦横サイズが指定したサイズに満たないことで起こります。  

きれいに整頓されている状態↓ 

 

 

デザインが崩れてしまっている状態

  これを解決するには画像をアップする制限をすれば解決できますが、上記デザインだと、360 * 270pxの画像アップ制限をかけなくてはいけません。 360 * 270px以下の画像サイズはよくありますし、このサイズで制限をかけた方が問題になりそうです。    

 

 

解決方法

  1. アップロード出来るサイズを制限します
  2. blog-list-bigが360 * 270pxだった場合はblog-list-bigを表示しなかった場合はblog-listを表示します。

 

アップロード出来るサイズを制限します

最低限の必要サイズを制限します。SNSのために必要な最低サイズである200 * 200px以下はアップロード出来ないようにします。 以下をfunctions.phpに書くことで、管理者以外は200 * 200px以下の画像はアップ出来なくなります。

 

blog-list-bigが360 * 270pxだった場合はblog-list-bigを表示しなかった場合はblog-listを表示します。

以下のソースコードをアイキャッチ画像を取得したい場所に書き込みます。 やっていることは、 「投稿画像のファイル名と拡張子、ディレクトリを取得して360×270の画像が存在するかチェックして、あった場合となかった場合で表示する画像を切ける」 です。

  • 5行目で、投稿のアイキャッチ画像情報を取得します。
  • 6〜8行目で、ファイル名、拡張子、ディレクトリを取得します。
  • 10行目でblog-list-big(360 * 270px)の画像ファイル名を生成します。これはWordpressのファイル名生成ルールに沿って定義しています。
  • 14〜19行目でファイルが存在した場合と存在しない場合の処理を書きます。

  なかった場合にblog-list(200 * 150px)の画像サイズを読み込むため、画像が少し荒れてしまいますが、縦横比がずれてしまうよりはいいのでこれで良しとしました。 以上が、ワードプレス(WordPress)のアイキャッチ画像の縦横比を維持してサムネイルを表示するテクニックです。是非参考にしてみてください!

SNS SHARE

LEAVE A REPLY