アイキャッチ画像のサイズを変更2 2016年11月21日

News -various

アイキャッチ画像のサイズを変更2

「array(100, 100)」のように幅と高さを指定する方法

幅100px、高さ100pxというサイズで表示

<?php the_post_thumbnail(array(100, 100)); ?>
the_post_thumbnail('thumbnail') --- サムネイル画像を表示
the_post_thumbnail('medium') --- 中サイズ画像を表示
the_post_thumbnail('large') --- 大サイズ画像を表示
the_post_thumbnail('post-thumbnail') --- アイキャッチ画像を表示
the_post_thumbnail() --- アイキャッチ画像を表示(上と同じ)

サムネイル、中サイズ、大サイズについてはそれぞれ、画像アップロード時に作成された各種サイズの画像が表示。
これは「設定」‐「メディア」メニューで設定されているサイズです。

============
アップロードするときにアイキャッチ画像のサイズを変更。

the_post_thumbnail()のように、カッコ( )の中に何も指定しなかった場合は、そのテーマで「アイキャッチ画像のサイズ」として設定されているサイズで表示されます(the_post_thumbnail(‘post-thumbnail’)と同じ)。

この「アイキャッチ画像のサイズ」は、たとえば、functions.phpの中でset_post_thumbnail_sizeという命令によって指定。
Twenty Twelveでは次のように設定されています。

Twenty Twelveのアイキャッチ画像のサイズ設定(functions.php)
 set_post_thumbnail_size( 624, 9999 );

これにより、アイキャッチ画像などに使う画像をアップロードする。
幅が624pxという画像が作成されます。
結果としてアイキャッチ画像のサイズを明示的に指定しなかった場合は幅624pxの画像(Twenty Twelveの場合)が表示されます。

==========
アイキャッチ画像の幅を250pxに変更
これで投稿や固定ページにアイキャッチ画像を設定すると、
uploadsフォルダには幅250pxのアイキャッチ画像が作成されます。

set_post_thumbnail_size( 250, 250, true )のように3番目のパラメータにtrueを指定すると、指定サイズで切り抜かれます。

==========
まとめ。
アイキャッチ画像のサイズを変更には2種類。

the_post_thumbnailで表示するときの画像サイズを設定。
set_post_thumbnail_sizeを使ってアップロード時の画像サイズを設定。
set_post_thumbnail_sizeでアイキャッチ画像のサイズを設定せず、表示するときもthe_post_thumbnail()のカッコ( )の中に何も指定しなかった場合は、単純にオリジナルの画像が表示される。
画面での見え方は、style.cssなどのスタイル指定に従う。

以上

LINE