Wordpressのアイキャッチ（サムネイル）を好きなサイズの正方形で表示しよう

Wordpressのブログ記事ひとつひとつにイメージ画像を指定できる機能。それがアイキャッチ。
これを指定することで、ブログのホーム等に記事ごとの画像を表示させることができます。
ホーム画面で記事の横等に出てくるサムネイルを、好きなサイズの正方形に変更しようというのが今回の趣旨です。

アイキャッチ？サムネイル？

アイキャッチとサムネイル、両方画像でしょ？何が違うの？と思った方は、こちらの記事を参照してください。
【WordPress】アイキャッチとサムネイルの違い！プラグインで再生成

「記事ごとに設定したのがアイキャッチ、縮小してホームとかで表示するのがサムネイル」です。

本記事執筆時の環境

WordPress3.8.1
テーマはstinger3ver20131023+自作の子テーマ

対象読者

WordPressダッシュボードの「外観」→「テーマの変更」からテーマ編集が行える方
functions.phpを編集した際のトラブルに対処できる方
トラブルが起きても私のせいにしない方m(__)m

スポンサードリンク

好きなサイズの正方形サムネイルに変更する方法

今回は、指定したアイキャッチ画像の一部を正方形に切り抜いて表示する方法を説明します。

全体の流れ

表示したいサムネイルのサイズを指定する
指定したサイズのサムネイルを生成する
生成したサムネイルを表示させる

という３つの段階で行います。
まず最初に、自分が表示させたいサムネイルのサイズをfunctions.phpに書き込みます。
次に、そのサイズでサムネイルを生成します。詳細は後述しますが、画像を作りなおさないといけないんですよね。ここがちょっと面倒くさいんですが、プラグインを使ってできるので、ガマンガマン。
最後に、生成したサムネイルを表示させるようhome.php等を書き換えて完了です。
ちょっと長いけどくじけずにがんばりましょう。

がんばりましょう

posted with カエレバ

SMAP ビクターエンタテインメント 1994-09-09

Amazon

楽天市場

１．表示したいサムネイルのサイズを指定する

まず、お使いのテーマのfunctions.phpを表示しましょう。
その中に、

add_theme_support('post-thumbnails');

という部分があると思います。（無い場合にはくじけぬ心で書き足してください。）
ここに１行追加して、自分が表示したいサムネイルのサイズを指定します。

add_theme_support('post-thumbnails');
add_image_size('thumb200', 200, 200, true);

add_image_size〜という１行を追加しました。
それぞれ説明すると

add_image_size・・・サムネイルのサイズを追加しますよ、という指定
‘thumb200’・・・サムネイルのサイズにつける名前。自分で好きに決めよう！
ひとつめの200・・・サムネイルの横
ふたつめの200・・・サムネイルの縦
true・・・サムネイルを作るとき、元画像を切り抜く

ということを表しています。
上の例の200のところを、ご自分で表示したいサムネイルのサイズに変更してください。1
できたらfunctions.phpを保存。

（＊2014/2/18追記＊）
trueの部分を、正方形にすると表記していましたが、誤りです。
正確には指定サイズに切り抜く、です。失礼しました。
（＊追記おわり＊）

２．指定したサイズのサムネイルを生成する

上で指定したサイズのサムネイルを実際に作りましょう。
アイキャッチ画像のサムネイルは、アイキャッチを設定すると自動で生成されます。
しかし、functions.phpに加えた変更、つまり「200×200のサムネイルを作ってね！」という指示は、「これから設定したアイキャッチにしか適用されない」のです。
それじゃああんまりですよね。今まで書いた記事のサムネイルも全部200×200で作りなおしてほしい。
全部の記事のアイキャッチを設定しなおす・・・？手で？(ヾﾉ･∀･`)ﾑﾘﾑﾘ
そこで便利なプラグインを使いましょう。Regenerate-thumbnailsです。
WordPress › Regenerate Thumbnails « WordPress Plugins

こちらのプラグインを入れて、有効化してください。
有効化すると、Wordpressのダッシュボードの「ツール」に Regen. Thumbnailsという項目が出るようになります。これを選んでみましょう。

英語で説明が出てきます。ここには「１枚単位でのサムネイル生成もできるよ―」等書かれていますが、今回は全部の記事のアイキャッチに対して指定サイズのサムネイルを作成したいので、「Regenerate All Thumbnails」を押す・・・前に、この作業は画像が多いと時間がかかります
ブログ始めたての方はそれほどでもないですが、ずっとブログ続けてる方とか、画像を多用している方は時間があるときにやることをオススメします。
サーバの性能等にもよると思いますが、私は1000枚くらいの画像に対して、1.5〜2時間くらいかかる印象でした。

※全ての画像に対して処理を行うので、正直無駄が大きいです。今回は手順を簡単にするためにこの方法を説明しています。自分で必要なぶんだけサムネイル再生成を行える方は、ご自分のやりかたでやったほうが無駄なくできます。

３．生成したサムネイルを表示させる

さて、サムネイルを生成できたら、今度は指定したサイズのサムネイルを表示させましょう。
サムネイルを表示している箇所のphpを編集します。今回はブログトップページのサムネイルを変えるので、home.phpを編集しましょう。
テーマ「Stinger3」では、このようなコードがかかれています。

the_post_thumbnail(array( 150,150 ),
array( 'alt' =>$title, 'title' => $title));

the_post_thumbnail(××××, ~~~~)という箇所を探して下さい。
ここを以下のように書き換えます。

the_post_thumbnail('thumb200',
array( 'alt' =>$title, 'title' => $title));

‘humb200’のところには、１．表示したいサムネイルのサイズを指定する　で書いた「サムネイルのサイズにつける名前」を書いてください。
これで作業はおしまい。おつかれさまでした。

デザイン変えたら画像サイズにも気を配ろう

背景とか、文字の色とかはけっこう簡単に変更できると思うんですが、今回のように画像再生成とかが入るとけっこう厄介。
とはいえ、ブログの見た目を変えたら表示される画像の大きさとか形にも気を配りたいですね。できる範囲で。
今回のやり方、正直正方形じゃなくてもイイんですよね。好きなサイズで。でも「正方形にしたい」という、一歩踏み込んだ需要があると思い、書いてみました。
お試しあれー