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

解決したい問題

さくらのレンタルサーバ上で、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 に、次の記述を追加しています。

PHP
1if( isset($_SERVER['HTTP_X_SAKURA_FORWARDED_FOR']) ) {
2	$_SERVER['HTTPS'] = 'on';
3	$_ENV['HTTPS'] = 'on';
4	$_SERVER['HTTP_HOST'] = 'example.com';
5	$_SERVER['SERVER_NAME'] = 'example.com';
6	$_ENV['HTTP_HOST'] = 'example.com';
7	$_ENV['SERVER_NAME'] = 'example.com';
8}

kei344

2018/02/05 16:58

WordPressアドレスのみwww付きのドメインでアクセスするのでしょうか。また、そうする理由がわかりません。

退会済みユーザー

2018/02/05 17:17

kei344様、ご指摘ありがとうございます。まず、投稿の冒頭に誤字がありましたので訂正いたしました。また、ご指摘の内容について、WordPressアドレスになぜ https://www.example.com/yyy を指定するのか(https://example.com/yyyではないのか)ということでよろしいでしょうか。いずれにしても、この部分の設定は他の人が行ったため、その人にwwwをつけた理由を聞き、その内容をもとに投稿を追記・修正いたします。

Zuishin

2018/02/05 17:28

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

退会済みユーザー

2018/02/06 02:37

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

退会済みユーザー

2018/02/06 02:39

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

行動規範の内容に同意します

回答2件

ベストアンサー

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

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

text
1## yyy
2RewriteEngine On
3RewriteCond %{HTTPS} off
4RewriteCond %{HTTP:X-Sakura-Forwarded-For} ^$
5RewriteRule ^(.*)$ https://www.example.com/$1 [R=301,L]
6
7# BEGIN SAKURA Internet Inc.
8### 以下省略 ###

投稿2018/02/05 17:34

kei344

総合スコア69407

退会済みユーザー

2018/02/06 02:45

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

kei344

2018/02/06 09:59

wwwなしのアドレスでもインストールできたと思いますが･･･。なにか特殊な設定をされているのでしょうか、不思議です。たぶんリダイレクトループになっているものだと思いますが、さくら純正のプラグインは使用されていますよね？であればちょっとわかりませんね。ページの出力（テンプレート）部分で置換してしまうのはどうでしょう。

退会済みユーザー

2018/02/06 18: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"> と出力されていますが、何らかの方法で <img src="https://example.com/example/wp-content/themes/zzz/image/hoge.png"> となるようにしてみてはどうか、ということでしょうか。もし、そういうことでしたら、これは試したことがありまして、画像は表示されませんでした。また、そうではない場合(私がkei344様の文を誤って解釈してしまっている場合)、大変お手数をおかけしますが、どのようなことを意味していたのか、教えてくださいますと幸いです。なにとぞ、よろしくお願い申し上げます。

kei344

2018/02/06 18: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 13: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 の記述など、数多くのことを学びました。数日にわたり丁寧におつきあいくださり、ありがとうございました。

行動規範の内容に同意します

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/05 16:01

rgbgy

総合スコア11

kszk311

2018/02/05 16:06

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

退会済みユーザー

2018/02/05 17:29 編集

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属性を相対ルートパスに変える必要があるのか、その必要はないのかもご指摘くださいますと幸いです。

行動規範の内容に同意します

あなたの回答