CMS構築を目的にPHPをベースとしたWordPress、CakePHPやPEARなどオープンソースを中心に解説しています

WordPress 4.4にアップデートしてから、記事に投稿した画像の出力まわりがおかしくなりました。
Firefoxでサイトを確認してみると、それまで画像が表示されていたところが表示されなくなっている。。。

ソースをチェックすると、画像メディアを追加してサムネイルを表示していた部分が以下のようになっていました。

<img src="/images/sample-300x250.jpg" alt="サンプル" width="300" height="250" class="size-medium wp-image-3114" srcset="/images/sample-300x250.jpg 300w, /images/sample.jpg 525w" sizes="(max-width: 300px) 100vw, 300px" />

「srcset」や「sizes」など見慣れない属性が追加されています。

どうやら、レスポンシブに対応するべく追加された新しい機能のようです。
ブラウザサイズに応じて画像を切り替えたり、Retinaディスプレイなど解像度の高いデバイスに対応したりと、
レスポンシブサイトにおいて、あらゆるデバイスに対して最適な画像を動的に出力してくれるようです。
つまり、画像が荒れたり、必要もないのに全てのサイズの画像を読み込んだりといったリスクを避けることができるようです。
※この技術の詳細についてはまた次回の宿題とします。。。

但し、こちらの仕様、対応ブラウザが限られており、どうやら現在、完全にサポートしているのはGoogle Chromeのみのようです。
Firefoxも対応しているようですが、私の環境では画像が表示されませんでした。
活用するにはまだ早い技術のようです。

そこで、WordPressにフィルタを追加して、この新機能を無効化します。

function disable_calculate_image_srcset($sources) {
	return false;
}
add_filter('wp_calculate_image_srcset', 'disable_calculate_image_srcset');

すると先ほどのimgタグが以下のとおり出力されるようになりました。

<img src="/images/sample-300x250.jpg" alt="サンプル" width="300" height="250" class="size-medium wp-image-3114" />

Firefoxでも以前のように問題なく画像が表示されるようになりました。

同じようにWordPressをアップグレードして画像が表示されなくなったという方も少なくないはずです。
ご参考になれば。

このエントリーをはてなブックマークに追加

Comment

Comment Form

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Monthly Archives

Search