ど素人から毛を生やす。<延>

WordPressのアイキャッチサイズを指定したい話

Web > WordPress 2014年9月18日(最終更新:3年前)

このページは2014.9.18に作成されています。時代の流れとそぐわない可能性があったり、僕が今以上のど素人だった頃の記事だったりするので、新しい記事を探してみるのも良いかもしれません。

どもです。
スマブラ3DSを購入した餅。です。

エムブレムのキャラ使いたいなーとか思っていたのに、
気づけば毎度のごとくカービィプレイヤーなうです。

可愛くて使い易いから仕方ないやん……
ルフレの使い方が未だによくわからんねん……

 

それはともかくWordPress。

WordPressでカスフィの画像やアイキャッチを使っていると、どうにもページが重い感じがしまして。

よく考えたら、フルサイズの画像をCSSで縮めている状態だったことに気づきました。
そら重いわ。

というわけで、今回はサムネイルやカスフィの画像サイズを調整したい話。

 

①アップロード時に自動生成される画像サイズについて

WordPressの気の利くところは、画像をアップロードした際に、
大中小とサイズ調整したものを作っておいてくれるところ。

これの設定を変更するには、「設定」→「メディア」へ。

h260918_2

これはデフォルト設定。

例えば400px*200pxの画像をアップロードすると、
150px*150pxのサムネイルと300px*150pxの画像が自動で作られます。
大サイズより小さいので、大サイズは作られません。頭良い。

テンプレ作るときは、まずここをサイトのデザインによって調整しましょう。

また、例えばトリミングした画像が2種類欲しい場合など追加で画像サイズが欲しいときは
function.phpに以下の一文を入れます。

add_image_size( 'size01', 520, 220, true );

add_image_size( 名前, 横px , 縦px )で新しい画像を設定できます。
また、その後ろにtrueをつけることで画像がトリミングになります。

複数設定する場合、

add_image_size( 'size01', 520, 220, true );
add_image_size( 'size02', 200, 150, true );

複数設置でおkです。

 

②アイキャッチやカスタムフィールドでサイズを指定する

投稿の中で登場する画像は管理画面から選択するので良いとして、
問題はアイキャッチ画像やカスタムフィールドで画像を設定した場合です。

アイキャッチ画像の場合、

the_post_thumbnail('size01');

the_post_thumbnailの中で画像サイズを呼び出します。
サイズは①で作成したものの他、

thumbnail サムネイルのサイズ
medium 中サイズ
large 大サイズ
full フルサイズ

と指定できます。

カスタムフィールドの場合は、

wp_get_attachment_image_src( post_custom('カスタムフィールド名'),'size01' );

で指定できます。
こちらもthumbnailなどの画像サイズが指定できます。

この記事は役に立ちましたか?
  • _(:3」∠)_ 面白かった  (0)
  • (・∀・) 参考になった (0)
  • (`・ω・´) 役に立った (0)