WordPressのアイキャッチ画像のサイズを確認したいんだど
どうも、Linです。ブラックサンダー、ビターです。
WordPressの記事に添える画像と知られるのが、
アイキャッチ画像
というもの。
これは文字通り「アイ」を「キャッチ」して、つまり、読者の目を引いて記事を読んでもらうための画像です。
WordPressテーマでは「アイキャッチ画像を設定しないものは存在しない」と言っても過言ではなく、ほぼ全てのテーマにこのアイキャッチ画像が組み込まれています。
アイキャッチ画像自体はいいのですが、問題は、
WordPressのテーマごとにアイキャッチ画像のサイズが異なる
という現象が起きていることです。
テーマごとに画像サイズが規定されているのです。
そのため、
「よし、アイキャッチ画像はこれだ！」
と適当に画像を設定すると、端が切れて表示されてしまって、画像を再編集するという悲劇が容易に起こり得ます。
というか、ぼくは毎回適当にアイキャッチ画像のサイズを決めていて、
「うーん、これぐらいでしょ？」
と設定していたたので、ときどき切れて失敗することがありました笑
そこで今日は、もう、金輪際、アイキャッチ画像のサイズを適当に決めるやつにはならない
と決めたので、
WordPressのテーマごとに異なるアイキャッチ画像のサイズを確認する方法
を勉強しながらまとめてみました。
WordPressのアイキャッチ画像のサイズの基本
まず、アイキャッチの基本から。
WordPressでは「functions.php」というファイルの中の、
という2つの関数がアイキャッチ画像のサイズを決めているのです。
じゃあ、この2つの関数はどう違うのか？というと、
set_post_thumbnail_size()は「デフォルトのアイキャッチ画像のサイズ」を設定しており、
add_image_size()は「デフォルト以外の新しいアイキャッチ画像のサイズ」を決めています。
この「新しいアイキャッチ画像のサイズ」とは、
- トップページの記事一覧のためのサムネイル
- サイドバーのサムネイル
など、記事内のアイキャッチ画像（デフォルトサイズ）以外の異なるアイキャッチ画像のことです。
アイキャッチを掲載する箇所によってサイズを変えたいときありますもんね。
どの関数をどういう感じで使うのかは本当にテーマごとによって異なるのですが、
テーマによっては、set_post_thumbnail_size()でデフォルトサイズだけ決めていたり、
set_post_thumbnail_sizeもadd_image_sizeもあって2種類以上のサイズを設定していたり、
add_image_sizeでいきなり複数のアイキャッチ画像を決めているものもありました。
これがWordPressのアイキャッチ画像の基本。
WordPressのアイキャッチ画像のサイズを確認する方法
この基本を踏まえると、アイキャッチ画像のサイズを確認する方法は次の3つのステップでいけます。
Step1. functions.phpを開く
アイキャッチ画像のサイズを規定しているファイル「functions.php」を開きましょう。
アイキャッチ画像のサイズを変更せず確認するだけですので、
WordPress管理画面からテーマ＞テーマの編集、
functions.phpと進めばオッケーです。
Step2. 「set_post_thumbnail_size」を探す
functions.phpの中から、
set_post_thumbnail_size
という記述を探します。
Ctl + Fを使うなりして、ファイルの中にある「set_post_thumbnail_size」という記述を見つけましょう。
set_post_thumbnail_sizeは、
set_post_thumbnail_size( 幅, 高さ, 切り抜きする？ )
という使い方をします。
例えば、
set_post_thumbnail_size( 840, 560, true );
となっていたら、
- 幅：840ピクセル
- 高さ：560ピクセル
- 切り抜きする
ということになりますね。
Step3. 「add_image_size」を探す
続いては、add_image_sizeという関数を見つけましょう。
「えっ、デフォルトのset_post_thumbnail_sizeだけ確認すればよくない？？」
と思うかもしれませんが、WordPressのテーマによっては、
- set_post_thumbnail_sizeがない
- add_image_sizeで複数の新しいサムネイルサイズを設定している
という場合があるのでこの関数も見ておく必要があります。
add_image_size関数の使い方は、次の通り。
add_image_size（アイキャッチ画像の名前, 幅, 高さ, 切り抜きする？）
です。
たとえば、次のような関数があったとしましょう。
add_image_size( 'home-thum', 360, 230, false );
この時、
- アイキャッチ画像の名前：home-thum（おそらくトップページのアイキャッチ画像サイズ）
- 幅：360
- 高さ：230
- 切り抜きしない
ということになります。
実際にWordPressのテーマのアイキャッチ画像を確認してみた
っと、ここまでがWordPressのアイキャッチ画像のサイズ確認方法でした。
最後に、この方法を用いて実際のテーマのアイキャッチ画像サイズを確認してみますね。
ぼくは別のサイトになりますがWordPressテーマ「ハミングバード」
を利用させてもらっておりましたので、このテーマのアイキャッチ画像のサイズを確認してみます。
funcitons.phpを開いて、まず「 set_post_thumbnail_size」を探してみるのですが、
ない！！
ということに気づきます。
えっ、じゃあ「add_image_size」はどうかな・・・と次の関数を探してみると、
ありましたありました！
functions.php内に次の3つの関数の記述が！
add_image_size( 'home-thum', 360, 230, true ); add_image_size( 'single-thum', 728, 9999 ); add_image_size( 'slide-thum', 728, 376, true );
ふむふむ・・・アイキャッチ画像の種類が3つもあるぞ・・・・
今回は投稿トップに表示されるアイキャッチ画像のサイズを確認したかったので、それっぽいやつを探してみると、
single-thum
という引数を発見。
名前からしてこいつが記事のサムネイルの大きさなのでしょう。
single.phpを確認してみると、
<?php the_post_thumbnail('single-thum'); ?>
という記述があり、アイキャッチ画像を表示する「the_post_thumbnail」という関数の引数にsingle-thumが設定されていたのでコレだ、と。
ってことで、記事トップのアイキャッチのサイズを決める関数が、
add_image_size( 'single-thum', 728, 9999 );
だったので、
- 幅 ：728ピクセル
- 高さ：無制限（9999はマックス値なので無制限）
- 切り抜きはしない（初期値はfalse）
となりますね。
こんな感じで、お使いのテーマごとによってWordPressのアイキャッチ画像のサイズを読み取って確認していきましょう。
それでは！
Lin
おそらく、ブロガー。現在ホテル暮らしで全国フラフラしています。
ネット広告代理店に1年3ヶ月勤め上げ、独立をして丸4年が経ちました。今年でフリーランス 5年目。
質問・ご意見・相談があればLINEで受け付けていますのでお気軽にどうぞ 。
