WordPressのサムネイルの大きさを自由に変更して表示する方法【トリミング方法もあり】

今回はWordPressのサムネイルのサイズを変更する方法と、画像比を崩さずにトリミングする方法を紹介します！

大前提：サムネイルを有効化

WordPressは最初からサムネイルが使用できるわけではありません。

functions.phpに以下の記述があるか確認してください。

add_theme_support( 'post-thumbnails' );

この記述があって初めてサムネイルを使用できるようになります。必ず書きましょう。

サムネイルのサイズを変更するには functions.phpにadd_image_size()関数を記述します。

add_image_size( $name, $width, $height, $crop );

例えばこんな感じで使います。

add_image_size( 'blog', 300, 200, true );

この場合、blogという名前で横300px縦200pxで切り抜きありの画像を使えるようになります。

これをサムネイルとして使いたい場合は以下のように書けばokですね。

<?php the_post_thumbnail('blog'); ?>

画像の切り抜きを指定した際の挙動を理解しておきましょう。

切り抜きを指定しない場合は指定したサイズにぴったりになるように画像を表示するので、レイアウトに問題が出る可能性があります。

一方、画像の切り抜きをtrueにすると、指定したサイズにちょうどいいように画像が切り抜かれます。つまり、画像比によっては端の方は切り取られます。

個人的には切り取った方がベターかなと思います。

「どうしても切り取りたくない！」という場合は、元の画像を出来るだけレイアウトに合うように用意するか、画像のwidthとheightを100%にしてぴったりに表示されるようにするのがいいと思います（若干比が崩れるかもですが…）

WordPressは画像をアップした時点で

の3種類のサムネイルを生成します。

新しいサムネイルサイズを追加するとさらに多くの画像が生成されるので、サーバーの容量を圧迫する可能性があります。

新しいサムネイルサイズの作りすぎには注意しましょう。

すでにアップした画像は新しいサムネイルサイズで使うことはできません。（サムネイルはアップした時点で生成されるため）

かといって全ての画像をアップし直すのはさすがに面倒なので、「Regenerate Thumbnails」というプラグインを使います。

このプラグインはサムネイルを再生成してくれます。すでにアップした画像にも新しいサムネイルサイズが使えます。

インストールして有効化したら「ツール→Regenerate Thumbnails」と進みます。

「Skip 〜」をチェックして、下のボタンをクリックします。

ちなみに上のボタンは「アップされた全ての画像を再生成」、下のボタンは「サムネイルのみ再生成」という意味です。

これだけでサムネイルの再生成ができます！

終わったらサムネイルのサイズが変わっているか確認しましょう。新しく追加したサイズに変わっていればokです！

サムネイルのサイズは簡単に追加でき、再生成もプラグインで一発です。

サムネイルをうまく使って魅力的なサイトを作れるようになるといいですね！

WordPressを基礎から勉強したい人は以下の本がオススメです！

基本的なテーマを実際に1つ作るので、手を動かしながら理解を深めることができますよ！

created by Rinker

ZennでCSS設計の
本を書きました！

「CSS設計をちょっと勉強したけど
結局よくわからなかった…」
そんな人に読んでほしい一冊です！