Basic認証をかけるとヘッダーロゴ、ヘッダー画像が崩れます

[しろもん]

Lightning Pro,Lightningで、
.htaccessでログインページにBasic認証をかけると下記の画面で、ヘッダーロゴ、ヘッダー画像が崩れます。

・スマホ画面（iPhone OS：safari）
・PC Microsoft Edge

PCでChormeで開いた場合は表記崩れは発生しません。

また、Wordpress標準テーマである、
Twenty Seventeenバージョン: 2.1で開いた場合は、
上記のどのブラウザでも表記崩れは発生しません。

お手数ですが、解決方法についてご教授いただきたく思います。
どうぞよろしくお願い致します。

htaccessファイルの記載、および各バージョンは下記に記載致します。

<.htaccess ※サーバ名、ドメイン名はhogeに変更しています>

# BEGIN WordPress
AuthUserFile /export/sd217/www/jp/r/e/gmoserver/5/8/sdhogehoge/hoge.net/.htpasswd
AuthGroupfile /dev/null
AuthName “Please enter your ID and password”
AuthType Basic
require valid-user
<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

—

Lightning Proバージョン: 1.1.1
Lightningバージョン: 6.10.1
Twenty Seventeenバージョン: 2.1

子テーマ：使用しておりません

WordPress のバージョン：WordPress 5.1.1

使用しているプラグイン：All In One SEO Pack,All-in-One WP Migration,All-in-One WP Migration File Extension,Elementor,Lightning Copyright Customizer,Lightning Skin Charm,VK All in One Expansion Unit

PHP、MySQL のバージョン：PHP 7.2.14、MySQL クライアントのバージョン: 5.6
サーバー環境：お名前ドットコム

OS：Windows10 バージョン1803 ビルド 17134.706

ブラウザとそのバージョン：
Google Chrome　バージョン: 73.0.3683.103（Official Build） （64 ビット）
safari：バージョン12.2
Microsoft Edge ：42.17134.1.0　Microsoft EdgeHTML 17.17134

[DRILL LANCER]

そのコードだとWordPressがあるフォルダ以下全体にBASIC認証がかかってしまいます。

私が使用しているBasic認証のコードは下記のとおりです。
私が使用しているサーバーは
/home/hogehoge/public_html/sub1.example1.com
/home/hogehoge/public_html/sub2.example1.com
/home/hogehoge/public_html/sub1.example2.com
/home/hogehoge/public_html/sub2.example2.com
という構造をしています。

①wp-login.phpがあるディレクトリの.htaccess

<Files "wp-login.php">
	AuthUserFile /home/hogehoge/public_html/.htpasswd
	AuthGroupFile /dev/null
	Authname "Please enter your ID and password"
	Authtype Basic
	require valid-user
</Files>

②wp-adminディレクトリの.htaccess

AuthUserFile /home/hogehoge/public_html/.htpasswd
AuthGroupFile /dev/null
Authname "Please enter your ID and password"
Authtype Basic
require valid-user

<FilesMatch "(admin-ajax.php)$">
	Satisfy Any
	Order allow,deny
	Allow from all
	Deny from none
</FilesMatch>

P.S.
解決したなら解決したとしっかり返答しないと後々見放されるかもしれないのでその点は気をつけたほうが良いでしょう。

[石川＠Vektor,Inc.]

余談ですが、

# BEGIN WordPress

と

# END WordPress

の間はWordPressが書き込んできたりするので、間にはかかずに
# BEGIN WordPress の前か
# END WordPress の後に書いた方が良いと思います。たぶん。

ちがったらごめんなさい。

あと RICKさんが書いてくださっているものと同じですが参考まで。

WordPressの管理画面のセキュリティ対策にBASIC認証を設定しよう

[しろもん]

RICK様、kurudrive様

返信が遅くなってしまい本当に申し訳ございません。
この度はご回答いただきありがとうございます。

実は、
RICK様およびkurudrive様にご案内いただいた内容では、
現在BASIC認証がかからない状態となっておりますm(_)m

500 Internal Server Error
は出ていないので、
サーバーパスは間違っていないと思うのですが…

・ブラウザの閲覧履歴の削除
・ファイルはUTF-8(BOMなし)で保存

していますが、かかりません。

今一度冷静になって、もう一度最初から手順を行ってみます。

お手数おかけしてしまい申し訳ございません。

[DRILL LANCER]

とりあえず、せっかくファイルがアップできるようになったので、
wp-login.phpがあるディレクトリの.htaccessと
wp-adminディレクトリの.htaccessをアップしてみてはいかがでしょうか？

そうすれば添削して返すといった手段も生じるので解決がより早くなると思います。

[しろもん]

Rick様
早朝にも関わらず、ご連絡いただきありがとうございます！

アップさせていただきます！

◆wp-login.phpがあるディレクトリの.htaccess
<Files wp-login.php>
AuthType Basic
AuthUserFile /export/sd217/www/jp/r/e/gmoserver/5/8/hoge/hoge.net/.htpasswd
AuthGroupFile /dev/null
AuthName “Please enter your ID and password”
require valid-user
</Files>

◆wp-adminディレクトリの.htaccess
AuthType Basic
AuthUserFile /export/sd217/www/jp/r/e/gmoserver/5/8/hoge/hoge.net/.htpasswd
AuthGroupFile /dev/null
AuthName “Please enter your ID and password”
Require valid-user
<FilesMatch “(admin-ajax.php)$”>
Satisfy Any
Order allow,deny
Allow from all
Deny from none
</FilesMatch>

[DRILL LANCER]

AuthUserFile /export/sd217/www/jp/r/e/gmoserver/5/8/hoge/hoge.net/.htpasswd

これが正しいのかどうかはわかりませんが、
とりあえず、
<Files wp-login.php>→<Files "wp-login.php">に変えた方は良いでしょう。

あと、 SiteGuard WP Plugin やXO Security あたりで管理画面やログイン画面のURLを
変更している場合このコードは効かない可能性があります。

管理画面やログイン画面のURLの変更をしている場合はそれを解除してから試してみてください。

BASIC認証はwp-login.phpやwp-adminへの不正アクセスをブロックするものなのでこちらのほうがおそらく強力です。

[しろもん]

Rick様

ありがとうございます！

大変恐縮ですが、
頂いた方法をは、今晩検証させてください！

お忙しい中本当にありがとうございます

[しろもん]

お世話になっております。

現在、wp管理画面へのログインにはbasic認証がかかっており、
HPの画面にはbasic認証がかかっていない状態です。

AuthUserFileのパスは、
wp-login.phpがあるディレクトリも、wp-adminディレクトリも
同じパスを使用しているので誤りはないと思いあす。

wp-adminディレクトリの.htaccessは
問題ないのかなと思いますので、
wp-login.phpがあるディレクトリの.htaccess
を今一度みなおします！

◆wp-login.phpがあるディレクトリの.htaccess
<Files “wp-login.php”>
AuthType Basic
AuthUserFile /export/sd217/www/jp/r/e/gmoserver/5/8/hoge/hoge.net/.htpasswd
AuthGroupFile /dev/null
AuthName “Please enter your ID and password”
require valid-user
</Files>

◆wp-adminディレクトリの.htaccess(2019年4月23日 5:17 AMの投稿から変更していません)
AuthType Basic
AuthUserFile /export/sd217/www/jp/r/e/gmoserver/5/8/hoge/hoge.net/.htpasswd
AuthGroupFile /dev/null
AuthName “Please enter your ID and password”
Require valid-user
<FilesMatch “(admin-ajax.php)$”>
Satisfy Any
Order allow,deny
Allow from all
Deny from none
</FilesMatch>

[しろもん]

↑先ほどの続き

SiteGuard WP Plugin
をインストールしていましたので（無効化状態でした）
削除致しました。

[しろもん]

解決いたしました！

実は、basic認証をかける前にSSL化をしたのですが、
ヘッダーロゴおよびヘッダー画像の参照パスが
httpのママになっておりました。

画像参照先をhttpsに変更しましたら、表記崩れが直りました。

下記に、手順を記載いたします。

今回は、#BEGIN WordPressと#END WordPressの間には
書かないほうがいいと教えてくださった
kurudrive様をベストアンサーとさせていただきます！

●basic認証の手順
(1)SSL化を実施
※こちらは、各サーバによって異なりますので、
レンタルサーバの手順に従ってください

(2)下記の手順でbasic認証を設定

お名前サーバーでWordPressサイトのベーシック認証で手間取った話

(3)下記の手順を参考に、SSL化したあとで、自分で貼っている画像などでhttp://が残っているところを修正

SSL化したのに、”このサイトへの接続は完全には保護されていません”と表示される場合

[しろもん]

.htaccessと.htpasswdは同一フォルダに保管しています。
ドメイン名のフォルダ直下です。

<.htaccess ※サーバ名、ドメイン名はhogeに変更しています>

AuthUserFile /export/sd217/www/jp/r/e/gmoserver/5/8/hoge/hoge.net/.htpasswd
AuthGroupfile /dev/null
AuthName “Please enter your ID and password”
AuthType Basic
require valid-user
# 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

[投稿者]

投稿