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

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

ただいまの
回答率

90.99%

  • WordPress

    6013questions

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

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,255

ami15821

score 40

前提・実現したいこと

wordpressでデバイスごとに切り替えができるsrcsetで画像表示を設定したところ、ローカルのHTMLでは表示されていた画像がwordpressにしたら表示がされなくなりました。

発生している問題・エラーメッセージ

・該当コードの

images/hoge@2x.png 640w,images/hoge.png 1280w 

の部分がブラウザ表示で確認すると、画像の読み込みがされていない。

該当のソースコード

<img src="images/hoge.png" sizes="(min-width: 640px) 100vw"
srcset="images/hoge.png 320w,images/hoge@2x.png 640w,images/hoge.png 1280w"
alt="画像">

試したこと

1.> images/hoge@2x.png 640w,images/hoge.png 1280w 

の読み込みがされるように、""で囲んで("images/hoge@2x.png 640w","images/hoge.png 1280w" )ブラウザ確認をすると表示がされるようにはなるのですが、表示のされかたがおかしい(実際の表示画像の大きさより2倍くらいの大きさになる)

2.出力されたimgタグの記述

<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="画像">
<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://localhost:8888/wp-content/themes/HP/images/hoge.png 1280w"
alt="画像">


出力画像サイズ 

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で相対パス設定にしてあります。

// 固定ページ画像パス省略
function replaceImagePath($arg) {
    $content = str_replace('"images/', '"' . get_bloginfo('template_directory') . '/images/', $arg);
    return $content;
}
add_action('the_content', 'replaceImagePath');

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2016/08/30 17:01

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

    キャンセル

  • ami15821

    2016/08/30 17:09

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

    キャンセル

  • kei344

    2016/08/30 17:17

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

    キャンセル

  • ami15821

    2016/08/30 17:26

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

    キャンセル

回答 1

checkベストアンサー

0

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

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/08/30 18:05

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

    キャンセル

  • 2016/08/30 18:15

    出力されたimgタグの記述を質問文に追記ください。
    例)
    <img src="http://example.com/path-to-theme/images/1.png" sizes="(min-width: 640px) 100vw"
    srcset="http://example.com/path-to-theme/images/2.png 320w,http://example.com/path-to-theme/images/3.png 640w,http://example.com/path-to-theme/images/4.png 1280w"
    alt="画像">

    で、画像のそれぞれのサイズとimgタグのその場所での幅、ウィンドウ幅も追記ください。

    キャンセル

  • 2016/08/30 18:45

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

    キャンセル

  • 2016/08/30 18:49

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

    キャンセル

  • 2016/08/30 18:53

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

    キャンセル

  • 2016/08/30 18:56

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

    キャンセル

  • 2016/08/30 19:13

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

    キャンセル

  • 2016/08/30 20:33

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

    キャンセル

  • 2016/08/31 10:17

    お返事遅くなりました。
    ご対応ありがとうございます。

    無事表示されるようになりました!

    キャンセル

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

  • ただいまの回答率 90.99%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • WordPress

    6013questions

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