質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

Q&A

解決済

1回答

9082閲覧

【WordPress】imgタグをsrcsetで設定したら、画像が表示されない

ami15821

総合スコア56

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

0グッド

0クリップ

投稿2016/08/30 07:51

編集2016/08/30 10:16

###前提・実現したいこと
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

よろしく御願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2016/08/30 08:01

画像はフルパスで記述されていますか?
ami15821

2016/08/30 08:09

functions.phpに固定ページ画像のパスを省略して表示させる設定をしてあるので省略にしてあります。 また、投稿ページでsrcsetで画像設定しているところでも/imgesの前に<?php bloginfo('template_url'); ?>をつけると表示がされます。 なので、固定ページでの表示の仕方を教えていただきたいです。
kei344

2016/08/30 08:17

「固定ページ画像のパスを省略して表示させる設定」とはどういう処理なのかがわかりません。どういう目的でそうされているのか、またそのコードはどういう実装かを追記ください。
ami15821

2016/08/30 08:26

修正させていただきました。
guest

回答1

0

ベストアンサー

以下のようにするとどうなりますか?

PHP

1function replaceImagePath($arg) { 2 $content = str_replace('"images/', '"' . get_bloginfo('template_directory') . '/images/', $arg); 3 $content = str_replace(',images/', ',' . get_bloginfo('template_directory') . '/images/', $content); // ミスがあったため修正 4 return $content; 5} 6add_action('the_content', 'replaceImagePath');

投稿2016/08/30 08:40

編集2016/08/30 11:32
kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ami15821

2016/08/30 09:05

表示されるようになりましたが、chromeのエミュレートでデスクトップ表示にすると実際の画像サイズの2倍くらいの表示になってしまいました。スマホに切り替えるとPC用画像が表示されます。
ami15821

2016/08/30 09:45

ご対応ありがとうございます。 質問文に追記いたしました。
kei344

2016/08/30 09:49

もしかして、記事中で("images/hoge@2x.png 640w","images/hoge.png 1280w" )とされていますか?
ami15821

2016/08/30 09:53

いいえ、記事中で( images/hoge@2x.png 640w,images/hoge.png 1280w")となっています。
kei344

2016/08/30 09:56

「出力されたimgタグ」は、「ソースを見る」で確認されましたか?デベロッパーツールですか?後者であれば、「ソースを見る」のほうを追記ください。
ami15821

2016/08/30 10:13

ありがとうございます。 デベロッパーツールで確認していたので、「ソースを見る」のほうを追記します。
kei344

2016/08/30 11:33

回答を編集しました。置換の文字列を私がミスしていました。
ami15821

2016/08/31 01:17

お返事遅くなりました。 ご対応ありがとうございます。 無事表示されるようになりました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問