たかなblog

のんびりと色んな情報を発信していきます。

カスタマイズ

Stinger5でサムネイル画像がリサイズされない時の対処法。

こんにちは、高菜です。

需要があるかわかりませんが、Stinger5の一覧に表示されるアイキャッチ画像のサイズがバラバラな方、
Stinger5にテーマを変更したら急に重くなった方向けの記事です。

Stinger5に途中から変更すると、トップページがやたら重くなる場合がある

設定>表示設定>フロントページの設定を、デフォルトの「最新の投稿」にして利用した場合、アイキャッチ付の新着記事一覧が表示されます。

このアイキャッチ画像ですが、Stinger5を適用する前にアップロードした画像をアイキャッチに設定した場合、トリミングされません。

フルサイズの画像が、横幅(150px)に指定されて表示されます。
もしデジカメ等で撮影した容量の大きなサイズの画像を指定したとすると、トリミングもリサイズもされていないとんでもないサイズの画像がアイキャッチとして表示されてしまうので、当然、トップページが重くなってしまうわけです。

なぜこんなことが起こるのか

WordPressでアイキャッチ画像を呼び出す場合、以下のテンプレートタグを利用します。

<?php the_post_thumbnail( $size, $attr ); ?>

WordPressのCodexに記載があるとおり、このコードで呼び出すことのできるサイズは以下の通りです。

the_post_thumbnail();                  // パラメータなし -> サムネイル
 
the_post_thumbnail('thumbnail');       // サムネイル (デフォルト 150px x 150px :最大値)
the_post_thumbnail('medium');          // 中サイズ (デフォルト 300px x 300px :最大値)
the_post_thumbnail('large');           // 大サイズ (デフォルト  640px x 640px :最大値)
the_post_thumbnail('full');            // フルサイズ (アップロードした画像の元サイズ)
 
the_post_thumbnail( array(100,100) );  // 他のサイズ

サイズ設定時、「サムネイル、中サイズ、大サイズ」のいずれかを選択した場合、フルサイズのがぞが小さく加工されますが、その加工方法は以下の2パターンあります。

・元画像の縦横の比率を保ったままリサイズされたもの
(横300px、縦150pxの画像を150px150pxのサムネイルサイズにリサイズした場合、横150px、縦75pxの画像を作成する)

・元画像をトリミングしたもの
(横300px、縦150pxの画像を150px150pxのサムネイルサイズにトリミングした場合、横150px(入らなかった部分は切り取られる)、縦150px(変わらず)の画像を作成する)

どちらの加工方法になるのかは、管理画面の設定>メディアの設定に依存します。
また、各サイズも管理画面のメディアの設定から変更が可能です。

一方、サイズを指定してサムネイルを呼び出すこともできます。
ただし、サイズ指定して呼び出される元画像はサムネイルサイズのもの。
これを、imgタグのwidthとheightで縮小したり引き延ばしたりしているだけなので気を付けましょう。

Stinger5でのアイキャッチ画像呼び出し

前置きが長くなりましたが、Stinger5ではどうやってアイキャッチ画像を呼び出しているのか確認しましょう。
記事の一覧表示を管理している「itiran.php」内に以下の表記がありました。

<?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?>
<?php the_post_thumbnail( 'thumb150' ); ?>

the_post_thumbnailになにやら独自の名前を指定しています。
これで呼び出される画像サイズの指定は、「functions.php」の中に記載があります。

//アイキャッチサムネイル
add_theme_support('post-thumbnails');
add_image_size('thumb100',100,100,true);
add_image_size('thumb150',150,150,true);

add_image_sizeとは何ぞや?ということでWordPressのCodexを確認。
アップロードしたときに自動作成される画像サイズの種類を追加するためのものでした。

WordPressは、大きいサイズの画像をメディアにアップロードした際、「サムネイル、中、大」サイズの画像が、設定>メディアの設定にしたがって自動作成されます。

つまりデフォルトでは「サムネイル、中、大、フルサイズ」の4サイズの画像が自動でアップロードされるわけですね。

使用しているテーマのfunctions.phpに「add_image_size」を追加すると、上記の4サイズに加えて、別途指定したサイズの画像を作成してアップロードしてくれるようになります。

ただし、あくまで「画像のアップロード時」に、「その時指定したサイズの」画像が作成されるため、テーマのfunctions.phpにadd_image_sizeが追加される以前の画像、つまり、Stinger5を適用する前にアップロードした画像には、(Stinger5の場合)thumb150やthumb100で指定したサイズの画像は作成されていません。

にもかかわらず、「itiran.php」では「thumb150」サイズのサムネイル画像を取ってこい、と指定してしまっているため、そのサイズの画像が見つからずに元画像がそのまま返される、ということになっていたようです。(ないならせめてデフォルトのサムネイルサイズを返してくれたらいいのに。。)

解決策

Stinger5の「thumb150」サイズとして指定されている画像は、「150px*150px、トリミング」で、デフォルトの「サムネイル」と全く一緒です。

Stingerの作者さんはおそらく、設定>メディアからサムネイルサイズの設定を変更している人でもきれいに一覧のサムネイル画像が表示されるよう、新たに「thumb150」サイズを作成して設定の影響を受けないようにしているのでしょうが、特にここを変更していない場合、「itiran.php」内にある、

the_post_thumbnail( 'thumb150' )

を、

the_post_thumbnail('thumbnail')

に書き換えるだけでOKです。

 設定>メディアからサムネイルのサイズを変更している場合

デフォルトから触っていなければ先の解決方法で問題ないのですが、サイズを100px*100pxとかに変更している場合、サムネイル画像として呼び出される100px*100pxを150px*150pxに引き延ばして表示するため、画像が荒くなります。

それはいや!一覧の画像はちゃんと150px*150pxでサムネイル表示させたい!
ということであれば、サムネイル画像の再作成を行う必要があります。

再作成については、プラグインを入れてしまうのが手っ取り早そうです。
Codexに画像サイズの再生成用プラグインが3つのっていましたので紹介します。

Regenerate Thumbnails – このプラグインは画像のサムネイルを再生成します。「設定→メディア」でサムネイルの設定を変えた後、それまでにアップロードされた画像のサムネイルを変更したい時や、異なった大きさのアイキャッチ画像を一斉に変更したい時、非常に使い勝手のよいプラグインです。

AJAX thumbnail rebuild – このプラグインはサムネイルを再生成します。アップロード済みサムネイルに対して add_image_size() を用いたい時に使えるプラグインです。(動作は遅いものの、メモリー不足エラーとなることがありません)

Simple Image Sizes – このプラグインは「メディア」パネルから直接、新しいサイズのサムネイルを生成するものです。このプラグインはまた、サムネイルの再生成も行います。このプラグインは投稿する画像サイズにサムネイルを追加し、それらを直接投稿へ追加させることができます。再生成したい大きさや投稿タイプを選ぶこともできます。

Codexで紹介されているくらいなので多分大丈夫だとは思うのですが、私は検証一切していないので、お使いになる場合はご自身のWordpressのバージョンにあったものがきちんと出ているか、など確認してご利用ください。

すっかり忘れてたけどサイドバーや関連記事にもあるよね。。

「itiran.php」を修正することですっかりサイトが軽くなったので忘れていましたが、サイドバーの新着記事一覧や、関連記事一覧なんかにもアイキャッチ画像が

the_post_thumbnail( 'thumb150' )

で読み込みされていますので、同様に修正してあげてください。(プラグインで再生成することを選んだ方は、修正の必要はありません)
それぞれ「newpost.php」、「kanren.php」内に記載があります。

Stinger適用後、新規でメディアにアップロードした画像をアイキャッチに使っていれば問題ないんですけどね。。

別テーマを使っていて、せっかくStingerにしてくれたのに、なんかよくわからないけど重くなっちゃったから嫌!と戻してしまう方が減ることを願って。

-カスタマイズ
-, , , ,