【3ステップでOK】WordPressのアイキャッチ画像のサイズを確認する方法

Sponsored Link


WordPressのアイキャッチ画像のサイズを確認したいんだど

どうも、Linです。ブラックサンダー、ビターです。

 

WordPressの記事を執筆した時に添える画像と知られるのが、

アイキャッチ画像

というもの。これは文字通りアイをキャッチして、つまり、読者の目を引いて記事を読んでもらうための画像です。

昨今のWordPressのテーマではこのアイキャッチ画像を設定しないものは存在しないと言っても過言ではなく、ほぼ全てのテーマにこのアイキャッチ画像が組み込まれています。

 

ただ、アイキャッチ画像が組み込まれているのはいいのですが、

WordPressのテーマごとにアイキャッチ画像のサイズが異なる

という現象が起きてきます。事前にテーマごとに画像サイズが規定されているのです。

そのため、

「よし、アイキャッチ画像はこれだ!」

と適当に画像を設定すると、端っこが切れて表示されてしまって、画像を再編集するという悲劇が容易に起こり得ます。

というか、ぼくは毎回適当にアイキャッチ画像のサイズを決めていて、

「うーん、これぐらいでしょ?」

と設定していたやつだったので、ときどき切れて失敗することが多数あったのです。

 

そこで今日は、もう、金輪際、アイキャッチ画像のサイズを適当に決めるやつにはならない

と決めたので、

WordPressのテーマごとに異なるアイキャッチ画像のサイズを確認する方法

を自分でも勉強しながらまとめてみました。

 

 

WordPressのアイキャッチ画像のサイズの基本

まず、アイキャッチの基本から。

WordPressでは、

「functions.php」というファイルの中の、

という2つの関数がアイキャッチ画像のサイズを決めているのです。

wordpress アイキャッチ画像 サイズ

じゃあ、この2つの関数はどう違うのか?というと、

set_post_thumbnail_size()は「デフォルトのアイキャッチ画像のサイズ」を設定しており、

add_image_size()は「デフォルト以外の新しいアイキャッチ画像のサイズ」を決めています。

wordpress アイキャッチ画像 サイズ

この「新しいアイキャッチ画像のサイズ」とは、

  • トップページの記事一覧のためのサムネイル
  • サイドバーのサムネイル

など、デフォルトサイズ以外と異なるアイキャッチ画像のことです。アイキャッチを掲載する箇所によってサイズを変えたいときはありますもんね。

 

どの関数をどういう感じで使うのかは本当にテーマごとによって異なるのですが、

テーマによっては、set_post_thumbnail_size()でデフォルトサイズだけ決めているやつだったり、

wordpress アイキャッチ画像 サイズ

set_post_thumbnail_sizeもadd_image_sizeもあって2種類以上のサイズを設定していたり、

wordpress アイキャッチ画像 サイズ

add_image_sizeでいきなり複数のアイキャッチ画像を決めているものもありました。

wordpress アイキャッチ画像 サイズ

 

これがWordPressのアイキャッチ画像の基本。

 

 

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(幅, 高さ, 切り抜きする? )

という使い方をします。

例えば、

となっていたら、

  • 幅: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(アイキャッチ画像の名前, 幅, 高さ, 切り抜きする?)

です。

 

たとえば、次のような関数があったとしましょう。

この時、

  • アイキャッチ画像の名前:home-thum(おそらくトップページのアイキャッチ画像サイズ)
  • 幅:360
  • 高さ:230
  • 切り抜きしない

ということになります。

 

 

実際にWordPressのテーマのアイキャッチ画像を確認してみた

っと、ここまでがWordPressのアイキャッチ画像のサイズ確認方法でした。

最後に、この方法を用いて実際のテーマのサイズを確認してみますね。

ぼくは別のサイトになりますがWordPressテーマ「ハミングバード」を利用させてもらっておりましたので、このテーマのアイキャッチ画像のサイズを確認してみます。

 

funcitons.phpを開いて、まず「 set_post_thumbnail_size」を探してみるのですが、

ない!!

ということに気づきます。

 

えっ、じゃあ「add_image_size」はどうかな・・・と次の関数を探してみると、

ありましたありました!

functions.php内に次の3つの関数の記述が!

ふむふむ・・・アイキャッチ画像の種類が3つもあるぞ・・・・

 

今回は投稿のトップに表示されるアイキャチ画像のサイズを確認したかったので、

single-thum

というやつが記事のサムネイルの大きさなのでしょう。現に、single.phpを確認してみると、

という記述があり、アイキャッチ画像を表示する「the_post_thumbnail」という関数の引数にsingle-thumが設定されていたのでコレだ、と。

 

ってことで、記事トップのアイキャッチのサイズを決める関数が、

だったので、

  • 幅 :728ピクセル
  • 高さ:無制限(9999はマックス値なので無制限)
  • 切り抜きはしない(初期値はfalse)

となりますね。

 

こんな感じで、お使いのテーマごとによってWordPressのアイキャッチ画像のサイズを読み取って確認していきましょう。

 

それでは!

Lin

飯橋凛(Ihashi Lin)

インターネット広告代理店を1年半で退職。
その後、副業として活動していたウェブメディア運営のフリーランスへ。
現在はプログラミングの勉強に励み、0からフリーエンジニアの道を目指す。最近はキムチをまとめ買いにはまっている。


Sponsored Link

コメントはこちらからお願いします!



もう1本読んでみる