stingerで記事にアイキャッチ画像を表示設定したけど横幅が合わないのはなぜ？
2020/05/13
無料のwordpressテンプレートの「stinger」で記事にアイキャッチ画像を表示できるように設定したけど、ページの横幅が合わなかった時の備忘録です。
やったこと
まず、アイキャッチ画像を記事のトップ（上部）に表示させるようにしたかったので、single.phpの表示させたい箇所に
<?php the_post_thumbnail('large'); ?>を記述しました。これで管理画面のメディア設定で設定している大サイズの画像が、挿入した箇所にアイキャッチ表示されるはずです。
メディア設定で設定したアイキャッチ画像を表示するコードは以下です。
<?php the_post_thumbnail('thumbnail'); ?> //サムネイルのサイズ
<?php the_post_thumbnail('medium'); ?> //中サイズ
<?php the_post_thumbnail('large'); ?> //大サイズ
<?php the_post_thumbnail('full'); ?> //フルサイズ
ですが、アイキャッチ画像を設定し、プレビューで記事を確認してみたところ、大サイズで設定されているサイズ（横1024縦1024）より小さなサイズ、横幅580pxの画像が表示されました。正確には画像のサイズは（横1024縦1024）のものが表示されているのであっているのですが、widthに指定されているサイズが画像と違っています。
ほかのサムネイルサイズ、中サイズ、フルサイズで指定した場合は問題なく画像サイズと同じwidth表示されました。大サイズのみwidthに指定されるサイズが580pxになってしまいました。
どこかで580pxを指定しているのが、ないかfunctions.phpを580pxで検索すると、以下の箇所がありました。
if ( ! isset( $content_width ) ) $content_width = 580;そこで、ググって調べましたら記事にまとめられている方がおられました。
» WordPressテーマのfunctions.phpでは$content_widthを定義するべし(ページなくなってます)
ありがとうございます。
この記事によると、テーマに$content_widthを定義すると、管理画面のメディア設定で指定した画像のサイズの値を上書きするようです。
stingerで記事にアイキャッチ画像を設定する場合は
まとめると、テーマで$content_widthが指定されている場合は、メインコンテンツの表示領域の横幅が指定されこちらが優先されるので、管理画面のメディア設定で指定した大サイズの値が無視される。
なので、その場合はテーマで$content_widthが指定されている値を変更する。今回の私の場合はメインコンツの横幅は620pxだったのでfunctions.phpで記述されている580を620に変更しました。
if ( ! isset( $content_width ) ) $content_width = 620;すると無事、画像のwidthサイズが620になりました。