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

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

ただいまの
回答率

90.48%

  • WordPress

    9119questions

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

wwwなしのURLでも画像を表示したい

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 652

oq10s

score 1

 解決したい問題

さくらのレンタルサーバ上で、WordPressを使ってサイトを構築しました。

設定(一般設定)は次の通りです。
WordPressアドレス:
https://www.example.com/yyy
サイトアドレス:
https://example.com
【2018/2/6 AM2:10頃訂正 上記のサイトアドレスが https://www.example.com となっていましたが、正しくは https://example.com でした】

先方からの要望で、wwwつきのURLを指定した場合は、wwwなしのURLにリダイレクトするようにしています(.htaccessの内容は後述します)。例えば、

https://www.example.com/hoge
と指定した場合は
https://example.com/hoge
となるようにしています。

Webサイトの表示やリンクは正常で、画像も表示自体は正常です。

しかし、例えば、
https://www.example.com/yyy/wp-content/themes/zzz/image/hoge.png
というURLにある画像に対して、<img>のsrc属性に、wwwを抜いた
https://example.com/yyy/wp-content/themes/zzz/image/hoge.png
というURLを指定すると、画像が表示されません。

試しに、wwwなしのURLをブラウザで直接指定すると、画像が表示されないかわりに、トップページ(index.php)にリダイレクトされてしまいました。

先方から、wwwなしのURLでも画像が表示されるようにしたいと言われています。どのようにすればよろしいでしょうか。

 .htaccessの内容

まず、ルートディレクトリ
https://www.example.com
にある .htaccessは次の通りです。

RewriteEngine On
RewriteCond %{HTTP_HOST} ^www\.example\.com$
RewriteRule ^(.*)$ https://example.com/$1 [R=301,L]

次に、WordPressアドレスである
https://www.example.com/yyy
の .htaccessは次の通りです。

RewriteEngine On
RewriteCond %{HTTPS} off
RewriteCond %{HTTP:X-Sakura-Forwarded-For} ^$
RewriteRule ^(.*)$ https://example.com/$1 [R=301,L]

# BEGIN SAKURA Internet Inc.
<IfModule mod_deflate.c>
    SetOutputFilter DEFLATE
    AddOutputFilterByType DEFLATE text/css
    AddOutputFilterByType DEFLATE application/x-javascript application/javascript application/ecmascript
</IfModule>
<IfModule mod_expires.c>
    ExpiresActive On
    <FilesMatch "\.(css|js)$">
        ExpiresDefault "access plus 1 week"
    </FilesMatch>
    <FilesMatch "\.(gif|jpe?g|png)$">
        ExpiresDefault "access plus 1 month"
    </FilesMatch>
</IfModule>
# END SAKURA Internet Inc.

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress

 試したこと

<img>のsrc属性で、wwwなしのURLである
https://example.com/yyy/wp-content/themes/zzz/image/hoge.png
を指定した場合は、wwwつきのURLである
https://www.example.com/yyy/wp-content/themes/zzz/image/hoge.png
にリダイレクトすれば良いのではないかと考えました。

そこで、
https://www.example.com/yyy
にある .htaccessの記述の冒頭を次のようにしましたが、結果は変化なしでした。

RewriteEngine On
RewriteCond %{HTTPS} off
RewriteCond %{HTTP:X-Sakura-Forwarded-For} ^$
RewriteRule ^(.*)$ https://example.com/$1 [R=301,L]

# 次の2行を追加
RewriteCond %{REQUEST_URI} ^https://example\.com/yyy/wp-content/themes/zzz/image/hoge\.png$
RewriteRule . https://www.example.com/yyy/wp-content/themes/zzz/image/hoge.png [L]

# BEGIN SAKURA Internet Inc. (これ以降は先ほどの .htaccess と同じです)

なお、全ての画像ファイルではなく、特定の1つの画像ファイル(hoge.png)にした理由は、とりあえず問題自体が解決するかどうか知りたかったからです。

 補足情報

WordPressのバージョン: 4.9.2
Webサイト全体にSSLを使っています

 2018/2/6 AM 11:25頃追記

上記の文中にあるyyyについて補足いたします。

yyyの部分の、実際の文字列は、ドメイン(example.com)のexampleの部分と全く同じ文字列が入ります。
example.com自体は例示としてのドメインで、実際にはexampleではなく会社名を表すアルファベットが入ります。そして、その会社名は、ドメイン名の後に続くサブディレクトリ名としても使われています。

例えば、WordPressアドレスとして
https://www.example.com/yyy
と書きましたが、実際のアドレスは(ドメイン部分は例示のためexample.comとしていますが)
https://www.example.com/example
となっています。

 2018/2/7 AM 2:50頃追記

質問投稿前から行っていたことで書き漏らしていましたが、さくらではhttpsからhttpにリダイレクトされる問題があるとのことでした。
参考にしたWebサイト: https://qiita.com/tabimoba/items/64ef60412abe7ad6f0ac

そのため、上記のWebサイトの記述にならい、 https://www.example.com/example/wp-config.php に、次の記述を追加しています。

if( isset($_SERVER['HTTP_X_SAKURA_FORWARDED_FOR']) ) {
    $_SERVER['HTTPS'] = 'on';
    $_ENV['HTTPS'] = 'on';
    $_SERVER['HTTP_HOST'] = 'example.com';
    $_SERVER['SERVER_NAME'] = 'example.com';
    $_ENV['HTTP_HOST'] = 'example.com';
    $_ENV['SERVER_NAME'] = 'example.com';
}
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • Zuishin

    2018/02/06 02:28

    yyy の扱いおかしくないですか? 落ち着いて正確に実際のアドレス(ドメインは example.com で結構です)を書いてください。出された情報が間違っていたらいくら考えても答えは出ません。

    キャンセル

  • oq10s

    2018/02/06 11:37

    kei344様、こんにちは。WordPressアドレスにwwwがついている理由を担当者から聞きました。「WordPressをインストールする際に、wwwなしのURLを設定したかったのですが、さくらの設定か何かで強制的にwwwをつけられてしまった覚えがあります。既にサイトは構築済で運営も開始しているため、簡単に再インストールができずに困っています」ということでした。

    キャンセル

  • oq10s

    2018/02/06 11:39

    Zuishin様、ご指摘ありがとうございます。「yyyの扱いがおかしい」とのことですが、申し訳ありませんが、具体的にどういうところがおかしいのかわかりませんでした。投稿した記事の末尾に、yyyの部分について補足を追記しましたが、これで十分な情報になっておりますでしょうか。

    キャンセル

回答 2

checkベストアンサー

0

.htaccess を下記のようにすればどうでしょう。

## ルートディレクトリ
RewriteEngine On
RewriteCond %{HTTP_HOST} ^www\.example\.com$
RewriteCond %{REQUEST_URI} !(^/yyy/)
RewriteRule ^(.*)$ https://example.com/$1 [R=301,L]
RewriteCond %{HTTP:X-Sakura-Forwarded-For} ^$
RewriteCond %{REQUEST_URI} !(^/yyy/)
RewriteRule ^(.*)$ https://example.com/$1 [R=301,L]
## yyy
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteCond %{HTTP:X-Sakura-Forwarded-For} ^$
RewriteRule ^(.*)$ https://www.example.com/$1 [R=301,L]

# BEGIN SAKURA Internet Inc.
### 以下省略 ###

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/02/06 11:45

    kei344様、ご回答ありがとうございます。
    まず、こちらのご回答に先立って書いてくださいました、「WordPressアドレスにwwwつきのURLを設定している理由」について、担当者から話を聞きました。担当者の話の内容は、該当するスレッドの返信として書きました。
    次に、kei344様が示してくださった通りに .htaccessの中身を書き換えましたが、画像が表示されない結果は変わりませんでした。なお、画像ファイル以外の動作(ページのリンク等)も、特に変化はありませんでした(正常動作のままでした)。

    キャンセル

  • 2018/02/06 18:59

    wwwなしのアドレスでもインストールできたと思いますが・・・。なにか特殊な設定をされているのでしょうか、不思議です。

    たぶんリダイレクトループになっているものだと思いますが、さくら純正のプラグインは使用されていますよね?であればちょっとわかりませんね。

    ページの出力(テンプレート)部分で置換してしまうのはどうでしょう。

    キャンセル

  • 2018/02/07 03:27

    kei344様、コメントありがとうございます。

    > なにか特殊な設定をされているのでしょうか、不思議です。

    kei344様がおっしゃる「特殊な設定」に相当するかどうかは不明ですが、まず、私の投稿の末尾に、wp-config.phpに追記した内容を書きました。インターネットで検索して調べた結果、さくらではhttpsからhttpにリダイレクトされることがある、とわかったからです。

    また、(WordPressを導入する前、)HTMLべた書きでWebサイトを作成したとき、次のURLを参考にして「 .htaccess を使ってhttpをhttpsへリダイレクトし、wwwつきのアクセスはwwwなしに統一する」という作業をしていました。wwwをなしに統一するのはSEOのため、と担当者から聞いています。
    参考にしたWebサイト: https://latele.co.jp/blog/back-end/2016/0418_10

    そして、この .htaccessが存在する状態で、WordPressのインストールを行いました。

    > さくら純正のプラグインは使用されていますよね?

    はい、「SAKURA RS WP SSL」(バージョン1.3.0)を使っています。プラグインの説明文には、さくらのレンタルサーバ上のWordPressで、常時SSL化を行うもの、とあります。

    > ページの出力(テンプレート)部分で置換してしまうのはどうでしょう。

    上記について質問がございます。例えば、テンプレートの中に
    <img src="<?php echo get_template_directory_uri(); ?>/image/hoge.png">
    という部分があり、これは結果として
    <img src="https://www.example.com/example/wp-content/themes/zzz/image/hoge.png&quot;&gt;
    と出力されていますが、何らかの方法で
    <img src="https://example.com/example/wp-content/themes/zzz/image/hoge.png&quot;&gt;
    となるようにしてみてはどうか、ということでしょうか。もし、そういうことでしたら、これは試したことがありまして、画像は表示されませんでした。

    また、そうではない場合(私がkei344様の文を誤って解釈してしまっている場合)、大変お手数をおかけしますが、どのようなことを意味していたのか、教えてくださいますと幸いです。なにとぞ、よろしくお願い申し上げます。

    キャンセル

  • 2018/02/07 03:53

    > wp-config.phpに追記した内容
    プラグインを使うなら不要な記述です。
    回答にも書いたようにWordPressフォルダを除外する方法で問題なく動くことは確認できました。(@さくらサーバ)
    wwwの有無が全体とWordPressで逆になっていることがとりあえず問題ですね。

    > 「SAKURA RS WP SSL」
    導入時の.htaccessが私が検証した環境とは違うようです。プラグインを入れて動かした上でなぜ違うかはわかりません。

    > これは試したことがありまして、画像は表示されませんでした。
    URLに直接アクセスして画像が表示されるなら置換方法に問題があるのでしょう。


    状況を確かめるには、ルートの.htaccessで適当なフォルダを除外して、そのフォルダに新規でWordPressを入れてプラグインを有効化してみるとかですかね。


    下記はwww有りに統一したさくらサーバで動いている.htaccessです。

    SetEnvIf REDIRECT_HTTPS (.*) HTTPS=$1
    RewriteEngine on
    RewriteCond %{ENV:HTTPS} !on
    RewriteCond %{REQUEST_URI} !(^/example/)
    RewriteRule .* https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
    RewriteCond %{HTTP_HOST} ^example\.com$ [OR,NC]
    RewriteCond %{HTTP:X-Sakura-Forwarded-For} ^$
    RewriteRule ^(.*)$ https://www.example.com/$1 [R=301,L]

    WordPress側の.htaccessには下記で囲まれた記述があります。
    # BEGIN Force SSL for SAKURA
    # END Force SSL for SAKURA

    キャンセル

  • 2018/02/08 22:10

    kei344様、コメントありがとうございます。

    まず、質問のタイトルにあった問題は解決しました。
    https://www.example.com/example/wp-content/themes/zzz/image/hoge.png
    という画像は
    https://example.com/example/wp-content/themes/zzz/image/hoge.png
    と、wwwを抜くだけではなく、
    https://example.com/wp-content/themes/zzz/image/hoge.png
    のように、example.com/の直後の example/ も抜く必要がありました。

    おそらくこの理由は、さくらのコントロールパネルにて、マルチドメインの対象のフォルダに example/ と指定していたことによると思います。

    質問のもととなった問題は解決しましたが、wwwの有無が全体とWordPressで逆になっている問題や、プラグインを入れた場合には不要な記述をしていたこと、検証済の正しい .htaccess の記述など、数多くのことを学びました。
    数日にわたり丁寧におつきあいくださり、ありがとうございました。

    キャンセル

0

wordpressがどういう作りになってるかわかりませんが、
画像のurlをドメイン名無しの絶対パス(ルート相対パス)で書けばいいんじゃないでしょうか。

https://example.com/yyy/wp-content/themes/zzz/image/hoge.png

/example.com/yyy/wp-content/themes/zzz/image/hoge.png

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/02/06 01:06

    すみません、
    /yyy/wp-content/themes/zzz/image/hoge.png
    ではないでしょうか…

    キャンセル

  • 2018/02/06 02:03 編集

    rgbgy様、kszk311様、早速のご回答ありがとうございます。

    「URLをルート相対パスで書けば良いのでは」というご指摘につきまして、「わざわざ .htaccessを使うという、こみいったことをしなくても、シンプルに、<img>のsrc属性にルート相対パスを使えば良いのでは」と解釈しました。
    そこで、 .htaccessで私が追加した2行をいったんコメントアウトし、<img>のsrc属性にルート相対パスを使いました。その際、rgbgy様とkszk311様のご回答内容について、 /example.com の有無に違いがありましたので、念のため両方試しましたが、画像は表示できませんでした。

    もし、<img>のsrc属性ではなく、 .htaccessのURLをルート相対パスに変更する必要があるということでしたら、大変お手数ですが、私が追加した2行のうち、
    (1) 1行目(RewriteCond で始まる行)を変更する必要がある
    (2) 2行目(RewriteRule で始まる行)を変更する必要がある
    (3) 両方の行を変更する必要がある
    のどれにあたるかをご指摘くださいますでしょうか。また、この変更をするとき、あわせて<img>のsrc属性を相対ルートパスに変える必要があるのか、その必要はないのかもご指摘くださいますと幸いです。

    キャンセル

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

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

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

  • WordPress

    9119questions

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