WordPressでsrcsetするとうまく読み込めない

2017/10/9 WordPress

WordPressの固定ページに画像指定するとき、下記記事を参考にしてurlを簡略化していました。

【WordPress】テーマフォルダの画像を呼び出すときの画像パスを短くする方法

function.phpに記述する内容

function imagepassshort($arg) {
$content = str_replace('" img/', '"' . get_bloginfo('template_directory') . '/img/', $arg);
return $content;
}
add_action('the_content', 'imagepassshort');

固定ページで画像を指定する記述

<img src=" img/image.jpg">

スマホ用は大きい画像を表示

スマホ用に大きい画像を使用してパソコンで縮小表示すると、ぼやけた画像になってしまいます。
パソコン用の画像表示、スマホなど高精細ディスプレイ（Retina）対応するためには、srcsetなるものを指定するといいそうです。

srcset属性について
 srcsetで画像をレスポンシブやRetinaディスプレイに最適化

今はだいぶブラウザに普及してきたみたいなので実際に使ってみることに。
下記のように書けばうごくはず。。。。

<img src="img/image.jpg"
     srcset="img/image.jpg 1x,
             img/image@2x.jpg 2x"
     alt="Example image">

あれ、スマホだと表示されない。altタグに書いてある文字が表示されてしまいました。

htmlを確認するとこんな風に表示されていました。

<img src="WordPressテーマまでのフルパス/img/image.jpg"
     srcset="WordPressテーマまでのフルパス/img/image.jpg 1x,
             img/image@2x.jpg 2x"
     alt="Example image">

2番目に記載しているURLがフルパスに変更されていないことが原因でした。
2番目に記載しているURLもフルパスに変更する記述が必要です。

調べてみるとありました。
【WordPress】imgタグをsrcsetで設定したら、画像が表示されない

function.phpの記述を下記のように変更します。

function imagepassshort($arg) {
$content = str_replace('" img/', '"' . get_bloginfo('template_directory') . '/img/', $arg);
$content = str_replace(',img/', ',' . get_bloginfo('template_directory') . '/img/', $content); //追加部分
return $content;
}
add_action('the_content', 'imagepassshort');

無事表示されるようになりました。
これはまた同じことを繰り返しそうなのでメモメモ。