WordPressでアイキャッチ画像を好きなサイズで設定・使う方法

Mission・任意のサイズのアイキャッチ画像を設定して思いのままのディスプレイを実現せよ

実はWordPressって、いろんなサイズのアイキャッチ画像が登録できるってご存知でしたか?

そもそもアイキャッチ画像とは?

WordPressで以前はサムネイル・thumbnailsと呼ばれていた、アイキャッチ画像。

今でもサムネイルと呼ばれたりするので、混乱しがちですが、同じものを指します。

記事の内容を端的に、視覚的に表現したり、読者を視覚的に惹きつけたり、注意を引くためのもので、やはり有る場合と無い場合ではインパクトが全く違いますので、上手に使いたいものですね。
最近の投稿アイキャッチの有無比較

プラグインなどで、このアイキャッチ画像と抜粋文やタイトルと共に、ページ内やサイドバー、フッターなどに一覧表示をすることで、現在のページだけでなく、他の記事への関心を引き、サイト内の回遊率を上げる効果もあります。

アイキャッチ画像を表示させるphpテンプレートタグ

WordPressテーマのテンプレート(phpのファイル)の中でこのアイキャッチ画像を表示させるWordPressのphpのテンプレートタグは以下のようになります。

<?php the_post_thumbnail(); ?>

ちなみに、”テンプレートタグ”とは、WordPressというプログラムの中で定められている、動作や実行のためのコードのことを言います。

<?php the_post_thumbnail(); ?>の場合は、この記述があったら、アイキャッチ画像をこの記述のある場所に表示させよ、と指示をする”テンプレートタグ”というわけです。

投稿ページのアイキャッチ画像の位置を変えたい場合には

アイキャッチ画像の場所を変更したい、または表示させたくないのであれば、このテンプレートタグの位置を変更または削除すればOKです。

テーマによって投稿ページのphpファイルが異なるので一概には言えないのですが、Twentyからテーマの場合はcontent.php内で<?php the_post_thumbnail(); ?>の位置を変更します。

例)TwentyThirteenの投稿ページアイキャッチ画像の移動例

タイトル上のアイキャッチ画像をタイトル下に移動
◆content.phpを編集
アイキャッチ画像移動例2013

◆Before After
アイキャッチ画像のタイトル下への移動例2013

アイキャッチのサイズを変更したい場合に、好みのサイズのアイキャッチ画像設定ができるのが、add image sizeという関数です。

視覚的に訴えかけるアイキャッチだからこそ、プラグインの一覧もかっこよく並べたい

一方、最初は回遊率アップの為に、ただ並べるだけだった一覧も、だんだんWordPressのカスタマイズにも慣れてくると、

「このサイドバーの最新記事一覧のアイキャッチ画像(:サムネイル)は、150x150の正方形じゃなくって、250 x 75 の横長に自動的に表示させることはできないかなぁ?」

なんて思いはじめるわけですね(笑)

一覧を作成するのが、サムネイル画像サイズを自由に指定できるプラグインなら設定時にサイズ指定することもできますが、

例)Newpost catch、WordPress Popular Posts

設定された画像サイズしか指定できないプラグインもあります。

例)Display posts shortcode、Childpages shortcode

このような時、画像サイズを追加登録することで、設定された画像サイズしか指定できないプラグインでも、お好みのサイズのアイキャッチ画像で表示させるようにすることができるのが、add image sizeという関数です。

では、このアイキャッチ画像の指定する関数、add image sizeをfunctions.phpに記述して、投稿記事やプラグインのアイキャッチ画像を、好みの画像サイズを登録する方法について見ていきましょう。

まずは画像サイズについての基本を把握。

アイキャッチ画像はメディアの設定でサイズ指定されている

最初に登録されている、画像サイズは、メディア設定の3種類です。
WordPressのデフォルトテーマのひとつ、TwentyFourteenだと、こんな感じ。
TwentyFourteenデフォルトメディア設定

この「画像サイズ」の一覧が、日本語になっているのでわかりにくいのですが、

  • 「サムネイルのサイズ」 は
    画像サイズ名:thumbnail /画像サイズ:150 x 150 px
  •  
  • 「中サイズ」 は
    画像サイズ名:medium /画像サイズ:300 x 300 px

という意味です。

このthumbnailやmediumという画像サイズ名を指定することで、様々なところで画像のサイズ指定ができる、という仕様になっています。

メディア設定で指定された画像サイズを指定することで、アイキャッチ画像のサイズを確定させることができる

例えばDisplay posts shortcode というプラグインで、

[display-posts image_size=”medium”・・・]

と指定すると、

幅300 x 高さ300の「medium」サイズの範囲内に画像が縮小されて表示される、

というわけです。

この時、元画像が幅640 x 高さ360px だった場合、その比率で縮小されるので、mediumで指定された画像は幅300 x 168pxで表示されるというコトになります。
raspberries-画像等倍縮小イメージ

じゃあ、そのメディア設定を変更すれば良いんじゃないのか・・と考えるかもしれませんが、それはおすすめできません。

何故なら、この基本設定は多くのテーマで使う共通項の為、プラグインでもこのサイズを基本にしているものも多く、安易にこのサイズを変更してしまうと、後々他のところに影響が出てくる可能性があるからです。

一方、一覧などでアイキャッチ画像を並べた時に等倍でサイズを調整すると、幅はきっちりと合うのですが、それぞれのアイキャッチ画像の高さが違う場合、高さがバラバラになります。

これを合わせるには、アイキャッチにする画像のサイズの縦横比率をアップ前に揃えるといった調整をする必要が出てきますが、

新規記事の投稿の度、過去記事や固定ページ編集の度にアイキャッチ画像のサイズの縦横比率に気をつけなければならないというのは、結構面倒ですし、ミスも起こりがちです^^;

そこで、デフォルトの設定はそのままにしておき、好きなサイズのアイキャッチ画像の設定をすることで、画像サイズが少しバラバラでも自動的に対処できるようにしていきます。

functions.php への add image size の記述

記述自体は難しくありません。以下のような記述を子テーマのfunctions.phpへ追加するだけです。

以下の記述では、90x90、615x115、150x75、280x125 の4種類のサイズのアイキャッチ画像を追加定義する設定です。

//アイキャッチ画像の定義と切り抜き
add_action( 'after_setup_theme', 'baw_theme_setup' );
function baw_theme_setup() {
 add_image_size('small_thumbnail', 90, 90 ,true );
 add_image_size('page_eyecatch-image', 615, 115, true );
 add_image_size( '150_thumbnail', 150, 75, true );
 add_image_size('280_thumbnail', 280, 125, true );
}

add_imag_size()のかっこ内をお好みの設定に変更したものをfunctions.phpへ追加してください。

※注 アイキャッチ画像の設定サイズは必要なものだけを設定するのがオススメ。
ココでは、コピペした後追加するより削除の方が簡単だと判断の下、多めに設定を書いていますが、必要な分の設定だけ行うことをオススメします。

というのは、WordPressは画像がアップロードされると、設定されている全ての画像サイズを作成するようになっているから。

このため、設定画像サイズが10種類あれば10種類の画像サイズが作られることになり、それぞれの画像サイズ自体は小さくても積み重なれば、サーバー容量を圧迫することも考えられます。

設定画像サイズは必要なものだけにするのがオススメです。

設定の方法は以下の通りです。

  • アイキャッチ画像名は半角英数字なら、好きな名前をつけてOKです。
  • 単位は、省略してありますが、pxです。省略した状態でOKです。
  • 数値は、幅x高さ の順番です。
  • 幅, 高さ, true とすることで、切り抜き指定(crop)できます。
  • 切り抜きしたくない場合は、最後の ,true を書かなければ切り抜かれません。
  • それぞれの指定要素を,カンマで区切ります。

add_image_size('page_eyecatch-image', 615, 115, true );の説明イメージ

切り抜きをすると、幅は等倍に縮小され、上下が部分的に切り取られはしますが、画像の拡大や縮小が起こりませんので、アイキャッチ画像を歪ませないようにできます。

より詳しい説明については、以下のページを参照してください。

Function Reference/add image size
http://codex.wordpress.org/Function_Reference/add_image_size

add_image_sizeを設定したのに、アイキャッチ画像が設定どおりにならない!

実はadd_image_sizeを設定しただけでは、以前のアイキャッチ画像に対してはサイズ設定が効きません(^^ゞ

これは、画像がアップロードされた際に、WordPressが設定されているイメージサイズを作成するためで、

add_image_size設定以前にアップロードされた画像についてはアップロード時に設定されているサイズしか作成されていないためです。

だからといって、昔の投稿のアイキャッチ画像をいちいちアップロードし直すのはホネですよね(^^ゞ

以前にアップロードしたアイキャッチ画像も同じように新しい設定に変更したい場合には、Regenerate Thumbnailsプラグインを利用するのが簡単です。

プラグインを有効化後、

全ての画像を一括変換する場合は、ツール→Regen. Thumnailsをクリック
Regenerate Thumbnails

[全てのサムネイルを再生成する]ボタンをクリックします。
※画像が多い場合は時間がかかります。
全てのサムネイルを再生成する

まだ投稿数も少なく、サムネイルの再生成も数えるほどであれば、メディアから個別に、または選択してサムネイル再生成することもできます。
個別にサムネイル再生成をする

複数の画像を選択してサムネイル再生成

ちなみに、Regenerate Thumbnailsは2つ同じ名前のプラグインが存在しますが、どちらも同様に使用できます。

どちらのプラグインも画像が多い場合は時間がかかりますので、その点はご留意ください(^^ゞ

定義したアイキャッチ画像の使い方

さて、画像サイズの定義設定ができると、場所場所でサイズに指定した画像名を呼び出せば、1つの画像をその場所にあったサイズで表示させることができるようになります。

投稿内などのアイキャッチ画像を指定する

前述の基本のテンプレートタグは

<?php the_post_thumbnail(); ?>

ですので、()内にアイキャッチ画像サイズ名を指定すればOKです。

例えば、
横:280px、縦:125pxの280_thumbnailを指定したい場合は、

<?php the_post_thumbnail('280_thumbnail'); ?>

とします。

投稿記事のアイキャッチ画像が大きすぎる!といった場合には、single.phpや、Twentyではじまるデフォルトのテーマならば、content.phpのthe_post_thumbnailの()内に好みのアイキャッチ画像サイズを入れればOKです!

※カスタマイズするときは子テーマでのカスタマイズをおすすめします!

ショートコードで使用する場合

前述の[display-posts image_size=”medium”・・・]の場合、

image_size=”medium” を image_size=”280_thumbnail” とすれば、下の様に表示を変更させることができます。

比較medium-and-280_thumbnail

固定ページにアイキャッチを指定したい場合

固定ページにアイキャッチを指定したい場合については、以前の記事「functions.phpに加えると便利なワードプレス・コーデックス5選」で書きましたが、

固定ページにアイキャッチを指定して、視覚的にこのページには何が書かれているか、何のページなのかを表現したいけれど、あまり大きなサイズにするのは・・・

といった時にサイズを横に細長くすることで、画面上部を有効に使うことができます。

そのような場合は、アイキャッチ画像を表示させる記述、

<?php the_post_thumbnail();?>

の()内にアイキャッチ画像サイズ名を指定して、

<?php the_post_thumbnail('page_eyecatch-image');?>

とすれば、OK。
表示させたいサイズのアイキャッチ画像が表示されるようになります。

以上のショートコードと、phpへのアイキャッチ画像の指定方法がわかれば、

  • トップページや、固定ページのアイキャッチ画像を並べたい
  • サイドバーに記事のアイキャッチ画像を並べたい

といった場合にも応用できますので、ぜひやってみて下さい(^^)

ではでは、今日はこの辺で♪
お役にたったらお好きなボタンをクリックしていただけるとハッピーです(^^)

Published:2015/06/12

Written by

WordPressでアイキャッチ画像を好きなサイズで設定・使う方法」への2件のフィードバック

コメントを残す