###前提・実現したいこと
wordpressでデバイスごとに切り替えができるsrcsetで画像表示を設定したところ、ローカルのHTMLでは表示されていた画像がwordpressにしたら表示がされなくなりました。
###発生している問題・エラーメッセージ
・該当コードの
images/hoge@2x.png 640w,images/hoge.png 1280w
の部分がブラウザ表示で確認すると、画像の読み込みがされていない。
###該当のソースコード
WordPress
1<img src="images/hoge.png" sizes="(min-width: 640px) 100vw" 2srcset="images/hoge.png 320w,images/hoge@2x.png 640w,images/hoge.png 1280w" 3alt="画像">
###試したこと
1.> images/hoge@2x.png 640w,images/hoge.png 1280w
の読み込みがされるように、""で囲んで("images/hoge@2x.png 640w","images/hoge.png 1280w" )ブラウザ確認をすると表示がされるようにはなるのですが、表示のされかたがおかしい(実際の表示画像の大きさより2倍くらいの大きさになる)
2.出力されたimgタグの記述
PHP
1<img src="http://localhost:8888/wp-content/themes/HP/images/hoge.png" sizes="(min-width: 640px) 100vw" srcset="http://localhost:8888/wp-content/themes/HP/images/hoge.png 320w" http:="" localhost:8888="" wp-content="" themes="" HP="" images="" hoge@2x.png="" 640w"http:="" hoge.png="" 1280w"="" alt="画像">
PHP
1<img src="http://localhost:8888/wp-content/themes/HP/images/hoge.png" sizes="(min-width: 640px) 100vw" 2srcset="http://localhost:8888/wp-content/themes/HP/images/hoge.png 320w"http://localhost:8888/wp-content/themes/HP/images/hoge@2x.png 640w"http://localhost:8888/wp-content/themes/HP/images/hoge.png 1280w" 3alt="画像"> 4
出力画像サイズ
img src="http://localhost:8888/wp-content/themes/HP/images/hoge.png" sizes="(min-width: 640px) 100vw
出力された画像サイズが 4007 × 570px
実際のサイズが1000 × 140px
imgタグのその場所での幅 1015px
ウィンドウ幅 1279 (MacBook Pro Retina 13-inch)
###追記事項
・srcsetで画像設定しているところ以外は、画像の読み込みがされていて通常の表示がされている。
・作業はMAMPで行っているので本番環境ではない
・画像の読み込みがフルパスだと長いので、functions.phpで相対パス設定にしてあります。
PHP
1// 固定ページ画像パス省略 2function replaceImagePath($arg) { 3 $content = str_replace('"images/', '"' . get_bloginfo('template_directory') . '/images/', $arg); 4 return $content; 5} 6add_action('the_content', 'replaceImagePath'); 7
よろしく御願いいたします。
回答1件
あなたの回答
tips
プレビュー