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

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

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

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)