テンプレートにthe_post_thumbnail(‘thumbnail’)というコードがあり、「メディア設定」の「サムネイルのサイズ」を幅200の高さ200に設定してアイキャッチ画像をアップロードして、そのあとで「サムネイルのサイズ」を幅250の高さ250に変更しても、表示される画像サイズは幅200の高さ200になります。
「メディア設定」でしたサイズは、画像をアップロードしたときに画像が生成される仕組みということで、後でサイズを変更しても反映されないんです。
ここで、画像を使いながら説明をしてみます。
「メディア設定」にあるそれぞれのサイズを下の画像にあるようにサムネイルのサイズを幅と高さ200にして、投稿でアイキャッチ画像をアップロードします。
Twenty Twelveテーマでは、content.phpファイルにアイキャッチ画像を表示するthe_post_thumbnail()タグがheader.entry-header下にあるので、「メディア設定」で「サムネイルのサイズ」に設定したサイズを表示するためにthe_post_thumbnail(‘thumbnail’)と変更します。
<header class="entry-header">
<?php the_post_thumbnail('thumbnail'); ?>
サイトを表示してみると、記事１と記事２は、「サムネイルのサイズ」で設定した幅200で同じ幅になります。、高さは画像に合わせてそれぞれ違う高さになります。※高さもそろえたい場合、set_post_thumbnail_size()で引数に幅と高さに追加して、切り抜き（true）を設定します。
【記事１】
【記事２】
ここで、メディア設定の「サムネイルのサイズ」を幅・高さを250に設定して、「中サイズ」を幅・高さ400にします。
サイトを表示してアイキャッチ画像をみてみると、記事1と記事2は、変更前と同じサイズで表示されます。サイトのソースコードを見るとアイキャッチ画像を表示してるimgタグのwidthとheigthは、先ほどと同じサイズで表示されているのが確認できます。
【記事１】
【記事２】
「中サイズ」を表示するためのthe_post_thumbnailの引数をmediumに変更します。
<?php the_post_thumbnail('medium'); ?>
その結果、表示されたサイトのソースコードを確認すると、アイキャッチ画像をアップロードする前に「メディア設定」で中サイズに設定した幅300で表示されるのが確認できます。※高さは画像サイズに合わせて変わります。
また、「メディア設定」で「中サイズ」を幅400に設定した後、アイキャッチ画像をアップロードして設定した画像は、幅400として表示されます。
対処方法
画像サイズを後から変更したとき、今までにアップロードして設定した画像は反映されません。それを反映させるためには、アイキャッチ画像を再度アップロードして設定しなおすか、またプラグイン（Regenerate Thumbnailsなど）を使用して画像サイズを再生成をする方法があります。
「Regenerate Thumbnails」プラグインを使用してサイズを再生成したあと、テンプレートにthe_post_thumbnail(‘thumbnail’)と入力して確認すると、「メディア設定」の「サムネイルのサイズ」に先ほど設定した幅250で表示されます。
アイキャッチ画像のサイズ再生成プラグイン「Regenerate Thumbnails」
まとめ
アイキャッチ画像を使用してサイトを運営しているとき、途中でメディア設定のサイズを変更した場合、記事ごとに凸凹のアイキャッチ画像が表示されます。
また別のテーマに切り替えたとき、functions.phpファイルでアイキャッチ画像のサイズを設定していても、既にアップロードされた設定されたアイキャッチ画像のサイズは変更されないので気をつける必要があります。
コメント