ワードプレスでサイトを作成し、特にブログ執筆をする際にはサムネイル(アイキャッチ)画像が、見た目の印象において重要になってきますね。
ただ、記事一覧のループ画面や、記事個別画面、サイドバー等、それぞれの場所に最適なサイズで画像を表示させたいものです。
もちろん共通の1つの画像を出力させて、CSS で大きさを調整することも可能ですが、無駄にサイズの大きな画像を読み込むと、サイト表示スピードの低下にもつながります。
そこで、今回は欲しい場所に欲しいサイズでサムネイル画像を出力する方法のご紹介です。
サムネイル画像を有効化させる
そもそもの大前提となりますが、ワードプレスでアイキャッチ画像を使用するには、この機能を有効化させておく必要があります。
ワードプレスはデフォルトでアイキャッチ画像を(おそらく)利用できませんので、設定がまだの方はここからスタートとなります。
functions.phpを編集
下記のコードを記述することで、サムネイル画像を利用できるようになります。
1 2 3 4 | function mysetup() { add_theme_support( 'post-thumbnails' ); } add_action( 'after_setup_theme', 'mysetup' ); |
サムネイル画像の大きさを定義する
さて、ここからが本記事のメインとなります。
functions.phpを編集
はじめに、サイト内で使用するサムネイル画像の大きさを、必要な数だけ定義しておきます。
今回は、(1)ループ画面 (2)個別記事画面 (3)サイドバー の3箇所に表示させることを前提とします。
まずは、functions.php に下記を記載します。
1 2 3 | add_image_size('size_loop', 200, 150, true); add_image_size('size_single', 640, 460, true); add_image_size('size_side', 100, 70, true); |
上記は3種類の画像サイズについて、それぞれの名前とサイズを割り当てています。
(1)size_loop (2)size_single (3)size_side
当然ですが、名前はご自身で使いやすい内容に変更して問題ありません。
数値に関しては、横幅:縦幅の長さをピクセル値で指定しています。
こちらも欲しいサイズを記述して問題ありません。
テンプレートファイルに記述し出力する
上記のfunctions.php への記述で、画像サイズが定義されたので、あとは欲しい部分に表示させるコードを記載すれば完成です。
必要に応じて、index.php やsingle.php 等に下記のコードを記載してください。
1 2 3 | <?php the_post_thumbnail('size_loop'); ?> <?php the_post_thumbnail('size_single'); ?> <?php the_post_thumbnail('size_side'); ?> |
ちなみに上記は、サムネイル画像出力の基本タグ(下記)をカスタムした格好になります。
1 | <?php the_post_thumbnail(''); ?> |
以上、ワードプレスでサムネイル画像を任意のサイズで表示する方法のご紹介でした。