ホームページ制作アトリエ

心えがおホームページ制作 atelier(アトリエ)は、ホームページ・動画制作、教育ICT・アプリ開発、名刺・ポスター・チラシの作成を行っております。

WordPressのサムネイルにオリジナルサイズを指定

カテゴリー:thumbnail, Wordpress
ワードプレスでは画像をUPすると、「オリジナル」「サムネイル」「中サイズ」「小サイズ」の4つの違うサイズのサムネイルがデフォルトで 「wp-content/uploads + 年月ベースのフォルダ」に、自動で保存されるようになっています。
a 中サイズと大サイズは、投稿記事内で使う事を想定としているので、オリジナルの幅と高さの比率を維持したまま、設定されている上限のサイズの範囲内で最大の大きさになるように縮小されます。
※ただし、これは設定されている上限サイズより大きな画像の場合のみで、それより小さいサイズの画像が保存された場合は作成されません。 サムネイルの場合は、サムネイルを実寸法にトリミングするかどうかが選べます。トリミングする場合は、オリジナルの画像を縮小した上で、指定のサイズで一部分を切り抜いて作成されます。
(使用しているテーマによって、又は拡張機能などが有効になっている場合は、この他にも画像が保存されている場合があります)
指定した縦または横の大きさでのリサイズ⇒「ソフトプロポーショナル」といい、
指定した大きさでの切り抜き⇒「ハードクロップ」といいます。

サムネイルとして表示させる

まず、投稿サムネイルを有効にするには、使用しているテーマの functions.php に以下のコードを追加する必要があります。

基本設定

次に、テーマ内のフォルダに記述するコードを見ていきます。

サムネイルを表示してくれる関数は以下の2つです。

the_post_thumbnail(ループ内)

…投稿編集画面で設定すると、その投稿のアイキャッチ画像を表示します。
サムネイル画像には、クラス “attachment-thumbnail” が付与されます。
書式the_post_thumbnail( $size, $attr );
パラメータ
$size(オプション)画像サイズ(整数 または 配列)
明示的に指定するときはキーワード(thumbnail, medium, large, full)
または幅と高さをピクセルで指定する要素 2 つの配列、例えば array(32,32)
初期値:functions.phpで set_post_thumbnail_size($width,$height,$crop_flag); でpost-thumbnailに設定した値
注意: トリミング(crop)はWP 3.0以上では動作しません。WP3.0以上では、まず、投稿においてサムネイルを指定することが必要です。その後、ダッシュボード内の「メディア」に進み、サムネイルを使用したいサイズにトリミングしてください。
$attr(オプション)(属性/値を配列で記述)  初期値:なし
詳細はwp_get_attachment_imageの依存関係にあるthe_post_thumbnailのソースを参照
しかしこれはループ内のみでしか使えません。ループ外の場合は以下の関数を使います。

get_the_post_thumbnail

…投稿記事/ページ編集画面で設定した投稿サムネイルを取得します。
サムネイル画像には、クラス “attachment-thumbnail” が付与されます。
書式echo get_the_post_thumbnail( $id, $size, $attr );
パラメータ
$id(オプション)投稿ID(整数)  初期値:投稿ID
$size(オプション)画像サイズ(文字列 または 配列)  初期値は:’post-thumbnail’
$attr(オプション)(文字列 または 配列)   初期値:なし

今回はループ内なので、the_post_thumbnail関数を使って以下のように記述しました。

b すると、右のようになりました。
どうやらこの記述では、ソフトプロポーショナル(オリジナルの幅と高さの比率を維持したまま、設定されている上限のサイズの範囲内で最大の大きさになるように縮小される)が選択されるようです。

んー、これだとデザイン的に少し。。。
サムネイルっぽく、ハードクロップ(オリジナルの画像を縮小した上で、指定のサイズで一部分を切り抜く)で表示させたいところです。
というわけで、新しいサムネイルのサイズを取得することにしました。

色々なサイズのサムネイルを作る

アイキャッチサイズの基本設定

set_post_thumbnail_size

…アイキャッチ画像のサイズを設定する
書式set_post_thumbnail_size($width,$height,$crop);
パラメータ
$width(オプション)アイキャッチ画像の幅を指定  初期値:0
$height(オプション)アイキャッチ画像の高さを指定  初期値は:0
$crop(オプション)トリミングする場合はtrue、しない場合はfalseを指定  初期値:false
内部ではすぐにadd_image_size関数が呼び出され、’post-thumbnail’という名前でアイキャッチ画像のサイズを登録している。
なおパラメータ$cropは正しく動作していない可能性がある。
function_exists関数
プログラミング言語PHPで、関数が定義済みかどうかを確認する関数。PHP マニュアル
▼function_exists関数はなくてもOK
ただし、これは上で書いたサムネイルのメディア設定画面で記述されていることと同じになるので書く必要はありません。

デフォルトで、アップロード時のサイズ以外でアイキャッチを設定

さて、やっときました。使うのはadd_image_size()です。

add_image_size

…アイキャッチ画像のサイズを設定する
書式add_image_size($name,$width,$height,$crop);
パラメータ
$name画像サイズの名前を指定
$width(オプション)アイキャッチ画像の幅を指定  初期値:0
$height(オプション)アイキャッチ画像の高さを指定  初期値は:0
$crop(オプション)トリミングする場合はtrue、しない場合はfalseを指定  初期値:false
今回は例として、130px130pxと100px100pxのサイズと通常サイズのアイキャッチ画像をつくってみます。 テーマのテンプレートへの記述

そんなわけで実装

c




この通り☆彡
ハードクロップでの表示に成功です♪