WordPressでアイキャッチ画像を利用する方法
- Jan 20, 2014
- Jun 22, 2020
- WordPress
今日はWordPressのアイキャッチ画像について、自作テーマを作成する中で調べてみたことをエントリーします。ひと昔前はブログの記事ひとつひとつにいちいち画像を設定するなんてことはしてなかったと思いますが、最近というかここ数年の流行というかどこまで主流になっているのかは分かりませんがどのブログを見ても必ずと言っていいほどアイキャッチ画像が設定されていますね。かく言う私も必ず入れていますけどね。印象として、何となく記事が読みやすくなる気がします。というわけでWordPressのブログでアイキャッチ画像を設定する方法（特にテーマを自作する際にやること）についてご紹介します。
advertisement
アイキャッチ画像とは
突然ですが、アイキャッチ画像に明確な定義とかってあるんでしょうかね。「アイキャッチ」は英語で書くと「Eye Catch」となるので、人の心を掴むと同様に人目を掴む、人目を引くみたいな意味でしょうか。イメージとしては、記事に関連した画像を表示することでその記事の内容がひと目で分かるようになり、記事も読みやすくなる、そんな気がします。その辺については以下の記事が参考になりました。
テーマを自作する際に必要なこと
さて、ここからは自作テーマにおいてアイキャッチ画像を使えるようにするために必要なことをご紹介します。自作以外のテーマ（デフォルト、無料、有料問わず）を使っている方は恐らく何も意識しなくて良いかと思いますが、自作テーマの場合、自分で設定しなければいけません。まずは、テーマファイルに「functions.php」を追加し（すでにある場合は追加しなくて大丈夫です）、その中に以下のコードを入力します。
<?php add_theme_support('post-thumbnails'); ?>次に、アイキャッチ画像を表示したい箇所に以下のコードを入力します。
<?php the_post_thumbnail(); ?>これだけ。これだけでアイキャッチ画像が表示されるようになります。簡単ですね！
アイキャッチ画像について細かく設定する
ここまで紹介したコードではアイキャッチ画像がアップロードしたままのサイズ（フルサイズ）で表示されます。では、アイキャッチ画像のサイズを変更するにはどのようにしたらよいのでしょうか。これも比較的簡単です。一番簡単なのは、アイキャッチ画像を表示したい箇所に記入したコードに以下の青文字の部分を追記します。追記した部分は、WordPress管理画面の「設定」→「メディア」で指定しているサイズに対応しています。
<?php the_post_thumbnail('thumbnail'); ?> // サムネイルのサイズ
<?php the_post_thumbnail('medium'); ?> // 中サイズ
<?php the_post_thumbnail('large'); ?> // 大サイズ
<?php the_post_thumbnail('full'); ?> // フルサイズどのサイズで表示したいかによって上のコードのどれかを入力します。ページによってアイキャッチ画像のサイズを変えたい時には便利な方法です。
画像のサイズをもっと細かく指定する
上のやり方でも比較的自由な大きさに変更できるのですが、本文中の挿入する他の画像との兼ね合いもあるため、アイキャッチ画像のみサイズを弄りたい時にはfunctions.phpに入力したコードに以下のように追記します。
例：横幅250px、縦幅100pxにしたい場合
<?php add_theme_support('post-thumbnails');
set_post_thumbnail_size( 250, 150, true ); ?>ちなみに、画像を縮小する際に切り抜きをする場合は「true」、しない場合（元画像をそのまま指定したサイズに縮小する）には「false」を指定します。デフォルトはfalseなので、切り抜きをする場合だけ「true」と入れればいいんでしょうね。こうすることで、アイキャッチ画像を表示させたい箇所に
<?php the_post_thumbnail(); ?>と入力すれば、横幅250px、縦幅100pxの画像が表示されます。ここまでは以下の記事を大いに参考にさせていただきました。
最後に
難しそうでしたけど、意外と簡単だったかもしれません。長くなりましたので今日はここで終わりますが、次回はアイキャッチ画像に使える写真サイトのご紹介と、アイキャッチ画像のキャプションについてエントリーしたいと思います。
advertisement
